@media screen
{
/*general*/
*{margin:0px;padding:0px;font-weight: lighter;font-family: Myriad Pro, Arial, Helvetica, sans-serif;color:#000;}
body{font-size:75%;line-height:1.3;}
#wrapper{width:100%;height: 100%;position:relative;}
li{list-style:none;}
a, a:hover{color:#fff;text-decoration:none;}

/*nav*/
#nav{}

#globalnav{width: 100%;height:;position: absolute;top: 30px;line-height:;}
#nav #globalnav a{height:20px;line-height:20px;}

#globalnav a, #globalnav a:hover{text-decoration: none;font-family: arial;font-size: 1.5em;letter-spacing: 0;}

#globalnav a{color: #000;border: none;z-index: 300;}
#globalnav a:hover{color:#000;text-decoration:underline;}

#html, #graphic, #js_nav, #php_nav{position: absolute;top: 0px;}

#html{left: 0px;}
#graphic{left: 250px;}
#js_nav{left: 550px;}
#php_nav{left: 850px;}

/*table of contents*/
#table{height:360px;z-index: 400;width: 200px;position:fixed;top:20px;left:900px;display:none;}
#table ul{margin:0px;padding:0px;font-size: 1.5em;width: 445px;}
#table li{padding:20px;background: #fff;border-top:2px solid #fff;border-bottom:2px solid #fff;}
#table img{float:left;}
#table a{color: #000;font-size: 1.5em;text-decoration:none;}
#table li:hover a{color:#000;text-decoration:none;}

/*font types*/
h1, h2{position: absolute;left: 50px;}

h1{font-size: 3em;top: 70px;left: 145px;}
h2{font-size: 2em;top: 80px;left: 600px;}
h3{font-size: 3em;color: #fff;height: 100px;line-height: 100px;width: 100%;margin-bottom: 1px;padding-left: 500px;}
p{font-size:1.5em;padding:20px 20px;line-height:2;width: 500px;}
ul{margin-top: 20px;margin-bottom: 20px;margin-left: 550px;font-size: 3em;width: 600px;}
ol{margin-left: 501px;width: 720px;}
li{list-style:none;}

/*classes*/
.decimal{margin-top: 50px;}
.decimal li{list-style-type: decimal;font-size: 2.5em;}
.lower-alpha li{list-style-type: lower-alpha;}
.hide{display:none;}


/*sections*/
#introductory, #rules, #principles, #form, #misused, #misspelled{float:left;width:100%;}

#introductory p, #rules p, #principles p, #form p, #misused p, #misspelled p{}
#rules p, #principles p, #form p, #misused p, #misspelled p{margin-left: 482px;}

#rules li.yes, #form li.yes, #misused li.yes, #misspelled li.yes{margin-bottom: 50px;margin-top: 20px;}

#introductory .column1, #introductory .column2{float:left;}
#introductory .column1{margin-left: 290px;}
#introductory p span{font-style:italic;}

#rules ul li{}
#rules ul li, #rules ul li.yes{color:#A2C8C8;}
#rules ul li.no{color:#ccc;}
#rules ul li.yes{}

#principles ul li{color:#9DB2D6;}
#principles .no, #principles ul.no li, #positive-form ul.no li{color:#ccc;}
#principles #loose .no{width: 700px;}
#principles .yes{margin-bottom: 70px;margin-top: 20px;}

#form ul li{color:#5478A3;}
#form .no, #form ul.no li{color:#ccc;}

#misused ul li{color:#2D6AA4;}
#misused .no, #misused ul.no li{color:#ccc;}

#misspelled ul li{color:#0078A3;}
#misspelled .no, #misspelled ul.no li{color:#ccc;}
#misspelled{margin-bottom: 50px;}

#rules ul li, #principles ul li, #form ul li, #misused ul li{margin-bottom: 20px;}

#form span, #misused span{font-weight:bold;}

#contents{position: absolute;top: 130px;left:0px;width: 100%;}


#introductory h3{background:#BCC5C4;}
#rules h3{background:#A2C8C8;}
#principles h3{background:#9DB2D6;}
#form h3{background:#5478A3;}
#misused h3{background:#2D6AA4;}
#misspelled h3{background:#0078A3;}

#misspelled p{padding:0px;}
#left, #right{float:left;margin-bottom:30px;margin-top: 25px;}
#left{margin-left: 500px;}
#misspelled #p{margin-left:20px;}
#misspelled ul{margin:0px;}

#column1, #column2, #column3, #column4{float:left;margin-right: 10px;width: 200px;}
}



@media screen and (max-width: 1023px)
{
/*general*/
*{margin:0px;padding:0px;font-weight: lighter;font-family: Myriad Pro, Arial, Helvetica, sans-serif;color:#000;}
body{font-size:75%;line-height:1.3;}
#wrapper{width: 100%;height: 100%;position:relative;}
li{list-style:none;}
a, a:hover{color:#fff;text-decoration:none;}

/*nav*/
#nav{}

#globalnav{left: 150px;}
#html{left: 0px;}
#graphic{left: 240px;}
#js_nav{left: 480px;}
#php_nav{left: 660px;}


/*table of contents*/
#table{z-index: 400;position:fixed;top:200px;left: 80px;display:none;}
#table ul{margin:0px;padding:0px;font-size: 1.5em;}
#table li{padding:20px;border-top:2px solid #fff;border-bottom:2px solid #fff;}
#table img{float:left;}
#table a{color:#000;font-size: 1.5em;text-decoration:none;}
#table li:hover a{color:#000;text-decoration:underline;}

/*font types*/
h1, h2{}

h1{}
h2{}
h3{font-size: 3em;color: #fff;height: 125px;line-height: 125px;width: 965px;margin-bottom: 2px;padding-left: 150px;}
p{font-size:1.5em;padding:20px 20px;line-height:2;width: 500px;}
ul{margin-top: 20px;margin-bottom: 20px;margin-left: 300px;font-size: 3em;width: 600px;}
ol{margin-left: 150px;width: 720px;}
li{list-style:none;}

/*classes*/
.decimal{margin-top: 50px;}
.decimal li{list-style-type: decimal;font-size: 2.5em;}
.lower-alpha li{list-style-type: lower-alpha;}
.hide{display:none;}


/*sections*/
#introductory, #rules, #principles, #form, #misused, #misspelled{float:left;width:100%;}

#introductory p, #rules p, #principles p, #form p, #misused p, #misspelled p{}
#rules p, #principles p, #form p, #misused p, #misspelled p{margin-left: 212px;}

#rules li.yes, #form li.yes, #misused li.yes, #misspelled li.yes{margin-bottom: 50px;margin-top: 20px;}

#introductory .column1, #introductory .column2{margin-left: 250px;}
#introductory p span{font-style:italic;}

#rules ul li{}
#rules ul li, #rules ul li.yes{color:#A2C8C8;}
#rules ul li.no{color:#ccc;}
#rules ul li.yes{}

#principles ul li{color:#9DB2D6;}
#principles .no, #principles ul.no li, #positive-form ul.no li{color:#ccc;}
#principles #loose .no{width: 600px;}
#principles .yes{margin-bottom: 70px;margin-top: 20px;}

#form ul li{color:#5478A3;}
#form .no, #form ul.no li{color:#ccc;}

#misused ul li{color:#2D6AA4;}
#misused .no, #misused ul.no li{color:#ccc;}

#misspelled ul li{color:#0078A3;}
#misspelled .no, #misspelled ul.no li{color:#ccc;}
#misspelled{margin-bottom: 50px;}

#rules ul li, #principles ul li, #form ul li, #misused ul li{margin-bottom: 20px;}

#form span, #misused span{font-weight:bold;}

#contents{}


#introductory h3{background:#BCC5C4;}
#rules h3{background:#A2C8C8;}
#principles h3{background:#9DB2D6;}
#form h3{background:#5478A3;}
#misused h3{background:#2D6AA4;}
#misspelled h3{background:#0078A3;}

#misspelled p{padding:0px;}
#left, #right{float:left;margin-bottom:30px;margin-top: 25px;}
#left{margin-left: 120px;}
#misspelled #p{margin-left:20px;}
#misspelled ul{margin:0px;}

#column1, #column2, #column3, #column4{float:left;margin-right: 10px;width: 200px;}
}