/*------------------------------------------------------------ SHILLING - Default Style Sheet version: 3.2 compatibility: IE8, IE7, IE6, Firefox, Opera, Chrome, Safari author: Peter Garrett, Stuart Mullen email: peter@shilling.co.uk, stuart@shilling.co.uk copyright: 2009 Shilling Communication FIND: Control f ###0 - TOP ###1 - GLOBAL LAYOUT ###1A - SITE SPECIFIC LAYOUT ###2 - DEBUGGING, DEV AND TINYMCE ###3 - TEXT BLOCK ###3A - TEXT INLINE ###4 - LISTS ###5 - TABLES ###6 - IMAGES ###7 - FORMS ###8 - GLOSSARY ###9 - DOWNLOAD ------------------------------------------------------------*/ /*---------------------- ###1 GLOBAL LAYOUT ----------------------------*/ body { background: #FFF; color: #000000; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; text-align: left; } body.dev { margin-top: 50px; } #wrapper { font-size: 1em; min-height: 300px; height: auto !important; height: 300px; margin: 0; text-align: left; width: 990px; overflow-x: hidden; } #wrapper .top, #wrapper .content, #wrapper .bottom { display: none; height: 0; } #wrapper .clearer { background: none; clear: both; padding: 0; } #wrapper .accessibility { position: absolute; left: -10000px;} /*---------------------- ###1A SITE SPECIFIC LAYOUT --------------------*/ /* NOTE - WATCH OVERFLOW-X: HIDDEN ON WRAPPER */ /*---------------------- ###2 DEBUGGING, DEV AND TINYMCE ---------------*/ #tinymce { background: none; text-align: left; width: auto; font-size: 66%; } #development { position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background-color: #DDD; border-bottom: 1px #666 solid; } * html #development { position: absolute; } #development-ui { font-size: 1.1em; margin: 0.4em; min-height: 20px; height: auto !important; height: 20px; } #development-ui small.dev_link { background: transparent url('../images/icons/error.png') center left no-repeat; display: block; height: 16px; line-height: 1.6em; margin: 0.3em 2em 0.3em 2em; padding: 0 0 0 2.5em; } #development-ui small.dev_page_edit { background: transparent url('../images/icons/document_a4_edit.png') top left no-repeat; display: block; height: 16px; line-height: 1.6em; margin: 0.3em 2em 0.3em 2em; padding: 0 0 0 2.5em; } .debug { background-color: #EFEFEF; border: 2px solid #999999; font-size: 1.0em; height: auto; margin: 20px auto 20px auto; text-align: left; width: 980px; } .debug h2 { float: left; display: block; padding: 5px 0 0 10px; width: 890px; margin-bottom: 5px;} .debug a.toggle { display: block; float: left; height: 20px; margin: 10px 0 0 5px; text-indent: -10000px; width: 20px; } .debug a.up { background: transparent url('images/debug_toggle_up.png') top left no-repeat; } .debug a.down { background: transparent url('images/debug_toggle_down.png') top left no-repeat; } body div.debug pre { background-color: #000000; border: 1px solid #999999; color: #FFFFFF; margin: 0 10px 10px 10px; padding: 5px 5px 5px 5px; font-size: 1em; text-wrap: suppress; word-wrap: break-word; overflow-x: hidden; } /*---------------------- ###3 TEXT BLOCK -------------------------------*/ h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1 { font-size: 2.2em; line-height: 1.5em; margin-bottom: 1em; } h2 { font-size: 1.8em; line-height: 1.5em; margin-bottom: 1em; } h3 { font-size: 1.6em; line-height: 1.5em; margin-bottom: 1em; } h4 { font-size: 1.4em; line-height: 1.5em; margin-bottom: 1em; } h5 { font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em; } h6 { font-size: 1.1em; line-height: 1.5em; margin-bottom: 1em; } p { font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em; } br { clear: both; } address { font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em; font-style: italic; } blockquote { font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em; padding-left: 50px; padding-right: 50px; } pre { font-size: 1.2em; line-height: 1.5em; margin-bottom: 1em; font-family: "Courier New", Courier, monospace; } /*---------------------- ###3A TEXT INLINE -------------------------------*/ span { font-size: inherit; line-height: inherit; font-style: inherit; font-weight: inherit; } a { font-size: inherit; line-height: inherit; } a:link, a:visited { color: #666666; text-decoration: underline; } a:hover, a:active { color: #000000; text-decoration: underline; } strong, b { font-size: inherit; font-weight: bold; font-style: inherit; line-height: inherit; } em, i { font-size: inherit; font-weight: inherit; font-style: italic; line-height: inherit; } u { font-size: inherit; line-height: inherit; text-decoration: underline; } big { font-size: 1.6em; line-height: inherit; } small { font-size: 1em; line-height: inherit; } s, strike { font-size: inherit; font-weight: bold; line-height: inherit; text-decoration: line-through; } sub, sup { font-size: inherit; line-height: inherit; font-size: 0.9em; } /*---------------------- ###4 LISTS --------------------------------*/ dl, ul, ol { margin-bottom: 1em; font-size: 1.2em; padding-left: 2em; } ul { padding-left: 1.7em; } dl dl, ul ul, ol ol { margin-bottom: 0; font-size: 1em; } dl dt, dl dd, ul li, ol li { margin-top: 0.2em; line-height: 1.6em; list-style: none; vertical-align: middle; } ul li { list-style: disc; padding-left: 0.3em;} ol li { list-style: decimal; } dl dd { padding-left: 2em; } /*---------------------- ###5 TABLES -----------------------------------*/ table { border-collapse: collapse; border: none; font-size: 1.2em; line-height: 1.6em; margin: 0 auto 1em auto; width: 90%; } caption { display: none; } th, td { border: inherit; color: #000000; font-size: inherit; padding: 3px 3px 3px 3px; text-align: left; line-height: 1.5em;} th { font-weight: bold; text-aling: center; } td p, th p { font-size: 1em; line-height: 1.5em; margin-bottom: 0em; font-weight: inherit;} table.clean { border-collapse: collapse; border: none; background-color: inherit; } table.clean th { border: none; background-color: none; } table.clean td { border: none; background-color: none; } table.simple { border-collapse: collapse; border: 1px #000 solid; background-color: inherit; } table.simple th { border: 1px #000 solid; background-color: none; } table.simple td { border: 1px #000 solid; background-color: none; } table.header { border-collapse: collapse; border: 1px #000 solid; background-color: inherit; } table.header th { border: 1px #000 solid; background-color: #006666; color: #FFF; text-align: center; font-weight: bold; } table.header td { border: 1px #000 solid; background-color: none; } /*---------------------- ###6 IMAGES -----------------------------------*/ img { border: 0; } img.left { float: left; margin: 0 1em 1em 0; } img.right { float: right; margin: 0 0 1em 1em; } img.border { border: 2px #000 solid; } img.shadow_tp_rt { border-top: 2px #000 solid; border-bottom: 1px #AAA solid; border-right: 2px #000 solid; border-left: 1px #AAA solid; margin: 0.5em; } img.shadow_tp_lt { border-top: 2px #000 solid; border-bottom: 1px #AAA solid; border-left: 2px #000 solid; border-right: 1px #AAA solid; margin: 0.5em; } img.shadow_bt_rt { border-top: 1px #AAA solid; border-bottom: 2px #000 solid; border-right: 2px #000 solid; border-left: 1px #AAA solid; margin: 0.5em; } img.shadow_bt_lt { border-top: 1px #AAA solid; border-bottom: 2px #000 solid; border-left: 2px #000 solid; border-right: 1px #AAA solid; margin: 0.5em; } /*---------------------- ###7 FORMS ------------------------------------*/ /*BASIC FORM ELEMENTS*/ form { margin: 0 auto; width: 100%; } fieldset { border: 1px solid #999; margin: 0 auto 1em auto; padding: 0 1em; } legend { color: #999; font-size: 1.2em; font-weight: bold; line-height: 1.5em; margin: 1em 0; padding: 0 1em; } label { display: block; float: left; font-size: 1.2em; line-height: 1.5em; margin: 0 5px 0.5em 0; width: 100px; text-align: right; } select { border: 1px solid #999999; float: left; font-size: 1.2em; line-height: 1.5em; margin: 0 1em 1em 0; padding: 0.2em; width: 200px; height: 1.8em; } textarea { border: 1px solid #999999; float: left; font-size: 1.2em; height: 100px; width: 100%; line-height: 1.5em; margin: 0 1em 1em 0; padding: 0.2em; } input { float: left; font-size: 1.2em; line-height: 1.5em; margin: 0 0.5em 1em 0; border: 1px solid #999999; padding: 0.2em;} * html input { line-height: 1.2em; } *:first-child+html input { line-height: 1.2em; } /* IE UPDATES */ input.text { border: 1px solid #999999; width: 100px; } input.radio { height: 16px; position: relative; top: 2px; width: 16px; } input.checkbox { height: 16px; position: relative; top: 3px; width: 16px; position: relative; top: 1px; left: 0; border: none;} * html input.checkbox { top: -2px; } *:first-child+html input.checkbox { top: -2px; } /* IE UPDATES */ input.file { border: 1px solid #999999; padding: 0.2em; } input.submit, input.submit2 { background-color: #C71F39; color: #FFF; border: 1px #000 solid; float: right; line-height: 1.0em; margin: 0 0 1em 0; padding: 0.3em; text-align: center; cursor: pointer; } input.submit2 { float: left; margin: 0 0.5em 0 0;} input.submit:hover { background-color: #C71F39; color: #FFF; border: 1px #000 solid; } input.submit2:hover { background-color: #C71F39; color: #FFF; border: 1px #000 solid; } input.reset { background: #E9E9E9; border: 2px outset #E9E9E9; float: right; line-height: 1.0em; margin-bottom: 1em; padding: 0.3em; text-align: center; width: 75px; cursor: pointer; } input.reset:hover { background: #999; border: 2px inset #999; color: #FFF; } small.note { line-height: 2em; } /*FOCUS BORDER*/ select:focus, textarea:focus, input:focus, input.text:focus, input.radio:focus, input.checkbox:focus, input.file:focus, input.submit:focus, input.reset:focus { border: 1px #C71F39 dotted; outline: 1px #C71F39 dotted; } /*FORM MESSAGES*/ p.success { display: block; border: 1px solid #999; margin: 0 auto; padding: 10px 10px 10px 10px; color:#000; } div.error, p.error { display: block; border: 1px dashed #F00; color: #F00; margin: 0 auto; padding: 10px 10px 10px 10px; } .result { border-bottom: 1px solid #999999; margin: 0 auto; padding: 10px 10px 10px 10px; } /*LINK STYLES*/ a.help, a.reload, a.audio, a.words, a.loading { display: block; float: left; padding: 0.2em 1em 0 0; } /*FORM WIDTHS*/ .w10 { width: 10px !important; } .w20 { width: 20px !important; } .w40 { width: 40px !important; } .w60 { width: 60px !important; } .w80 { width: 80px !important; } .w100 { width: 100px !important; } .w120 { width: 120px !important; } .w140 { width: 140px !important; } .w150 { width: 150px !important; } .w200 { width: 200px !important; } .w250 { width: 250px !important; } .w300 { width: 300px !important; } .w350 { width: 350px !important; } .w400 { width: 400px !important; } .w450 { width: 450px !important; } .w500 { width: 500px !important; } /*FORM HEIGHTS*/ .h12 { height: 12px !important; } .h16 { height: 16px !important; } .h20 { height: 20px !important; } .h24 { height: 24px !important; } .h28 { height: 28px !important; } /*---------------------- ###8 GLOSSARY -----------------------*/ /*---------------------- ###9 DOWNLOAD -----------------------*/