/* CSS Document */ /*-------------------------------------------------------------------------------------------------------- Get Started --------------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: center; } /* vertical-align: baseline; /*-------------------------------------------------------------------------------------------------------- Image Link Style --- Remove Border a img, :link img, :visited img {border: 0} --------------------------------------------------------------------------------------------------------*/ a img, :link img, :visited img {border: 1} /*-------------------------------------------------------------------------------------------------------- Image Float LEFT (Karl Code) --------------------------------------------------------------------------------------------------------*/ img.floatLeft { float: left; margin-right: 0px; padding: 0; } /*-------------------------------------------------------------------------------------------------------- Table Style --------------------------------------------------------------------------------------------------------*/ table {border-collapse: collapse; border-spacing: 0; line-height:1;} table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1.3em; font-family: inherit; text-align: left; vertical-align: center; } /*-------------------------------------------------------------------------------------------------------- Unordered List --- No Style (no discs) --------------------------------------------------------------------------------------------------------*/ ul {list-style: none} /*-------------------------------------------------------------------------------------------------------- Inline Quotation Marks (no paragraph break)...does not work in IE --------------------------------------------------------------------------------------------------------*/ q:before, q:after, /*-------------------------------------------------------------------------------------------------------- Blockquote Style -- surrounded by Quotation Marks --------------------------------------------------------------------------------------------------------*/ blockquote:before, blockquote:after {content: ""} /*-------------------------------------------------------------------------------------------------------- Element Styles --------------------------------------------------------------------------------------------------------*/ body {font-size:16px; font-family: "Segoe UI", "Trebuchet MS", Tahoma, Verdana, Helvetica, sans-serif; color:#282828; background:#FFFFFF url(../images/body-top-gray-fade.jpg) left top repeat-x} strong {font-weight:bold; } /*-------------------------------------------------------------------------------------------------------- Headers --------------------------------------------------------------------------------------------------------*/ h1 {padding:5px 0 5px 30px; margin-bottom:19px; font-size:2em; color:#fff; background:url(../images/example_logo.png) left 50% no-repeat} h2, h3, h4, h5, p, ul, ol, dl {margin:15px 0} h2, h3, h4, h5 {font-weight:bold} h2 {clear:both; font-size:1.75em; text-align:center; color:#ff9841; background:url(../images/headline_bg.jpg) left 50% no-repeat} h3 {font-size:1.25em; color:#5E5E5E} h4 {font-size:1.15em; color:gray} h5 {font-size:1em; font-style:italic; color:gray} a {color:#0080C0; text-decoration:none} a:hover {text-decoration:underline;} /* previous definition ... where it was underlined FIRST and then the underline went away when hovering: a {color:#0080C0; outline:none} a:hover {text-decoration:none} */ dt {margin:15px 0; font-weight:bold} dd {margin:5px 0 5px 15px} ol {margin-left:25px} /*####################### Layout Styles #######################*/ /*-------------------------------------------------------------------------------------------------------- Wrapper (Start) #wrapper {width:960px; padding:5px; margin:0 auto} --------------------------------------------------------------------------------------------------------*/ #wrapper {width:968px; padding:5px; margin:0 auto} /*-------------------------------------------------------------------------------------------------------- Header (Start) --------------------------------------------------------------------------------------------------------*/ #header {height:100px; padding:5px 0; margin-bottom:15px} /*-------------------------------------------------------------------------------------------------------- Menu --------------------------------------------------------------------------------------------------------*/ #navigation li {float:left; display:inline; width:191px; height:39px; margin-right:1px; font-size:1.0em; text-transform:lowercase;} #navigation li a {display:block; width:195px; height:36px; padding-top: 10px; text-align:center; text-decoration:none; color:#E3E3E3; background:url(../images/nav-tab-normal-01.png) left top no-repeat} #navigation li a:hover {color:#282828; background:url(../images/nav-tab-hover-01.png) left top no-repeat} /*-------------------------------------------------------------------------------------------------------- Content...div ID Content: p ul li --------------------------------------------------------------------------------------------------------*/ #content {clear:both; float:left} #content p {line-height:1.25em} #content ul {margin-left:25px; list-style-type:disc} #content li {margin:10px 0} /*-------------------------------------------------------------------------------------------------------- This was for the three Pics that were in a row...on the Home Page --------------------------------------------------------------------------------------------------------*/ /* #content #sub_navigation {float:left; width:100%; margin:0 0 15px 0} #content #sub_navigation li {float:left; display:inline; width:295px; margin:0 15px 15px 0; font-size:1.4em} #content #sub_navigation li a {display:block; padding:30px 0 30px 105px; color:#828181; text-decoration:none} #content #sub_navigation #find {background:url(../images/magnifying_glass.png) left 50% no-repeat} #content #sub_navigation #seo_reports {background:url(../images/chart_icon.png) left 50% no-repeat} #content #sub_navigation #security {background:url(../images/lock_icon.png) left 50% no-repeat} */ /*-------------------------------------------------------------------------------------------------------- These items place text on top of a picture. The pic has to be specified here. --------------------------------------------------------------------------------------------------------*/ div#textback { background-image: url(../images/background-text-h237-w960.jpg); background-repeat: no-repeat; height: 237px; width: 960px; padding: 10px 0 10px 0; } div#textbacktwo { position: relative; height: auto; width: auto; left: 25px; top: 0px; padding: 10px 10 10px 10; } /*-------------------------------------------------------------------------------------------------------- Text on Top of picture for 2-Columns Text (functions with above routines The width and the margin of the text columns are set so the text apprears... on top of a 960pix wide image nicely, with nice buffers around it. To call this, use the same approach as on the other "content'two_coumns" approach. --------------------------------------------------------------------------------------------------------*/ #content .two_columns_on_pic {float:left; display:inline; width:430px; margin-right:50px; padding-bottom:5px} /*-------------------------------------------------------------------------------------------------------- 1-Column Text (Start) --------------------------------------------------------------------------------------------------------*/ #content .one_column {float:left; display:inline; width:940px; margin-left:0px; margin-right:20px; padding-top:0px; padding-bottom:5px; padding-left:3px; line-height:1.9em} /*-------------------------------------------------------------------------------------------------------- 2-Columns Text (Start) --------------------------------------------------------------------------------------------------------*/ #content .two_columns {float:left; display:inline; width:443px; margin-left:0px; margin-right:37px; padding-top:0px; padding-bottom:5px; padding-left:3px; line-height:1.9em} /*-------------------------------------------------------------------------------------------------------- 4-Columns Text (Start) --------------------------------------------------------------------------------------------------------*/ #content .four_columns {float:left; display:inline; width:217px; margin-left:0px; margin-right:21px; padding-top:0px; padding-bottom:5px; padding-left:3px; line-height:1.9em} /*-------------------------------------------------------------------------------------------------------- Image float classes Apply HTML Code in this way: --------------------------------------------------------------------------------------------------------*/ .floatleft { float: left; margin: 0px 10px 10px 10px; } .floatright { float: right; margin: 10px 0px 10px 10px; } /*-------------------------------------------------------------------------------------------------------- Input for Contact Form --- Not used at this time (called "Form Styles") --------------------------------------------------------------------------------------------------------*/ input, textarea {padding:3px; font-size:.95em; font-family:Helvetica, Arial, Verdana, sans-serif; font-style:italic; color:gray} input {width:250px} textarea {width:350px; height:150px} #submit {width:100px; font-weight:bold; color:#000; font-style:normal} /*-------------------------------------------------------------------------------------------------------- Footer...previously the CoffeeCup Footer (Start) --- Not used at this time --------------------------------------------------------------------------------------------------------*/ #footer {clear:both; padding:50px 0 30px 0; font-size:.9em; font-style:italic; color:gray}