body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,img,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;border:0}body{line-height:1}h1,h2,h3,h4,h5,h6,big,small,sub,sup{font-size:100%}h1,h2,h3,h4,h5,h6,th,strong,dt,b{font-weight:normal}blockquote,q,em,cite,dfn,i,cite,var,address{font-style:normal}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote p:before,blockquote p:after,q:before,q:after{content:""}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}th{text-align:left}textarea{overflow:auto}button,input[type="submit"],input[type="reset"],input[type="button"]{width:auto;overflow:visible}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} @font-face { font-family: "Droid Sans"; src: url(fonts/DroidSans-webfont.eot); src: local(☺), url(fonts/DroidSans-webfont.woff) format("woff"), url(fonts/DroidSans-webfont.ttf) format("truetype"), url(fonts/DroidSans-webfont.svg#webfontbC7tRKrq) format("svg"); } @font-face { font-family: "Droid Sans"; src: url(fonts/DroidSans-Bold-webfont.eot); src: local(☺), url(fonts/DroidSans-Bold-webfont.woff) format("woff"), url(fonts/DroidSans-Bold-webfont.ttf) format("truetype"), url(fonts/DroidSans-Bold-webfont.svg#webfont5dL3IGk2) format("svg"); font-weight: bold; } @font-face { font-family: "Eau Sans Black"; src: url(fonts/eau_sans_black-webfont.eot); src: local(☺), url(fonts/eau_sans_black-webfont.woff) format("woff"), url(fonts/eau_sans_black-webfont.ttf) format("truetype"), url(fonts/eau_sans_black-webfont.svg#webfontjYK2iPFJ) format("svg"); font-weight: bold; } body, input, textarea { font-family: "Droid Sans", "Trebuchet MS", Trebuchet, Geneva, sans-serif; } h2, h3, .year2011 #yearmenu, .year2012 #yearmenu, button { font-weight: bold; font-family: "Eau Sans Black", "Myriad Web", "Myriad Pro", Arial, Helvetica, sans-serif; text-transform: uppercase; } body { min-width: 540px; background: #fff url(background.png) 755px 50% no-repeat fixed; color: #666; font-size: 81.25%; line-height: 1.5em; } #everything { position: relative; /* margin-left: -9764px; padding-left: 9999px;*/ padding-left: 235px; overflow: hidden; } nav { position: absolute; left: 9779px; left: 15px; z-index: 1; padding-bottom: 53px; width: 197px; background: url(images.png) -1854px 100% no-repeat; font-size: .85em; line-height: 1.55em; text-transform: lowercase; text-shadow: 1px 1px #eee; text-align: center; } nav.fixed { position: fixed; left: 15px; top: 0; } nav div { padding: 10px 10px 0; border-left: 1px solid #eee; border-right: 1px solid #aaa; background-color: #ccc; } nav ul { position: relative; top: 5px; margin-top: 10px; padding: 10px 5px 0; border-top: 1px solid #aaa; background: url(images.png) 100% -1px; } nav ul:first-child { margin-top: 0; padding-top: 0; border-top: none; background-image: none; } nav li { display: inline; } a { color: #000; font-weight: bold; text-decoration: none; } section.red a, section.green a, section.blue a { color: #fd0; } a:hover, a:active { text-shadow: 0 0 10px #fd0; } .ie a:hover, .ie a:active { color: #000; background-color: #fd0; } a:focus, input:focus, textarea:focus { outline: none; } a:focus { text-decoration: underline; } a:active { text-decoration: none; } nav a { padding: 3px; font-weight: normal; white-space: nowrap; } nav a:hover { background-color: #fd0; text-shadow: none; } h1 { margin: 25px -205px; width: 705px; height: 185px; background: url(images.png) -1505px -262px; text-indent: -9999px; } #intro { margin-left: -205px; margin-bottom: 25px; width: 705px; font-size: 1.15em; line-height: 1.5em; text-align: justify; } p, section { width: 500px; } section { position: relative; margin: 0 -9979px 0 -9999px; padding: 25px 9999px; width: 500px; } .ie6 section { height: 320px; overflow: visible; } section.red, section.green, section.blue { min-height: 320px; overflow: hidden; color: #eee; } section.red { background-color: #d54; } section.green { background-color: #575; } section.blue { background-color: #579; } .star, .star div, #submission .star { position: absolute; left: 10519px; top: 0; width: 500px; height: 100%; background: url(background.png) 755px 50% no-repeat fixed; } form .star { background-image: url(stars.jpg); background-repeat: no-repeat; } .star div { left: 0; background-image: url(images.png); } .red .star div { background-position: 755px 50%; } .green .star div { background-position: 254px 50%; } .blue .star div { background-position: -247px 50%; } .ie .star, .ie .star div { bottom: auto; height: 100%; } h2 { margin: -25px 0 15px; padding-top: 25px; text-shadow: 1px 1px 1px rgba(0,0,0,.4); color: #fff; font-size: 2em; line-height: 1em; text-align: center; letter-spacing: 2px; } #rules li, #categories li { padding-left: 16px; background: url(images.png) -2168px -485px no-repeat; } #rules ul ul { margin-left: 15px; } p, aside { margin: 15px 0; } dl { margin: 0 -5px; overflow: hidden; } dt, dd { float: left; padding: 5px 5px 10px; border-top: 1px solid #b32; background: url(images.png) -1503px -499px no-repeat; } dt { clear: left; width: 150px; font-weight: bold; font-size: .8em; line-height: 1.2em; } dt:first-line { font-size: 1.25em; line-height: 1.2em; } dd { max-width: 340px; } .ie7 dd { width: 340px; min-height: 2.4em; } .ie6 dd { height: 2.4em; } .field .deterrent { position: absolute; left: -9999px; } aside { font-size: .85em; line-height: 1.35em; } aside strong { font-weight: bold; font-size: .9em; text-transform: uppercase; } fieldset { position: relative; } .winner { position: relative; padding-left: 108px; } h3 { letter-spacing: 1px; } .winner p { margin-top: 0; font-size: 1.55em; } ul.field li, p.field, div.field, .checkbox { position: relative; float: left; clear: left; margin: 0 0 15px; border: 1px solid; width: 498px; background: #fff url(images.png) -1503px 0; color: #888; } ul.field li, p.field, div.field { padding-top: 2px; font-size: .75em; line-height: 1em; text-transform: uppercase; } .red .field li, .red .field, .red .checkbox, .red .radio span, .red .winner span { border-color: #b32 #f76 #f76 #b32; } .green .field li, .green .field, .green .checkbox, .green .radio span, .green .winner span { border-color: #353 #797 #797 #353; } .blue .field li, .blue .field, .blue .checkbox, .blue .radio span, .blue .winner span { border-color: #357 #79b #79b #357; } a, .field li, .field, .checkbox, button { -webkit-transition: all .4s; -moz-transition: all .4s; transition: all .4s; } .field li.focused, .field.focused, .checkbox.focused, button:active { border-color: #db0 #fd0 #fd0 #db0; -webkit-box-shadow: 0 0 5px #fd0; -moz-box-shadow: 0 0 5px #fd0; box-shadow: 0 0 5px #fd0; } .radio .focused a span { -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.4), 0 0 5px #fd0; -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.4), 0 0 5px #fd0; box-shadow: inset 1px 1px 1px rgba(0,0,0,.4), 0 0 5px #fd0; } .field label { display: block; float: none; width: auto; padding: 0 5px; } form section ul.field label { float: left; width: 239px; } .error { display: inline; } .error li, .red .error li, .green .error li, .blue .error li { position: absolute; right: 9999px; top: 10px; z-index: 1; margin: 0 5px 3px; padding: 3px 5px; border: 1px solid; border-color: #e00 #a00 #a00 #e00; width: auto; background: #c00; color: #eee; font-weight: bold; font-size: .8em; line-height: .95em; text-transform: uppercase; } .red .error li, .green .error li, .blue .error li { right: 0; top: auto; bottom: 100%; } .red label .error li, .green label .error li, .blue label .error li { font-size: 1.05em; line-height: .95em; } .error li, .script .radio label, .script .checkbox span, button { -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.4); box-shadow: 1px 1px 1px rgba(0,0,0,.4); } .error li span { position: absolute; left: 50%; top: 100%; margin-left: -17px; width: 34px; height: 9px; background: url(images.png) -2133px -491px; } .ie7 .error li span { display: none; } .field input, .field textarea { display: block; margin: 0 -5px; padding: 2px 5px; border: none; width: 100%; background-color: transparent; color: #000; font-size: 1.3em; line-height: 1.2em; -webkit-appearance: caret; } .field textarea { height: 120px; resize: none; } .radio { margin: -5px -21px -5px -5px; padding: 5px; overflow: hidden; font-size: .85em; line-height: 1.2em; } .radio li { position: relative; float: left; margin-right: 15px; width: 88px; } #woty .radio li { margin-right: 16px; width: 70px; } .radio label, .checkbox label { cursor: pointer; } .radio label { float: right; margin: 81px 0 0 0; } .script .radio label, .script .checkbox span { border: 1px solid; border-color: #eee #aaa #aaa #eee; width: 18px; height: 18px; background: #ccc -2114px -484px no-repeat; } .script .radio label { position: relative; z-index: 1; margin: 72px -4px -9999px; -moz-border-radius: 10px; border-radius: 10px; } .script .radio .checked label, .script .checkbox.checked span { background-image: url(images.png); } .script .radio label:active, .script .checkbox label:active span { margin: 1px -1px -1px 1px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .script .radio label:active { margin: 73px -5px -9999px; } .radio span, .winner span { display: block; margin-bottom: 5px; border: 1px solid #999; -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.4); -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.4); box-shadow: inset 1px 1px 1px rgba(0,0,0,.4); height: 86px; background-image: url(finalists.jpg); cursor: pointer; } .winner span { position: absolute; left: 0; top: .2em; width: 86px; } input { margin: 0; padding: 0; } .script .radio input, .script .checkbox input { position: absolute; left: -9999px; } .radio a { display: block; font-weight: normal; } #recaptcha_image { float: left; font-size: 1.35em; line-height: 1.2em; text-transform: none; } #recaptcha_image img { display: block; margin-left: 10px; width: 400px; min-height: 57px; } .ie6 #recaptcha_image img { height: 57px; } #recaptcha_image a { display: block; margin: 8px 15px; } #recaptcha_image a, section .checkbox a { color: #000; } #recaptcha_image br { display: none; } #recaptcha_icons { float: right; margin: 0; padding: 3px 5px 30px; width: 60px; background: url(images.png) -1537px -441px no-repeat; } #recaptcha_icons li { display: inline; } #recaptcha_icons a { float: left; border: solid #fff; border-width: 4px 2px; width: 16px; height: 16px; text-indent: -9999px; background: url(images.png) -1503px -464px; } #recaptcha_icons .recaptcha_only_if_image a { background-position: -1520px -464px; } #recaptcha_icons .recaptcha_only_if_audio a { background-position: -1503px -481px; } #recaptcha_icons .recaptcha_help a { background-position: -1520px -481px; } #recaptcha_widget label { clear: both; margin-left: 1px; border-top: 1px solid #ddd; } .checkbox { padding: 5px; width: 488px; font-size: 1em; line-height: 1.5em; text-transform: none; } .script .checkbox label { float: left; position: relative; padding-left: 28px; min-height: 20px; } .ie6 .checkbox label { height: 20px; } .script .checkbox span { position: absolute; left: 0; top: 0; } .checkbox input { margin-right: 5px; } small { display: block; position: relative; top: -12px; clear: left; margin-bottom: -5px; font-size: .7em; line-height: 1.2em; } button { display: inline; float: right; padding: 5px 10px; border: 1px outset #fd0; outline: none; background-color: #fd0; letter-spacing: 1px; white-space: nowrap; cursor: pointer; } button:hover, button:focus { -webkit-box-shadow: 0 0 5px #fd0, 1px 1px 1px rgba(0,0,0,.4); -moz-box-shadow: 0 0 5px #fd0, 1px 1px 1px rgba(0,0,0,.4); box-shadow: 0 0 5px #fd0, 1px 1px 1px rgba(0,0,0,.4); } button::-moz-focus-inner { border: none; } button:active { margin: 1px -1px -1px; } form section button { font-size: 1.3em; } footer { font-size: .7em; line-height: 1.2em; } @media all and (max-width: 765px) { nav { display: none; } #everything { float: right; margin-left: -9999px; /* margin-left: -9764px;*/ padding-left: 9999px; } .star { display: none; } } @media all and (max-width: 550px) { #everything { float: none; margin-left: -9979px; } section.red, section.green, section.blue { min-height: 0; } }