/* -------------------------------------------------- =TOC -------------------------------------------------- 2. Global Reset 3. Links 4. Typography 5. Lists 6. Tables & Forms 7. Structure A. Body B. Header C. Footer 8. Navigation A. Main Menu B. Secondary Menu 9. Misc -------------------------------------------------- =Global Reset -------------------------------------------------- */ html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, img, q, s, samp, small, strike, strong, em, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border-width: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } /* -------------------------------------------------- =Links -------------------------------------------------- */ a, a:visited { color: #2e7fbe; text-decoration: underline; outline: 0; font-style: inherit; font-weight: inherit; line-height: inherit; } a:hover { color: #155688; } a.cancel, a.cancel:visited { color: #777; } a.cancel:hover { color: #555; } h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited { font-size: 13px; text-decoration: none; font-weight: normal; } h4 a, h4 a:visited, h5 a, h5 a:visited { text-decoration: none; line-height: inherit; font-weight: bold; } h3 a:hover { color: auto; } h4 a:hover, h5 a:hover { text-decoration: underline; } p a, p a:visited { line-height: inherit; } /* -------------------------------------------------- =Typography -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: #222; font-weight: bold; } h1 { font-size: 30px; line-height: 1; padding: 0 0 9px; font-weight: lighter; } h1.jumbo { font-size: 48px; font-weight: bold; } h1 small { font-size: 21px; color: #555; } h2 { font-size: 24px; line-height: 1.2; padding: 0 0 9px; font-weight: lighter; } h3 { font-size: 18px; line-height: 1.125; padding: 0 0 6px; font-weight: lighter; } h4 { font-size: 14px; line-height: 1.5; padding: 0 0 3px; } h5 { font-size: 12px; line-height: 18px; padding: 0; } p { font-size: 13px; line-height: 18px; padding: 0 0 18px; color: #444; } code { font-family: Courier, monospace; color: red; } em { font-style: italic; font-weight: inherit; line-height: inherit; color: #777; } strong { font-style: inherit; font-weight: bold; line-height: inherit; } hr { border-width: 1px 0 0; margin: 15px 0; height: 0; clear: both; border-color: #fff; border-style: solid; } hr.shown { border-color: #ccc; margin: 20px 0; } /* -------------------------------------------------- =Lists -------------------------------------------------- */ dl { margin-bottom: 4px; } dt { font-size: 13px; line-height: 1.5; font-weight: bold; color: #333; } dd { margin: 0 0 0; font-size: 13px; line-height: 1.5; } ol, ul { margin: 0 0 1.8em 1.8em; color: #444; } ol { list-style: decimal; } ul { list-style: disc; } ul.clean, ol.clean { margin: 0; padding: 0; list-style: none; } li { font-size: 13px; line-height: 18px; } li ol, li ul { margin: 0 2em; } /* -------------------------------------------------- =Tables -------------------------------------------------- */ table { width: 100%; margin: 0 0 18px; border: solid #ddd; border-width: 0; } table td, table th { border-right: 0px solid #ddd; } table td { padding: 0px 4px; font-size: 12px; line-height: 18px; border-bottom: 0px solid #ddd; } table td.sortable { background-position: right; } table a, table a:visited { text-decoration: none; } /* -------------------------------------------------- =Forms -------------------------------------------------- */ form { margin: 0 0 18px; padding: 0; } label { display: block; font-size: 13px; font-weight: bold; line-height: 18px; cursor: pointer; } input, textarea, select { font-family: Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #333; font-size: 14px; padding: 5px; } input.faded { color: #c2c2c2; } input[type=text], input[type=password], textarea { padding: 5px; border: solid 1px #ccc; } /* form input.input-text, form textarea { display: block; background: #fff; margin: 0; padding: 3px 4px; width: 206px; font-size: 14px; line-height: 18px; border: 1px solid #ccc; color: #555; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-shadow: 0 1px 1px #fff; height: 56px; } */ form input.error, form textarea.error { border: solid 1px #e33100; } form select { border: 1px solid #ccc; font-size: 12px; } form textarea:focus { outline: none; border-color: #999; } form input:focus { outline: none; border-color: #999; } form input.mini, form textarea.mini { width: 84px; } form input.small, form textarea.small { width: 204px; } form input.medium, form textarea.medium { width: 264px; } form input.large, form textarea.large { width: 380px; background-image: none; } form input.fluid, form textarea.fluid { width: 680px; } form input.title { font-size: 14px; } form p.note { margin: -9px 0 9px 4px; color: #777; } form h4 { margin: 0 0 9px; } /* Lists of options ---------- */ form ul.option-list { margin: 0 0 18px; padding: 0; list-style: none; } form ul.option-list li { position: relative; margin: 0 0 9px; position: relative; } form ul.option-list input.radio, form ul.option-list input.checkbox { position: absolute; top: -2px; left: 0; } form ul.option-list li label { display: block; margin-left: 23px; font-size: 12px; line-height: 16px; font-weight: normal; color: #333; } form ul.option-list li label small { color: #777; } body.ie form ul.option-list li label { margin-top: -14px; } /* Wrap inputs and textareas with a nice border ---------- */ div.wrap { display: block; margin: 0 0 9px; padding: 0; } div.wrap div.element { width: 280px; margin: 0; } div.wrap label { font-size: 12px; margin: 0 8px 0 0; padding: 0; display: inline; width: 120px; text-align: right; float: left; position: relative; top: 4px; line-height: 1.1; font-weight: normal; } div.wrap label small { font-size: 11px; color: #555; } div.wrap div { float: left; margin-left: 10px; display: inline; width: 380px; } div.wrap div label { font-size: 12px; font-weight: normal; float: none; text-align: left; width: auto; top: 0; } div.wrap div span { font-size: 12px; font-weight: normal; line-height: 1.3; } div.wrap div span.sub_desc { display: inline-block; width: 230px; color: #777; } div.wrap div span.sub_error { display: inline-block; width: 230px; color: #e33100; } div.wrap small { font-size: 10px; color: #999; display: block; } div input.input-text { margin: 0; display: block; position: relative; } div textarea { margin: 0; display: block; width: 370px; } div select { background: #fff; padding: 1px; line-height: 1.5; } form div.wrap p { margin: 5px 5px 4px; padding: 0; } body.ff2 span.wrap { display: block; } body.ff2 span.wrap input.input-text, body.ff2 span.wrap textarea { width: 96%; } form div.select-list span.wrap select { background: #fff; border: 1px solid #999; } form div.file-upload { margin: 0 0 4px; } form fieldset { border-top: solid 1px #ddd; margin-top: 14px; padding: 30px 0 0; } div.wrap.actions div { margin-left: 130px; } /** AWESOME FORMS **/ form.awesome div.wrap { position: relative; } form.awesome label.overlay { position: absolute; z-index: 10; top: 0px; left: 0px; background: #fff; -webkit-border-radius: 3px; width: 100%; text-align: left; color: #c2c2c2; font-weight: normal; padding: 3px 4px; -webkit-transition: color 200ms linear; } form.awesome label.focus { color: #dddddd; } form.awesome label.hastext { color: #fff; -webkit-transition: color 0ms linear; } form.awesome input { background: none; z-index: 20; position: relative; width: 100%; } /* -------------------------------------------------- =Structure -------------------------------------------------- */ body { background-color: #0f2858; font: normal 62.5%/1 Helvetica, "Arial", Verdana, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.01); color: #333; } body.ff2 { opacity: .9999; } /* Make our type in FF look uber sexah */ body.mac { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; } body.inside { background: #fff; } div#wrapper { border-top: 5px solid #ffb515; } div#container, div.wrapper { position: relative; width: 940px; margin: 0 auto; clear: both; z-index: 10; } div#container.smaller { width: 820px; margin-top: 30px; } /* -------------------------------------------------- =Grid -------------------------------------------------- */ .column-row { margin: 0 0 18px -20px; } .column, .columns { float: left; display: inline; margin: 0 0 0 20px; position: relative; } .secondary.columns { padding: 1.8em 0 0; } .one { width: 40px; } .two { width: 100px; } .three { width: 160px; } .four { width: 220px; } .five { width: 280px; } .six { width: 340px; } .seven { width: 400px; } .eight { width: 460px; } .nine { width: 520px; } .ten { width: 580px; } .eleven { width: 640px; } .twelve { width: 700px; } .thirteen { width: 760px; } .fourteen { width: 820px; } .fifteen { width: 880px; } .sixteen { width: 940px; } .one-half { width: 420px; padding-right: 10px; } .one-third { width: 300px; } .two-thirds { width: 620px; } .eleven .column-row { width: 660px; } .twelve .column-row { width: 760px; } .offset-by-one-half { margin-left: 50px; } .offset-by-one { margin-left: 80px; } .offset-by-two { margin-left: 140px; } .offset-by-three { margin-left: 200px; } .offset-by-four { margin-left: 260px; } .offset-by-five { margin-left: 320px; } .offset-by-six { margin-left: 380px; } .offset-by-seven { margin-left: 440px; } .offset-by-eight { margin-left: 500px; } .offset-by-nine { margin-left: 560px; } .offset-by-ten { margin-left: 620px; } .offset-by-eleven { margin-left: 680px; } .offset-by-twelve { margin-left: 740px; } .offset-by-thirteen { margin-left: 800px; } .offset-by-fourteen { margin-left: 880px; } /* Clear the columns automagically, thanks @kneath */ .column-row:after, div.wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .column-row, * html div.wrap { height: 1%; } .column-row, div.wrap { display: inline-block; } .column-row, div.wrap { display: block; } /* IE6 Problems ---------- */ body.ie .column-row { width: 960px; } body.ie .eight .column-row { width: 480px; } body.ie .nine .column-row { width: 540px; } body.ie .ten .column-row { width: 600px; } body.ie .eleven .column-row { width: 660px; } body.ie .twelve .column-row { width: 720px; } body.ie .thirteen .column-row { width: 780px; } body.ie .fourteen .column-row { width: 840px; } body.ie .fifteen .column-row { width: 900px; } body.ie .column-row.last { margin-bottom: 0px; } /* -------------------------------------------------- =Custom Labels -------------------------------------------------- */ span.label, span.label:visited { background: #999; display: inline-block; padding: 3px 5px; color: #fff; font-size: 11px !important; font-weight: bold !important; text-decoration: none; text-transform: uppercase; line-height: 1 !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 0 1px transparent; } span.label:hover { text-decoration: none; color: #fff; } body.ff2 .label, body.ff2 .label:visited { -moz-border-radius: 0; } /* Label colors */ span.label.mozes_green { background: #cbf129; text-shadow: 0 0 1px #a5c941; color: #333; } span.label.green { background: #a5c941; text-shadow: 0 0 1px #a5c941; } span.label.blue { background: #2e7fbe; text-shadow: 0 0 1px #2e7fbe; } span.label.magenta { background: #a9014b; text-shadow: 0 0 1px #a9014b; } span.label.red { background: #e33100; text-shadow: 0 0 1px #e33100; } span.label.orange { background: #ed7900; text-shadow: 0 0 1px #ed7900; } span.label.yellow { background: #f3f125; text-shadow: 0 0 1px #f3f125; color: #333; } /* Other Basics */ span.label.black { background: #333; text-shadow: 0 0 1px #222; } span.label.white { background: #fff; padding: 0 3px 1px; border: 1px solid #ddd; color: #333; text-shadow: 0 0 1px #fff; }