/* Reset - Resets all browsers to default styles ------------------------------------------------------------ */ html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,code,pre,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,p,input,select,textarea { font-size: 1em; font-weight: normal; font-style:normal; } table { border-collapse: collapse; border-spacing: 0; } caption,th { text-align: left; } ul,ol { list-style: none; } fieldset,img { border: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } /* Layout ------------------------------------------------------------ */ html { margin-bottom:1px; min-height:100%; } /* Always show scrollbar */ html, body { height: 100%; } /* Fixed Layout by default */ .wrap { position: relative; text-align: left; width: 860px; margin: 0 auto; } /* Fluid Layout */ body.fluid .wrap { min-width: 780px; max-width: 1260px; margin: 0 auto; width: auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } .header, .footer { width: 100%; margin: 0 auto; position: relative; z-index:2; } .footer { padding:.5em 0 0; } /* Sticky Footer ------------------------------------------------------------ */ body.stickyfooter .wrap { min-height: 100%; height: auto !important; height: 100%; } body.stickyfooter .onecol, body.stickyfooter .twocol, body.stickyfooter .twocollefta, body.stickyfooter .twocolleftb, body.stickyfooter .twocolrighta, body.stickyfooter .twocolrightb, body.stickyfooter .threecol, body.stickyfooter .threecola, body.stickyfooter .fourcol, body.stickyfooter .fivecol, body.stickyfooter .sixcol { padding-bottom:0px; } body.stickyfooter .footer { height: 66px; margin-top: -66px ; /* margin same as height */ } /* Grid - works in all major browsers even ie6... Two column example
Three column example
------------------------------------------------------------ */ .onecol, .twocol, .twocollefta, .twocolleftb, .twocolrighta, .twocolrightb, .threecol, .threecola, .fourcol, .fivecol, .sixcol { width: 100%; margin:0 auto 0px auto; display:inline-block; position:relative; } .column { float: left; } .column.first, .column.last { margin-left: 0 !important; } .column.last { float: right; } /* One Column ----------------------------- */ .onecol { margin: 0 2%; width: 96%; } /* Two Column ----------------------------- */ /* Even */ .twocol .column { width: 49%; } .column .twocol .column, .column .twocol .column.first, .column .twocol .column.last { width: 48%; } /* Smaller Left - Wider Right */ .twocollefta .column.first { width: 28%; } .twocollefta .column.last { width: 70%; } /* Small Left - Wide Right */ .twocolleftb .column.first { width: 230px; } .twocolleftb .column.last { width: 550px; } /* Wider Left - Small Right */ .twocolrighta .column.first { width: 74%; } .twocolrighta .column.last { width: 24%; } /* Small Left - Wide Right - fit nested .twocol for a total of 3 columns */ .twocolrightb .column.first { width: 65%; } .twocolrightb .column.last { width: 33%; } /* Three Column ----------------------------- */ /* Even */ .threecol .column, .column .threecol .column, .column.first .threecol .column, .column.last .threecol .column { width: 32%; margin-right: 0 } /* Small Right/Left - Wide Center */ .threecola .column, .column .threecola .column, .column.first .threecola .column, .column.last .threecola .column { width: 55.5%; } .threecola .column.first, .threecola .column.last, .column .threecola .column.first, .column .threecola .column.last { width: 20%; } /* Four Column */ .fourcol .column, .column .fourcol .column, .column.first fourcol .column, .column.last .fourcol .column { width: 23%; margin-left: 3%; } /* Five Column */ .fivecol .column, .column .fivecol .column, .column.first .fivecol .column, .column.last .fivecol .column { width: 18.5%; } /* Six Column */ .sixcol .column, .column .sixcol .column, .column.first .sixcol .column, .column.last .sixcol .column { width: 15.1%; } /* Clearing Floats */ .header:after, .footer:after, .column:after, .onecol:after, .twocol:after, .twocollefta:after, .twocolleftb:after, .twocolrighta:after, .twocolrightb:after, .threecol:after, .threecola:after, .fourcol:after, .fivecol:after, .sixcol:after, .clearfix:after, p:after, div.gallery:after, .gallery img:after, .mid:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Typography - - Serif & Sans Serif - Links - Typographic Baseline is set - Image aligning ------------------------------------------------------------ */ body { font: 13px/18px "Trebuchet MS", Arial, Verdana, sans-serif; } /* Serif Fonts "" */ .serif { font: 12px/18px Georgia, "lucida bright", "times new roman", serif; } /* Links */ a { color: #173e79; text-decoration: none; } a:hover, a:focus { color: #4480db; text-decoration: underline; } a:active { color: #105CB6; } a.left { float: left; } a.right { float: right; } /* Headers */ h1 { font-size: 24px; line-height: 36px; margin-bottom: 18px; } h2 { font-size: 18px; line-height: 18px; margin-bottom: 18px; } h3 { font-size: 12px; line-height: 18px; font-weight: bold; } h4 { font-size: 12px; line-height: 18px; font-weight: bold; } h5 { font-size: 11px; line-height: 18px; font-weight: bold; } h6 { font-size: 10px; line-height: 18px; font-weight: bold; } h1,h2,h3,h4,h5,h6 { color: #333; } /* Text Alignment */ p { margin-bottom: 10px; } p.left { text-align: left; } p.center, div.center { text-align: center; } p.right, div.right { text-align: right; } p.justify { text-align: justify; } /* Images ------------------------------------------------------------ */ img.left { float: left; } img.center { margin: 0 auto; display: block; } img.right { float: right; } p img.left { margin: 0 18px 18px 0; border:2px solid #DADADA; } p img.center { margin-bottom: 18px; } p img.right { margin: 0 0 18px 18px; } /* IE6 Transparent .png */ /* img, div { behavior: url(css/global/iepngfix.htc); } */ /* IE6 css dropdown menu fix */ body { behavior:url(css/global/csshover.htc); } /* Image Gallery ------------------------------------------------------------ */ /*
OR */ div.gallery { margin-bottom:18px; } div.gallery img, img.gallery { border-top:1px solid #f8f8f8; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #f8f8f8; padding:5px; margin:5px; } div.gallery img { float:left; } div.gallery img:hover { opacity: 0.7; filter:alpha(opacity=70); /* IE */ } /* Image Gallery ------------------------------------------------------------ */ /*
OR */ div.gallery { margin-bottom:18px; } div.gallery img, img.gallery { border-top:1px solid #f8f8f8; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #f8f8f8; padding:5px; margin:5px; } div.gallery img { float:left; } div.gallery img:hover { opacity: 0.7; filter:alpha(opacity=70); /* IE */ } /* Misc ------------------------------------------------------------ */ em, i { font-style: italic; } strong, b { font-weight: bold; } hr { background-color: #ccc; border: 0px; color: #ccc; height: 1px; margin: 17px 0 18px 0; } pre, code { margin-bottom: 18px; background: #e6e6e6; white-space: pre; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } address { margin-bottom: 18px; font-style: italic; } del { color: #666; } dfn { font-weight: bold; } blockquote { margin: 8px; padding: 9px; color: #666; background: #f9f9f9; border: 1px solid #ddd; font-style: italic; quotes: "\201C" "\201D"; } blockquote:before { content: open-quote; font-weight: bold; } blockquote:after { content: close-quote; font-weight: bold; } .clear { clear: both; } .zero { margin:0 !important; padding:0 !important; } /* Sometimes you dont need the margin/padding set by the elements css... */ /* Transparency ------------------------------------------------------------ */ .opacity { opacity: 0.7; filter:alpha(opacity=70); /* IE */ } /* Lists ------------------------------------------------------------ */ /* Ordered & Unordered */ ul, ol { } ol { list-style-type: decimal; } ul.disc, ul.square { margin-bottom: 18px; margin-left: 2em; list-style-position: outside; } ul.disc { list-style-type: disc; } ul.square { list-style-type:square; } /* Inline */ ul.inline li, ol.inline li { display: inline; margin: 0 1em; } /* Definition Lists */ dl { margin-bottom: 18px; } dt { font-weight: bold; margin-bottom: 18px; } dd { } /* Tables - Styles for tabular data, breaks tables used for layout ------------------------------------------------------------ */ table { margin-bottom: 18px; width:100%; } th { font-weight: bold; } tr { } td { text-align:left; } td img { margin: 0 auto; display: block; } tfoot { font-style: italic; } tr.zebra { background-color:#EDF3F9; } /* Zebra table rows */ /* Print - Basic print styles. Removes text/link color ------------------------------------------------------------ */ @media print { body, .wrap { color: #000 !important; } a, a:link, a:visited { color: #000 !important; text-decoration: none !important; } }