/************************************************************************ Author: Ideawire [Mari Garza] BASED ON 4 COLUMN LAYOUT: COLUMNS=225PX GUTTER=12PX 2 Column: 462px 3 Column: 699 - 687 w/ 12 gutter space Listing Order: === universal ==== 1 - Universal (html, body) 2 - Structure/Layout 3 - Text Elements (p, headlines, links, lists ) 4 - Images 5 - Navigation (main, secondary) === special conditions ==== 6 - Banner Elements 7 - Main Content Elements 7 - Footer Elements 9 - Sidebar Elements === additional elements ==== 10 - Tables 11 - Forms 12 - Errors === plugins ==== === Colors==== Blue #000066 Light Blue #a5c0e6 exLightBlue #e4ecf7 -- used as background for highlight Royal blue: #2d5786 Red #800000 Dark Grey #333333 ************************************************************************/ /*********************************************************************** UNIVERSAL STYLES ************************************************************************/ /* ====== 1. Universal (html, body) ====== */ * { padding: 0px; margin: 0px;} html {} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; width:100%;} /* ====== 2. Structure/Layout ====== */ .printRemove, .page_nav, #banner, #sidebar, #navigation2, #contentSidebar {display: none;} #container {margin-left: auto; margin-right: auto; padding: 20px;} .navBG { background-image: url('../images/nav/nav_bg.gif'); background-repeat: repeat-x;} #bannerPrint {display: block; padding: 10px 0px; } #content { float: left; position: relative; margin: 0px 0px 0px 12px; font-size:1.1em; line-height: 1.6em;} #footer { clear: both; margin: 10px 0px 0px 0px; border-top: 1px solid #333333; padding: 10 0 0 0;} .Column_1 { width: 100%; margin: 10px 0px 0px 0px;} .Column_1_pad { float: left; position: relative; width: 225px; margin: 10px 0px 0px 12px;} /* ====== 3. Text Elements (p, headlines, links, lists) ====== */ p { font-size: 1em; margin-bottom: 15px;} hr { clear: both; height:0; border-top:1px solid #333333;} .source { font-size: 0.9em; font-style: italic; margin-bottom: 15px;} .floatClear { clear: both; } .center {text-align:center;} /* -------------- HEADLINES ------------- */ h1 { font-size: 2.2em; line-height: 1.2em; font-weight: normal; clear:both; color: #333333; padding: 0px 0px 3px 0px; margin: 0px 0px 10px 0px; border-bottom:1px dotted #aaaaaa; font-family: "Georgia", Georgia, MS Serif, New York, serif; } h1 span { margin: 0px 0px 10px 0px; } h2 { font-size: 1.4em; line-height: 1.2em; font-weight: bold; color: #000066; margin: 0px 0px 5px 0px;} h3 { font-size: 1.2em; line-height: 1.2em; font-weight: bold; color: #000000; margin: 0px 0px 5px 0px; font-family: "Georgia", Georgia, MS Serif, New York, serif; } /*--Specialty: News Type--*/ h4 {font-size: 1em; text-transform: uppercase; font-weight: normal; } /*--Specialty: News Source--*/ h5 { font-size: 0.9em; color:#666666; } /* ---- Field Header --- */ h6 { font-size: 1em; font-weight: bold;} .required { background-image: url('../images/elements/required.gif'); background-repeat: no-repeat; background-position: right top; padding: 0 17px 0 0;} th.required { background-image: url('../images/elements/requiredTH.gif');} /* -------------- SIDEBAR HEADLINES ------------- */ #contentSidebar h1, #contentSidebar h1 span { font-size: 1.4em; font-weight: bold;} #contentSidebar h2 {font-size: 1.1em;} .quoteArea { margin: 10px; font-size: 1.3em; line-height: 1.2em; font-weight: normal; color:#2d5786; } .quoteArea .name { font-weight: bold; color:#333333; font-size: .8em; text-align:right; } /* -------------- LINKS ------------- */ a { font-weight: bold; text-decoration: none; color: #800000; /* border-bottom: 1px solid #800000; */} a:hover { color: #000066; border-color: #000066;} a.image { border-bottom: none;} /* Removes border from linked images. A class="image" must accompany a tag */ /* -------------- LISTS ------------- */ #content ul, #content ol { margin: 0 0 15px 30px; } #contentSidebar li { padding: 0 0 10px 0px; } #contentSidebar ul, #contentSidebar ol { margin: 0 0 15px 15px; } #contentSidebar li { padding: 0 0 5px 0px; } #content ul li, #contentSidebar ul li {list-style: disc outside; } #content ol li, #contentSidebar ol li {list-style: decimal outside;} #content ul ul, #contentSidebar ul ul { margin-bottom: 0; } #series ul{ list-style: none; margin-left: 12px;} #series li{ list-style: none; float: left; width: 130px; height: 125px; } /* -----4 column grid---- */ #column4list ul {margin: 0px;} #column4list li { margin: 10px 10px 0 0; text-align: left; display: -moz-inline-box; display: inline-block; vertical-align: top; width: 150px; list-style-type: disc; list-style-position: outside; } /* ====== 4. Images ====== */ img { border-style: none;} .logo { } .imgleft { margin: 0px 10px 10px 0px; float: left;} .imgright { margin: 0px 0px 10px 10px; float: right;} .imgright2 {margin: 0px 0px 10px 10px; float: right; clear:right;} #banner .imgright { margin: 0px;} #imageCaption { margin: 0px 0px 10px 10px; float: right; max-width: 250px;} #imageCaption img { } #imageCaption p { font-size : 0.9em; margin: 15px 0px; font-weight: bold; } /* ====== 5. Navigation (main, secondary) ====== */ /* -------------- MAIN NAV ------------- */ /* -------------- SECONDARY NAV ------------- */ #navigation2 ul { list-style: none;} #navigation2 ul li { padding: 0px 0px 7px 0px;} #navigation2 ul li a { padding: 0px 5px 0px 15px; color: #000066; border-bottom: none; font-weight: bold;} #navigation2 ul li a:hover {padding: 0px 5px 0px 15px; color: #333333; border-bottom: none; font-weight: bold; background-image: url('../images/elements/sidebar_subnav_a_hover.gif'); background-repeat: no-repeat;} #navigation2 ul li li { padding: 5px 0px 0px 10px;} #navigation2 ul li li a {color: #000066} #navigation2 ul li li a:hover {color: #333333} /*********************************************************************** SPECIAL CONDITIONS ************************************************************************/ /* ====== 6. Banner Elements ====== */ #banner ul { list-style: none;} #banner ul li { float:left; display: inline; position: relative;} #banner li:hover ul { display: block; } #banner li ul { background-color: #333333; border: 2px solid #ffffff; position: absolute; top: 0; display: none; float:none; clear:left; } #banner ul li li {} #banner ul li li a { padding: 5px 10px; color: #a5c0e6; display: block; border-bottom: none;} #banner ul li li a:hover {padding: 5px 10px; color: #ffffff; background-color: #000066; border-bottom: none;} /* ====== 7. Main Content Elements ====== */ .sectionGray, .sectionWhite, .sectionBlue {margin: 10px 0px; padding: 10px 10px 5px 10px;} .sectionGray { background-color:#eeeeee; } .sectionWhite { } .sectionBlue { clear:left; float:left; width:687px; background-color: #a5c0e6} .navNext { text-align: right; clear: both;} /* -------------- Header / change text size ------------ */ #header_text_increase { } #header_text_increase img {float: left; margin: 0px 0px 12px 0px; } /* ====== 8. Footer Elements ====== */ /* -------------- Previous & Top of Page ------------- */ /* ====== 9. Sidebar Elements ====== */ .quoteArea { padding: 10px; font-size: 1.2em; line-height: 1.1em; font-weight: normal; } /*********************************************************************** ADDITIONAL ELEMENTS ************************************************************************/ /* ====== 10. Tables ====== */ /* use h6 for Field Headers */ .indent{padding-left: 20px;} th, td {text-align: left; vertical-align: top;} #banner table { width: 924px; } #banner table table { width: 924px; } #sidebar table { width: 201px; } #content table { width: 687px; border-bottom: 1px solid #aaaaaa; margin: 5 0 15px 0;} #content th, #content td {padding: 6px; } #content tr:hover {background-color:#EEEEEE;} #content th { font-size: 1.1em; font-weight: bold; color:#ffffff; background-color:#2d5786; } #content th a { color: #a5c0e6; border-color: #a5c0e6;} #content th a:hover { color: #ffffff; border-color: #ffffff;} #content td { font-size: 1em; border-top: 1px solid #aaaaaa;} .th2{ background-color: #eeeeee; font-weight: bold; color: #333333; } tr .bgGrey {background-color:#333333;} tr .bgWhite { background-color:#FFFFFF;} .txtBold { font-weight: bold; } /* ====== 11. Forms ====== */ form { } input { margin: 2px; vertical-align: top; } select { margin: 2px;} textarea { border: 1px #36393c solid; padding: 5px; vertical-align: top;} label {} /* ====== 12. Errors ====== */ #notice, .instructions { font-weight: bold; background-color:#ffffcc; color: #000000; padding: 5px; margin: 5px 0px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; } .alert { font-weight: bold; color: #990000; background-color:#ffffcc; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; padding:5px; margin: 15px 0px;} .highlight { background-color:#e4ecf7; border-bottom: 1px solid #333333; border-top: 1px solid #333333; padding: 5px;} /*********************************************************************** Admin specific ************************************************************************/ #content table table { width: inherit; border-bottom: 0px; margin: 0;} #content table table td { border-top: 0px;}