﻿.main {
	font-size:15px; font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
.main h1,.main h2,.main h3,.main h4,.main h5,.main h6 {
    font-family:Arial, Helvetica, sans-serif;
}
#mainLeaderboard {
	height:90px;
}
table {
	margin-bottom:12px;
}
form {
	margin-bottom:12px;
}
.top {
	width:100%;
	z-index:99;
	position:fixed;
	height:50px;
	top:0;
	background-color:#ffffff;
	padding-left:15px;
}
#topLogo {
	margin-top:6px;
}
#searchDiv {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:auto;
    height:90px;
    padding-top:5px;
    padding-left:50px;
    padding-right:50px;    
    background-color:#dddddd;
}
#closeSearch {
    display:block;
    margin-bottom:15px;
    margin-right:15px;
}
#translateDiv {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:auto;
    height:90px;
    padding-top:5px;
    padding-left:50px;
    padding-right:50px;    
    background-color:#dddddd;
}
#closeTranslate {
    display:block;
    margin-bottom:15px;
    margin-right:15px;
}
div.cse .gsc-control-cse, div.gsc-control-cse {
    background-color: transparent;
    border: none;
    padding:0px;
    margin:0px;
    margin-top:30px;
}
td.gsc-search-button input.gsc-search-button {
    border-color: #8AC007;
    background-color: #8AC007;
    border:none;
    border-radius:4px;
}
.gsc-input-box {
    border-radius:4px;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
    box-sizing: content-box;
    line-height: normal;
}
.gsc-tabsArea div {
    overflow: visible; 
}
.topnavContainer {
	position:fixed;
	width:100%;
	top:50px;
	z-index:9;
	background-color:rgb(95,95,95);
	height:40px;
}
.topnav a {
	padding:12px 18px;
	color:#f5f5f5;
}
.topnav a:active, .topnav a:hover,.topnav a:focus {
	background-color:#000000 !important;
	text-decoration:none;
	color:#ffffff;	
}
.topnav_home {
    background-image: url('/images/home.png');
    background-repeat:no-repeat;
    background-position: 50% 46%;
    color:transparent !important;
    width:50px;
}
.topnav_search {
    background-image: url('/images/search.png');
    background-repeat:no-repeat;
    background-position: 50% 46%;
    color:transparent !important;
    width:50px;
}
.topnav_menu {
    color:#ffffff !important;
    width:50px;
    padding-top:4px !important;
}
.topnav_translate {
    background-image: url('/images/translate.png');
    background-repeat:no-repeat;
    background-position: 50% 46%;
    color:transparent !important;
    width:50px;
}
.w3DropdownMenu {
    display:none;
	position:fixed;
	height:auto;
	min-height:350px;
	width:auto;
	top:52px;
	bottom:60%;
	right:10px;
	left:18%;
	background-color:#f5f5f5;
	z-index:1000;
	margin-top:38px;
	padding-top:1%;
	padding-bottom:2%;
	padding-left:4%;
	overflow:auto;
	border:1px solid #ebebeb;
	border-top:none;
}
.w3DropdownMenu a {
	display:block;
	color:#000000;
}
.w3DropdownSection {
	height:200px;
	min-width:150px;
}
/*OVERRIDE BOOTSTRAP:*/
    .nav-pills li a {
        border-radius: 0;
    }
    .nav .open a:focus {
        background-color: #000000;
    }
