/* __include #BASIC RESET { ------------------------------------------------------------------------------------------------------------------------*/ * { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } caption, th, td { text-align: left; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } ul { list-style-image: none; list-style-type: none; } /* } #GLOBAL LAYOUT CLASSES { ------------------------------------------------------------------------------------------------------------------------*/ .clear { clear: both; font-size:0px; line-height:0px; height:0px; } .clear_left { clear: left; font-size:0px; line-height:0px; height:0px; } .clear_right { clear: right; font-size:0px; line-height:0px; height:0px; } .nobreak { white-space: nowrap; } .align_center { text-align: center; } .align_right { text-align: right; } .align_left { text-align: left; } .align_top { vertical-align: top; } .align_middle { vertical-align: middle; } .align_bottom { vertical-align: bottom; } .float_left { float: left; } .float_right { float: right; } /* } #GRID (very poorly implemented) { ------------------------------------------------------------------------------------------------------------------------*/ .indent1 { margin-left: 10px; } .indent2 { margin-left: 20px; } .indent3 { margin-left: 30px; } .indent4 { margin-left: 40px; } .indent10 { margin-left: 100px; } .indent20 { margin-left: 200px; } .indent30 { margin-left: 300px; } .indent34 { margin-left: 400px; } .marginTop0 { margin-top: 0px; } .marginTop1 { margin-top: 10px; } .marginTop2 { margin-top: 20px; } .marginTop3 { margin-top: 30px; } .marginTop4 { margin-top: 40px; } .marginTop10 { margin-top: 100px; } .marginTop20 { margin-top: 200px; } .marginTop30 { margin-top: 300px; } .marginTop40 { margin-top: 400px; } /* } #FONTS, COLORS, TEXT-DECORATION, MARGINS ETC. { ------------------------------------------------------------------------------------------------------------------------*/ * { font-family: Helvetica, Arial, sans-serif; } address, input, label, li, option, p, pre, select, td, textarea, th, caption { font-size: 12px; } input, select { font-size: 10px; } p, address { margin-bottom: 10px; font-size: 12px; line-height: 17.5px; } pre { margin-bottom: 5px; font-family: "Courier New", monospace; font-size: 11px; } .small { font-size: 0.8em; } h1 { font-size: 29px; margin-top: 20px; margin-bottom: 30px; } h2 { font-size: 13px; margin-top: 10px; margin-bottom: 20px; } h3 { font-size: 10px; margin-top: 5px; margin-bottom: 20px; } h4 { font-size: 11px; } h5 { font-size: 11px; } h6 { font-size: 11px; } hr { height: 1px; border-bottom: 1px solid #cdcdcd; width: 100%; margin: 10px 0;} em { color: #ec6b22; } strong, b { font-weight: bold;} a:link { text-decoration: underline; color: #000;} a:visited { text-decoration: underline; color: #000; } a:hover, a:active { text-decoration: none; } a.arrow, a.arrow:link, a.arrow:active, a.arrow:visited, a.arrow:hover { padding-left: 15px; background: transparent url(../images/arrow_black.gif) 0 -3px no-repeat; font-weight: normal; color: inherit; } ul { margin: 0 0 2.5em 20px; list-style-type: circle; list-style-position: outside; } ol { list-style-type: decimal; list-style-position: inside; padding: 2px 0; margin-bottom: 5px; } ol li { margin-left: 10px; } /* } #BOX-MODEL { ------------------------------------------------------------------------------------------------------------------------*/ /* #container { width: 1015px; margin: 0 auto; } #header { height: 320px; position: relative; } #headerImage { position: absolute; top: 18px; } #colors { position: absolute; right: 0; top: 18px; } #subnav { position: absolute; top: 293px; width: 999px; background-color: #000; } #column-one { float: left; width: 210px; margin-top: 20px; } #nav { margin-top: 47px; } #column-two { margin: 0px 0px 0px 227px; margin-top: 20px; } #column-two-inner { float: left; width: 100%; } #column-two-inner-inner { margin: 0px 441px 0px 0px; } #column-three { float: left; height: 20em; width: 305px; margin: 0px 0px 0px -321px; } #footer { height: 5em; } .clear-both { clear: both; font-size: 0px; line-height: 0px; height: 0px; } */ /* } #NAVIGATION { ------------------------------------------------------------------------------------------------------------------------*/ /* #nav ul { margin: 0; padding: 0; } #nav ul li { background-image: none; margin: 0 0 1px 0; padding: 2px 0; } #nav ul li a { display: block; text-decoration: none; color: #707173; text-transform: uppercase; padding: 1px 3px 0px 23px; line-height: 14px; letter-spacing: 0.5px; margin-right: 25px; } ul.linklist { float: right; margin: 0 4px 0 0; padding: 0; } ul.linklist li { background-image: none; margin: 0; padding: 8px 0; display: block; float: left; height: 8px; font-size: 10px; } ul.linklist li a { text-decoration: none; text-transform: uppercase; font-weight: normal; } ul.linklist li .pipe { margin: 0 2.5px; color: #fff; } #subnav ul.linklist li a { color: #fff; } #subnav ul.linklist li a.active, #subnav ul.linklist li a:hover { border-bottom: 2px solid #fff; text-decoration: none; } #footer ul.linklist li a, #footer ul.linklist li .pipe { color: #707173; } #colorNavigation { position: absolute; right: -2px; top: 18px; height: 108px; width: 18px; background: transparent url(../images/colors.gif) 0 0 no-repeat; } #colorNavigation a { display: block; height: 16px; width: 16px; text-indent: -9000px; } */ /* } #LAYOUT BOXES { ------------------------------------------------------------------------------------------------------------------------*/ .boxHalfLeft { width: 47.5%; float: left; } .boxHalfRight { width: 47.5%; float: right; } .boxThreeForths { width: 75%; } .boxHalf { width: 50%; } .boxOneThird { width: 30%; } .boxTwoThirds { width: 60%; } /* #TABLES --------------------------------------------------------------------------------------------------------------------------------------- */ table { width: 100%; border-top: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; margin: 10px auto; } caption { margin-top: 10px; caption-side:top; font-weight: bold; } td { border-left: 1px solid #cdcdcd; padding: .3em 1em; } th { border-bottom: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; padding: .3em 1em; } th.column1 { background-color: #eee; border-bottom: 1px solid #fff; text-align: center; } thead th { text-align: center; color: #004a7f; font-size: 13px; border-bottom-width: 2px; padding-top: 5px; padding-bottom: 5px;} tfoot th { text-align:center; font-size: 12px; color: #004a7f; padding-top: 12px; padding-bottom: 12px; } tfoot th { border-top: 1px solid #cdcdcd; } tfoot td { border-bottom: 1px solid #cdcdcd; } table.light { margin: 10px 0; } table.light th.column1, table.light td { border-bottom: 1px solid #cdcdcd; } table.semantic { margin: 10px 0; width: auto; border: none; } table.semantic th, table.semantic td { padding: 0; background: none; border: none; font-size: 10px; border: none; padding: 0; } /* #FORMS ---------------------------------------------------------------------------------------------------------------------------------------- */ input.image { border: none; background-color: #412d1f; } a.button, span.button { border: 1px solid #dbdbdb; background-color: #dbdbdb; background-color: #fff; color: #707173; padding: 2px 5px; text-decoration: none; font-size: 10px; } span.button { color: #dbdbdb; } /* simulate disabled button for preview of offer */ a.button.float_right, span.button.float_right { margin-left: 5px; } a.button.float_left, span.button.float_left { margin-right: 5px; } textarea { border-top: 2px solid #b5b5b5; border-left: 2px solid #b5b5b5; border-bottom: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; background-color: #fff; color: #515553; padding: 1px 2px; margin-bottom: 10px; width: 400px; height: 100px; } span.mceEditor { margin-bottom: 10px; display: block; } input { border-top: 2px solid #b5b5b5; border-left: 2px solid #b5b5b5; border-bottom: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; background-color: #fff; color: #707173; padding: 3px 2px; margin-right: 2px; height: 11px; } input.submit { background-color: #D8D8D8 ; border: 1px solid #6E6E6E; height: 20px; } input.submit.large { width: 130px; } input.submit[disabled] { color: #dbdbdb; } input.file { height: auto; } label.file { padding-top: 6px; } p.file { padding-top: 6px; padding-left: 10px; } input.submit.float_right { margin-left: 5px; } /* this is to prevent that multiple floated buttons get squished */ select { border-top: 2px solid #b5b5b5; border-left: 2px solid #b5b5b5; border-bottom: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; background-color: #fff; color: #707173; padding: 1px 2px; margin-right: 2px; } label { display: block; } input { margin: 5px 0 10px 0; } select { margin: 5px 0 10px 0; } input.nl { display: block; } input[disabled] { background-color: #cdcdcd; } select { margin-bottom: 10px; } select.nl { display: block; } input.checkbox_vertical { margin: 0; float: left; clear: both; border: none; } label.checkbox_vertical { line-height: 15px; margin-left: 20px; padding-bottom: 5px; } input.checkbox_horizontal { margin: 0; float: left; border: none; } label.checkbox_horizontal { margin: 0 15px 0 5px; float: left;} input.checkbox { margin: 0; padding: 0; height: auto; } input.radio_vertical { margin: 0; float: left; clear: both; border: none; } label.radio_vertical { line-height: 15px; margin-left: 20px; padding-bottom: 10px; } input.radio_horizontal { margin: 0; float: left; border: none; } label.radio_horizontal { margin: 0 15px 0 5px; float: left; } label.error, input.error, textarea.error { color: #ff0000; } input.error, textarea.error { margin-bottom: 0px; border-top-color: #ff0000; border-left-color: #ff0000; border-right-color: #ff0000; border-bottom-color: #ff0000; } label.error { margin-bottom: 5px; } select.error { margin-bottom: 0px; } label.left { float: left; width: 85px; padding: 3px 15px 0 0; line-height: 15px; } label.long { width: 150px; } /* DIMENSIONS */ input.extra_short { width: 50px; } input.short { width: 100px; } input.short_medium { width: 150px; } input.medium { width: 200px; } input.long { width: 300px; } input.extra_long { width: 400px; } select.extra_short { width: 57px; } select.short { width: 107px; } select.medium { width: 207px; } select.long { width: 307px; } select.extra_long { width: 407px; } textarea.full { width: 99%; } textarea.heigh { height: 500px; } textarea.mediumHeigh { height: 250px; } /* COMBINED INPUT FIELDS */ .combLeft { margin-right: 5px; } input.combMediumShorter { width: 65px; } input.combMediumLonger { width: 123px; } input.combLongShorter { width: 80px; } input.combLongLonger { width: 208px; } input.combExtraLongShorter { width: 100px; } input.combExtraLongLonger { width: 288px; } select.combShortShorter { width: 44px; } select.combShortLonger { width: 60px; } select.combMediumShorter { width: 72px; } select.combMediumLonger { width: 130px; } /* } #ERROR AND NOTICES { ------------------------------------------------------------------------------------------------------------------------*/ #noscript { margin-top: 5px; padding: 10px; background-color: red; } #errorMessage { margin-top: 5px; padding: 10px; margin-right: 15px; } #errorMessage.error { background-color: #a4ca1d; } #errorMessage.notice { background-color: #eeeeee; } #errorMessage h1 { margin: 0 0 10px 0; text-transform: none; } #errorMessage p { font-size: 12px; margin-bottom: 5px; } .messageHeadlineOnly h2 { margin: 0; text-transform: none; } p.error, em.error { color: #a4ca1d; font-size: 12px; } p.error { margin: 5px 0; }