.menuBtn {
    display:none !important;
    cursor:pointer;
    width:40px;
    float:right !important;
    cpadding-top:4px;
    cpadding-bottom:12px;
    cpadding-left:10px;
    cpadding-right:10px;    
}
.menuBtn:hover {
    background-color:#000000;
}
.menuSearch {
    display:block !important;
    cursor:pointer;
    margin-right:25px;
    float:right !important;
    width:40px;
}
.menuTranslate {
    display:block !important;
    cursor:pointer;
    float:right !important;
    width:40px;
    margin-right:20px;
}
.menuBtn hr {
    height:1px;
    margin:0;
    margin-top:6px;
    background-color:#ffffff;
}
.menu {
    padding-right:0;
    padding-top:50px;
}
.menu a {
	display:block;
	padding-bottom:1%;
	color:#000000;
}
.menu a:hover {
	background-color:#ffffff;
    text-decoration:none;
}
.menu h2 {
	font-size:22px;
	margin-top:10px;
}
.master {
	max-width:1600px;
	margin-left:0;
	margin-top:52px;
}
.leaderboard {
	padding:2%;
	padding-right:25px;
	overflow:hidden;
	padding-top:55px;
}
.main a {
	color:#000000;
}
.main a:link, .main a:visited {
	text-decoration:underline;
}
.main a:active, .main a:hover {
	text-decoration:none;
	color:#8AC007;
}
div.chapter {
	overflow:auto;
}
div.chapter, div.nav {
    font-size:20px;
    margin:0px;
    padding:0px;
    width:auto;
    overflow:hidden;
}
a.chapter:link    {color:#8AC007;background-color:transparent;text-decoration:none;}
a.chapter:visited {color:#8AC007;background-color:transparent;text-decoration:none;}
a.chapter:hover   {color:#8AC007;background-color:transparent;text-decoration:none;}
a.chapter:active  {color:#8AC007;background-color:transparent;text-decoration:none;}
div.chapter div.prev {
    width:40%;
    float:left;
    text-align:left;
    overflow:hidden;
    white-space:nowrap;
}
div.chapter div.next {
    width:48%;
    float:right;
    text-align:right;
    white-space:nowrap;    
    overflow:hidden;
}
div.nav div.prev {
    width:22%;
    float:left;
    text-align:left;
    overflow:hidden;
    white-space:nowrap;
}
div.nav div.home, div.nav div.video {
    margin-left:3%;
    width:46%;
    float:left;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
}
div.nav div.next {
    width:28%;
    float:right;
    text-align:right;
    overflow:hidden;
    white-space:nowrap;
}
div.tutintro {
    width:auto;
    min-height:132px;
}
div.tutintro img {
    float:left;
    margin-right:20px;
    margin-bottom:10px;
}
div.tutintro p {
    margin-top:0px;
    font-size:16px;
}
p.intro {
    font-size:16px;
    color:#404040;
    background-color:transparent;
    margin-top:10px;
}
span.marked {
    color:#e80000;
    background-color:transparent;
}
span.deprecated {
    color:#e80000;
    background-color:transparent;
}
h2.example, h2.example_head {
	font-size:20px;
	color:#555555;
	margin-top:4px;
}
div.example p {
    margin-top:10px; 
}
div.example {
    width:auto;
    color:#000000;
    background-color:#f1f1f1;
    border:1px solid #ebebeb;
    padding:1.2%;
    border-radius:4px;
    line-height: 1.15em;
    word-wrap: break-word;
    margin-bottom:12px;
}
div.example_code {
    width:auto;
    background-color:#ffffff;
    padding:1.1%;
    border-left:4px solid #8AC007;
    border-radius:4px;
    word-wrap: break-word;    
}
div.example_result {
    width:auto;
    background-color:#ffffff;
    padding:1.1%;
    border-radius:4px;
}
div.code {
    width:auto;
    border:1px solid #dddddd;
    background-color:#f5f5f5;
    color:#444444;
    padding:1.1%;
    margin:0;
    word-wrap: break-word;    
    margin-bottom:12px;    
}
div.code div {
    font-size:14px;
}
div.example_code, div.code, div.code div {
	font-family:Consolas,"courier new";
}
a.tryitbtn, a.tryitbtn:link, a.tryitbtn:visited, a.showbtn, a.showbtn:link, a.showbtn:visited {
    font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:#8AC007;
    font-weight:bold;
    font-size:13px;
    text-align:center;
    padding:0.7% 2.0%;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #aaaaaa;
    border:1px solid #8AC007;
    border-radius:5px;
    white-space:nowrap;
}
a.tryitbtn:hover,a.tryitbtn:active,a.showbtn:hover,a.showbtn:active {
    background-color:#ffffff;
    color:#8AC007;
}
a.playitbtn,a.playitbtn:link,a.playitbtn:visited {
    display:inline-block;
    color:#ffffff;
    background-color:#FFAD33;
    border:1px solid #FFAD33;
    font-weight:bold;
    font-size:13px;
    text-align:center;
    padding:10px;
    padding-top:1px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:1px;
    border-radius:5px;
    white-space:nowrap;
}
a.playitbtn:hover,a.playitbtn:active {
    background-color:#ffffff;
    color:#FFAD33;
}
a.tryitbtnsyntax:link,a.tryitbtnsyntax:visited,a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover {
    font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    float:right;
    padding-top:0px;
    padding-bottom:1px;
    background-color:#8AC007;
    border:1px solid #8AC007;
}
a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover {
    color:#8AC007;;
    background-color:#ffffff;
}
div.tryit_ex {
    margin-bottom:5px;
    overflow:auto;
}
div.tryit_ex img {
    float:left;
    margin-right:10px
}
div.tryit_ex h2 {
    margin-top:5px;
}
table.reference {
	width:100%;
	max-width:100%;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;	
	border-bottom:1px solid #dddddd;		
}
table.reference>thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
table.reference tr:nth-child(odd)	{background-color:#ffffff;}
table.reference tr:nth-child(even)	{background-color:#f5f5f5;}
table.reverse tr:nth-child(odd)	{background-color:#f5f5f5 !important;}
table.reverse tr:nth-child(even)	{background-color:#ffffff !important;}
table.tecspec {
	width:100%;
	max-width:100%;
	border-bottom:1px solid #dddddd;		
}
table.tecspec>thead>tr>th, table.tecspec>tbody>tr>th, table.tecspec>tfoot>tr>th, table.tecspec>thead>tr>td, table.tecspec>tbody>tr>td, table.tecspec>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
table.lamp {
    width:100%;
    padding:0px;
    border:1px solid #d4d4d4;
}
table.lamp th {
    color:#000000;
    background-color:white;
    padding:10px;
    padding-right:5px;
}
table.lamp td {
    padding:4px;
    padding-left:0px;
    padding-right:10px;
    background-color:#ffffff;
}
.html5badge {
    background-image:url('/images/html5_badge20.png');
    background-repeat:no-repeat;
    background-position:right;
}
a.navupa {
    display:block;
    width:auto;
    margin-top:15px;
    margin-bottom:15px;    
}
a.navupa:link, a.navupa:visited {
	opacity:0.8;
	text-decoration:none;
}
a.navupa:hover, a.navupa:active {
	color:#000000;
	opacity:1;
	text-decoration:none;	
}
img.navup {
	margin-right:6px;
}
.notsupported,.notsupported:hover,.notsupported:active,.notsupported:visited,.notsupported:link {
    color:rgb(197,128,128)
}
.sidesection {
	text-align:center;
	margin-top:0;
	margin-bottom:20px;
}
.sidesection h3 {
    font-size:18px;
}
.sidesection a {
	display:block;
	padding-bottom:1%;
	color:#000000;
}
.shareContainer {
	max-width:250px;
	margin:auto;
}
#sharelist {
    padding-left:0;
}
#sharelist li {
    margin-bottom:5px;
}
#sharelist li, #sharelist a {
    display:block;
    height:35px;
}
#sharelist li {
    background-image:url('/images/sharebtns.png');
    background-repeat:no-repeat;
    opacity:0.7;
    margin:auto;
    margin-bottom:6px;
    width:35px;
}
#sharelist li:hover {
    opacity:1;
}
#facebook {
    left:0px;
    background-position:0 0;
}
#twitter {
    left:35px;
    background-position:-35px 0;
}
#email {
    left:70px;
    background-position:-70px 0;
}
#googleplus {
    left:105px;
    background-position:-105px 0;
}
#skyscraper {
	margin-top:0;
}
#leftBackground {
	position:fixed;
	background-color:#f5f5f5;
	width:17%;
	top:0;
	bottom:0;
	height:auto;
	max-width:270px;
	overflow:visible;
	z-index:-10;
	border:none;
}
#div-gpt-ad-1422003450156-0 {
	width:300px;
	height:250px;
	float:left;
	margin-top:20px;
	margin-bottom:0;
}
#div-gpt-ad-1422003450156-3 {
    width:300px;
    height:250px;
    float:left;
    margin-top:20px;
    margin-bottom:0;
    margin-left:4%;
}
#err_form, #err_sent {
    display:none;
}
.top10 {
	text-align:center;
}
.top10 h3 {
    font-size:16px;
    color:#555555;
}
.top10 a {
    color:#555555;
    font-size:12px;
}
.footer {
    margin-top:20px;
	text-align:center;
	font-size:11px;
	font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
.footer a {
	color:#444444;
}
#translateSection {
    text-align:center;
    margin-top:20px;
}
.highCOM {color:green;}
.highELE {color:brown;}
.highATT {color:crimson;}
.highVAL {color:mediumblue;}
.highGLB {color:#CC9900;}
.highLT, .highGT {color:blue;}

@media screen and (max-width: 1420px) {.topnav_xml  {display:none !important;}}
@media screen and (max-width: 1350px) {.topnav_forum  {display:none !important;}}
@media screen and (max-width: 1280px) {.topnav_angular  {display:none !important;}}
@media screen and (max-width: 1180px) {.topnav_bootstrap  {display:none !important;}}
@media screen and (max-width: 1050px) {.topnav_jquery  {display:none !important;}}
@media screen and (max-width: 980px)  {.topnav_php  {display:none !important;}}
@media screen and (max-width: 900px)  {.topnav_sql  {display:none !important;}}
@media screen and (max-width: 850px)  {.topnav_examples  {display:none !important;}}
@media screen and (max-width: 520px)  {
    .topnav_references {
        display:none !important;
    }
    .topnav_tutorials {
        display:none !important;
    }
}
@media screen and (max-width: 460px)  {
    .top {position:relative;}
    .topnavContainer {
        position:relative;
        top:auto;
    }    
    .master {
        margin-top:0;
    }
    .menu {
	    padding-top:15px;
    }    
    .leaderboard {
        padding-top:0 !important;
    }
    #menyen {
        position:absolute !important;
        height:10000px !important;
        top:0 !important;
        bottom:0 !important;
    }
}
@media screen and (min-width: 1600px) {
    .w3DropdownMenu {
        left:295px;
        width:1260px;
        right:auto;
    }
}
@media screen and (max-width: 1199px) {
    #rightside {
        margin-top:100px;
    }
}
@media screen and (max-width: 991px) {
    #leftBackground {
        width:25%;
    }
    .w3DropdownMenu {
	    left:27%;
    }
    #sharelist li {
        float:left;
        margin-left:20px;;
    }
    #div-gpt-ad-1422003450156-0 {
        float:none;margin-left:auto;margin-right:auto;
    }
    #div-gpt-ad-1422003450156-3 {
        float:none;margin-left:auto;margin-right:auto;
    }
        
}
@media screen and (max-width: 768px) {
    #leftBackground {
        display:none !important;
    }
    #menyen {
        display:none;
    }
    .menu a:hover {
	    background-color:#f1f1f1;
        text-decoration:none;
    }
    .main {
        padding:15px;
    }
    .topnav_js  {display:none !important;}
    .topnav_css  {display:none !important;}
    .topnav_html  {display:none !important;}        
    .menuBtn {
	    display:block !important;
    }
    .leaderboard {
        padding-top:5px;
    }
    .w3DropdownMenu {
	    left:0;
	    padding-left:50px;
	    right:0;
    }
    .w3DropdownSection {
        height:auto;
        margin-bottom:20px;
    }
    #div-gpt-ad-1422003450156-0 {
        float:left;margin-left:auto;margin-right:auto;
    }
    #div-gpt-ad-1422003450156-3 {
        float:right;margin-left:auto;margin-right:auto;
    }
    
}
@media screen and (max-width: 716px) {
    #mainLeaderboard {
	    height:60px;
    }
}
@media screen and (max-width: 700px) {
    #div-gpt-ad-1422003450156-0 {
        float:none;margin-left:auto;margin-right:auto;
    }
    #div-gpt-ad-1422003450156-3 {
        float:none;margin-left:auto;margin-right:auto;
    }
    .prev .chapter, .next .chapter, .home .chapter, .video .chapter {
        color:transparent !important;
    }
    .prev .chapter::after, .next .chapter::after, .home .chapter::after, .video .chapter::after {
        font-family: 'Glyphicons Halflings';
        visibility:visible !important;
        position:absolute;
        color:#8AC007;
    }
    .prev .chapter::after {
        content: "\e079";
        left:15px;
    }
    .next .chapter::after {
        content: "\e080";
        right:15px;
    }
    .home .chapter::after {
        content: "\e021";
        left:47%;	
    }
    .video .chapter::after {
        content: "\e009";
        left:49%;
        font-size:24px;
    }
}
@media screen and (min-width: 769px) {
    #menyen {
        display:block !important;  
        position:relative !important;            
        z-index:1 !important;	
        overflow:visible !important;
        right:auto !important;
        border-left:none !important;
        border-bottom:none !important;
        width:initial !important;
        padding:0 !important;
        padding-top:0 !important;
        background-color:transparent !important;
        top: auto !important;                
        bottom: auto !important;                        
    }
}