/* ============================================================================== ** ** AMEND BASE CSS ** ** SCOPE: GLOBAL ** REVISION: 0.1 ** DATE: 05/26/10 ** AUTHORS: DUNCAN MCALESTER (DUNCAN@LAYER-51.COM) ** USAGE: This is a base CSS for all Amend based sites. Specific design styles should be applied in their own style sheets ** NOTES: Includes a modified HTML5 boilerplate CSS http://html5boilerplate.com/ ** REVISION HISTORY ------------------------------------------------------------------------------ 12/30/10: Replaced the meyer reset with the HTML5 boilerplate - DM ============================================================================== */ /* style.css contains a reset, font normalization and some base styles. credit is left where credit is due. additionally, much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ /* NOTE: the 'Futura W01 Light Condensed' font seems to have disappeared from fonts.com; replaced with 'FuturaBTW01-LightConden' */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} article,aside,figure,footer,header,hgroup,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; text-align:left; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ /* * minimal base styles */ /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ body, select, input, textarea { color:#444; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-smooth: auto; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:active { outline: none; } a:focus { outline: none; } a, a:link { text-decoration: none; } a:hover {text-decoration:underline; } ul { margin-left:30px; margin-bottom: 2em; } ol { margin-left:30px; list-style-type: decimal; } small { font-size:85%; } strong, th { font-weight: bold; } td, td img { vertical-align:top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; width:20px; height:16px; float:left; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; } /* always force a scrollbar in non-IE */ html { overflow-y: scroll; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* * Non-semantic helper classes */ /* for image replacement */ .ir { display:block; text-indent:-999px; overflow:hidden; background-repeat: none; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden, #page-tools legend { display:none; visibility:hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */ .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* ============================================================================== ** ** FLUID ** ============================================================================== */ .fluid #container { height: 100%; width: 92%; margin: auto 4%; } .fluid .col100 { width: 98%; } .fluid .col75 { width: 73.5%; } .fluid .col66 { width: 65.1%; } .fluid .col50 { width: 48.5%; } .fluid .col33 { width: 31.8%; } .fluid .col30 { width: 28.5%; } .fluid .col25 { width: 23.5%; } .fluid .col20 { width: 18.5%; } .fluid .col15 { width: 13.5%; } .fluid .col10 { width: 8.5%; } .fluid .col5 { width: 3.5%; } .fluid .col100,.fluid .col75,.fluid .col66,.fluid .col50,.fluid .col33,.fluid .col30,.fluid .col25,.fluid .col20,.fluid .col15,.fluid .col10,.fluid .col5 { margin-left: 0.625%; margin-right: 0.625%; display: block; float: left; } /* ============================================================================== ** ** FIXED ** ============================================================================== */ .fixed #container { height: 100%; width: 960px; margin: auto; } .fixed .col100 { width: 940px; } .fixed .col75 { width: 700px; } .fixed .col70 { width: 672px; } .fixed .col66 { width: 613px; } .fixed .col50 { width: 460px; } .fixed .col33 { width: 296px; } .fixed .col30 { width: 268px; } .fixed .col25 { width: 220px; } .fixed .col20 { width: 172px; } .fixed .col15 { width: 124px; } .fixed .col10 { width: 76px; } .fixed .col5 { width: 38px; } .fixed .col100,.fixed .col75,.fixed .col66,.fixed .col50,.fixed .col33,.fixed .col30,.fixed .col25,.fixed .col20,.fixed .col15,.fixed .col10,.fixed .col5 { margin-left: 10px; margin-right: 10px; display: block; float: left; } .first-child { margin-left: 0 !important; } .last-child { margin-right: 0 !important; } /* ============================================================================== ** ** NOTES ** ** yellow = #ecac00; ** red = #9b1c34; ** ============================================================================== */ /* ============================================================================== ** ** DEFAULT HTML STYLES ** ============================================================================== */ html { -webkit-background-size: 100% auto; -o-background-size: 100% auto; -khtml-background-size: 100% auto; -moz-background-size: 100% auto; /* Gecko 1.9.2 (Firefox 3.6) */ background-size: 100% auto; font-family: Verdana, Arial, sans-serif; font-size: 11px; } h1, h2, h3, #main-nav li ul li a { font-family:"FuturaBTW01-LightConden"; font-weight: lighter; } h1 { font-size: 2.4em; margin-bottom: .2em; line-height:1.2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } a, a:link { color: #9b1c34; } q:before, blockquote:before { content: '“'; } q:after, blockquote:after { content: '”'; } form {} form label { font-weight: bold; display: block; } input, select, textarea { width: 97%; height: 24px; /*display: block;*/ margin-bottom: 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .ie7 input, .ie7 select { width: 96%; height: 10px; } .ie8 input, .ie8 select { height: 21px; width: 96%; } .ie7 select, .ie8 select { width: 95%; } fieldset { margin-bottom: 15px; overflow: auto; } legend { display: none; } input, select, textarea{ font-weight: normal; font-size: 14px; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); padding: 6px 5px 5px 10px; border: 1px rgba(97,14,26,.4) solid; } input[type="radio"] { clear: left; float: left; height: 15px; width: 15px; margin: 4px 10px auto 1px; } td.date {width:40px;} /* ============================================================================== ** ** STRUCTURAL ELEMENTS ** This sections should be used to define and/or override the structure of the ** site. Everything from number of columns, to the "pods" to the content within ** pods, button styles, etc… Along with the Default HTML Styles this section ** should allow you to create the basic look & feel of the site excluding the ** home page. ** ============================================================================== */ /* override default column widths */ .fixed .col66 { width: 604px; margin-left: 0; margin-right: 40px; } .fixed .col33 { width: 286px; margin-left: 20px; } .fixed .col33, .fixed .col66 { display: block; float: left; } /* ** CONTENT ** ** DESCRIPTION: ** USAGE: ** NOTES: ** */ #content { position: relative; background-color: #fff; padding: 35px 15px 10px; font-size: 1.2em; line-height: 1.8em; overflow: auto; } /* article is typically the main content */ #content div, #content article { margin-left: 0 !important; /*clear: left;*/ } #content h1 { border-bottom: 1px #DDDDDD solid; padding-bottom: .15em; } #content p { margin-bottom: 1em; } #content article aside { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.6em; width: 33%; margin: 15px; display: block; } #content aside.left { float: left; } #content aside.right { float: right; } #content aside cite { font-family: Verdana, "Helvetica Neue", Arial, sans-serif; font-style: normal; font-size: .7em; display: block; } #content aside cite:before { content: "– "; } div.share { display: block; float: right; font-size: 0.9em; padding: 1.3em 0 0; width: auto; } div.press-share { display: block; float: right; font-size: 0.9em; width: auto; } div.share a { color:#747474; padding:0 10px 0 18px; } div.press-share a { color:#747474; padding:0 10px 0 18px; } div.share a#print { background: url("../images/icons/print.png") no-repeat scroll 0 -1px transparent; margin-left:.5em; } div.share a#email { background: url("../images/icons/email.png") no-repeat scroll 0 -2px transparent; } div.share a#tools-share { background: url("../images/icons/share.png") no-repeat scroll 0 -1px transparent; } div.share a#print:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/print-over.png") no-repeat scroll 0 -1px transparent; } div.share a#email:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/email-over.png") no-repeat scroll 0 -2px transparent; } div.share a#tools-share:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/share-over.png") no-repeat scroll 0 -1px transparent; } div.press-share a#print { background: url("../images/icons/print.png") no-repeat scroll 0 -1px transparent; margin-left:.5em; } div.press-share a#email { background: url("../images/icons/email.png") no-repeat scroll 0 -2px transparent; } div.press-share a#tools-share { background: url("../images/icons/share.png") no-repeat scroll 0 -2px transparent; } div.press-share a#print:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/print-over.png") no-repeat scroll 0 -1px transparent; } div.press-share a#email:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/email-over.png") no-repeat scroll 0 -2px transparent; } div.press-share a#tools-share:hover { color:#9B1C34; text-decoration:none; background: url("../images/icons/share-over.png") no-repeat scroll 0 -2px transparent; } /* ** ASIDES ** ** DESCRIPTION: replaces the pods architecture. usually found on the right hand side of an interior page ** USAGE: asides need no special div or id associated with them in general, rather generice classes to define their internal structure. .list: for standard bulleted lists. good for facts, related topics etc… .defninitions: used like an artificial dl when dl isn't semantically correct .files: used for a list of files .links: used for a list of links // note this may be redundant ** NOTES: asides may also exist within the body or main content, but should be used for content that is directly related to said content e.g. pull quotes, figures images, etc… ** */ #asides { font-size: .9em; line-height: 1.7em; margin-top: 4px; margin-right: 0 !important; } #asides aside { margin-bottom: 3.5em !important; } #asides h1 { border-bottom: 1px #999 solid; font-size: 2em; padding-bottom: .15em; margin: auto auto .4em auto; } #asides h2 { font-size: 1.7em; } #asides aside hgroup { position: relative; } #asides aside hgroup a { position: absolute; top: 2px; right: 0; } #asides ul { list-style: none; margin: 0; } /* ** ** ** */ .definitions {} .definitions li { margin-bottom: 1.5em; } /* ** ** ** */ .list ul { margin-left: 15px !important; } .list ul li { list-style: disc outside; } #press_nav_list{ margin: 7px 0 30px; } #press_nav_list h2{ margin-bottom: 10px; } /* ** ** ** */ .office-locations li { margin-bottom: 6em; } .office-locations .org { font-size: 1.1em; font-weight: bold; } /* ** ** ** */ #asides form { margin: 0 !important; } #asides input, #asides select { font-weight: normal; font-size: 1.2em; width: 65%; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); padding: 3px 5px 2px 10px; border: 1px rgba(97,14,26,.4) solid; } .ie7 #asides input, .ie8 #asides input { width: 65%; } #asides input[type="radio"], #asides select[type="radio"] { font-weight: normal; font-size: 1.2em; width: auto; -webkit-box-shadow: 0; -moz-box-shadow: 0; box-shadow: 0; padding: 0; border: none; } .ie7 #asides input[type="radio"], .ie8 #asides input[type="radio"] { width:auto; } #asides form div#radio_container div { width:50%; float:left; } #asides div#search-thomas-pod { float:left; padding-bottom:20px; } #asides form label { font-weight: bold; display: block; } #asides form .button { float: none; width: auto; height: 30px; padding: 4px 10px 8px 10px; font-size: 1.6em; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ie7 #asides form .button { font-size: 1.2em; padding: 3px 5px 7px 5px; height: 20px; } /* ** ** ** */ .inline-search {} .inline-search label { clear: left; } .inline-search input { margin-right: 10px; float: left; } .inline-search select { height: 30px; width: 96px !important; float: left; margin-right: 10px; } .inline-search select#inline-search-region { height: 30px; width: 203px !important; float: left; margin-right: 10px; } .inline-search button { border: 1px #f00 solid; padding: 4px 15px 16px 15px !important; } div#at16p input, select, textarea { -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); box-shadow: inset 2px 2px 2px rgba(0,0,0,.2); height:36px; width:99%; padding: 0px 0px 0px 0px; } /* ** ** ** */ .listing table { display: table; width: 100%;} .listing td { line-height: 1.4em; padding: 15px 15px 15px 5px; border-bottom: 1px #f0f0f0 solid; } .listing tr:nth-child(even) { background-color: #f9f9f9; } .listing h2 { display: block; padding: 10px 10px 8px 10px; margin-top: 20px; height: 20px; font-family:"FuturaBTW01-LightConden"; font-size: 1.3em; color: #444; background-color: #d0d0d0; } .pagination { position: relative; margin: 15px auto; padding: 5px 15px; font-size: .9em; color: #fff; background-color: #444; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, #444444),color-stop(1, #727272)); background: -moz-linear-gradient(center bottom, #444444 0%, #727272 100%); -pie-background: linear-gradient(#444444, #727272); } .pagination a { color: #fff; } .pagination select { /*display: inline;*/ position: relative; width: auto; border: none; top: 4px; left: 5px; font-size: .9em; padding:10px; margin-right:5px;} .ie7 .pagination select { height: 24px; margin-top: 7px; padding: 0 0 0 10px; } .ie8 .pagination select { height: 24px; padding:0 0 0 10px; border:1px solid #ccc; } .listing-jump { } .ie8 .listing-jump { margin-top: 5px; } .listing-increment { position: absolute; top: 15px; right:10px; display: block;} .ie7 .listing-increment, .ie8 .listing-increment { top: 14px; right: 14px; } .faq {} .faq dt { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.3em; } .faq dd { margin: 0 1em 2em 1em; } /* ** ** NOTE: the rounded bottom for the sub-nav elements are contained within the declaration for ** the subnav ul elements. unfortunately a bug in IE and pie.htc prevented those from being declared here ** */ #container { position: relative; width: 960px; margin: 0 auto; } .rounded, .button, .pagination, #content, #content-maryland, #main-nav, #action-center, #social-media, #twitter-feed, #featured-area, #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/styles/PIE.htc); } .no-borderimage .rounded { -webkit-border-radius: none; border-radius: none; behavior: none; } /* ** ** NOTE: the rounded bottom for the sub-nav elements are contained within the declaration for ** the subnav ul elements. unfortunately a bug in IE and pie.htc prevented those from being declared here ** */ .rounded-bottom, #page-tools, #masthead, #footer-links { -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; behavior: url(/styles/PIE.htc); } .rounded-top, #office-locations { -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; behavior: url(/styles/PIE.htc); } .rounded-right, #breaking-news p { -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; behavior: url(/styles/PIE.htc); } .rounded-left, #breaking-news h1, { -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; behavior: url(/styles/PIE.htc); } #slide6.expanded h1 a { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .ie7 #slide1 h1 a, .ie8 #slide1 h1 a { background: transparent url(../images/structure/ie-featured-end-caps.png) top left no-repeat; } .ie7 #slide6 h1 a, .ie8 #slide6 h1 a { background: transparent url(../images/structure/ie-featured-end-caps.png) -100px 0 no-repeat; } .ie7 #slide6.expanded h1 a, .ie8 #slide6.expanded h1 a { background: transparent url(../images/structure/ie-featured-end-caps.png) -50px 0 no-repeat; } .button,.btn { position: relative; height: 29px; border: none !important; padding: 10px 10px 10px 10px; margin-bottom: 10px; background-color: #E7BC3B; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #E7BC3B),color-stop(1, #d88c23)); background: -moz-linear-gradient(center top, #E7BC3B 0%, #d88c23 100%); -pie-background: linear-gradient(#E7BC3B, #d88c23); /*behavior: url(/styles/PIE.htc);*/ font-family:"FuturaBTW01-LightConden"; font-size: 1.6em; color: #9b1c34; text-shadow: 1px 1px 1px rgba(255,255,255,.33); } .ie7 .button,.ie7 .btn { padding-bottom: 0; } .button:hover,.btn:hover { background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #fac532),color-stop(1, #eb9024)); background: -moz-linear-gradient(center top, #fac532 0%, #eb9024 100%); -pie-background: linear-gradient(#fac532, #eb9024); text-decoration: none; } .btn { float: right; width: auto; height: auto; } .large { padding: 15px 15px 11px 15px; font-size: 1.9em; } .download {} aside.press {} aside.press li, aside.news li { display: block; text-indent: -47px; padding-left: 47px; margin-bottom: 1em; } aside.links li, aside.files li, aside.media li, aside.photos li { padding:8px 0 0 26px; margin-bottom: 1em; border-top: 1px #ccc dotted; background: url("../images/structure/file-icons.png") no-repeat scroll -203px 10px transparent; } aside.links li:first-child, aside.files li:first-child, aside.media li:first-child, aside.photos li:first-child { margin-top: -7px; border-top: none; } aside.files { } .files .acrobat { background-position: -199px 9px; } .files .word { background-position: -178px -16px; } .files .excel { background-position: -151px -42px; } .files .powerpoint { background-position: -126px -67px; } .files .document { background-position: -76px -116px; } aside .media {} .media .mp3, .media .aac, .media .vorbis, .media .audio { background-position: -1432px -141px; } .media .flash { background-position: -1483px -90px; } .media .windows-media, .media .real, .media .quicktime, .media .theora, .media .webm, .media .h264, .media .video { background-position: -24px -166px;} aside.photos li { background-position: 0 -191px; } aside.links li { background:none;} /* older way with single images instead of using the global sprite aside.files {} .files .acrobat { background: transparent url(../images/structure/icons/acrobat.png) 0 9px no-repeat; } .files .word { background: transparent url(../images/structure/icons/word.png) 0 9px no-repeat; } .files .excel { background: transparent url(../images/structure/icons/excel.png) 0 9px no-repeat; } .files .powerpoint { background: transparent url(../images/structure/icons/powerpoint.png) 0 9px no-repeat; } .files .document { background: transparent url(../images/structure/icons/document.png) 0 9px no-repeat; } aside .audios {} .audios .mp3, .audios .aac, .audios .flash, .audios .vorbis, .audios .audio { background: transparent url(../images/structure/icons/audio.png) 0 9px no-repeat; } aside .videos {} .videos .flash { background: transparent url(../images/structure/icons/flash.png) 0 9px no-repeat; } .videos .windows-media, .videos .real, .videos .quicktime, .videos .theora, .videos .webm, .videos .h264, .videos .video { background: transparent url(../images/structure/icons/video.png) 0 9px no-repeat; } aside.photos li { background: transparent url(../images/structure/icons/photos.png) 0 9px no-repeat; } */ /* ** ITEM-LIST ** ** DESCRIPTION: List of Input Elements ** USAGE: Used for checkboxes and radio buttons ** */ .form-item-list { list-style: none; margin: 0 0 20px 0; } .form-item-list li { margin-bottom: 5px; } .ie7 .form-item-list input { margin-top: 7px; } .ie8 .form-item-list input { margin-top: -2px; } /* ** ** Breadcrumbs ** */ #breadcrumbs { list-style: none; position: absolute; top: 12px; left: 15px; font-size: .8em; margin: 0 0 10px 0; } #breadcrumbs li { float: left; } /* ** ** Masthead ** */ header { overflow: auto; margin-bottom: 10px; } #masthead { width: 290px; height: 101px; background-color: #E7BC3B; background: url(../images/structure/masthead-bg.png) top left repeat-x, url(../images/structure/masthead-glow.png) bottom center no-repeat, -webkit-gradient( radial, 145 50,300,145 50,40, color-stop(0, #d18023),color-stop(1, #e5a524)); background: url(../images/structure/masthead-bg.png) top left repeat-x, url(../images/structure/masthead-glow.png) bottom center no-repeat, -moz-linear-gradient(center top, #DC9A00 0%, #E7BC3B 100%); -pie-background: linear-gradient(#DC9A00, #E7BC3B); /* behavior: url(/styles/PIE.htc); */ float: left; } #masthead h1 { width: 255px; height: 60px; margin: 20px auto 0 auto; background: transparent url(../images/structure/global-sprites.png) -4px -147px no-repeat; } #masthead h1 a { width: 255px; height: 60px; display: block; } /* ** ** Page Tools ** */ #page-tools { position: absolute; top: 0; right: 0; width: 470px; height: 45px; background-color: #91212f; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #91212f),color-stop(1, #610e1a)); background: -moz-linear-gradient(center top, #91212f 0%, #610e1a 100%); -pie-background: linear-gradient(#91212f, #610e1a); /* behavior: url(/styles/PIE.htc); */ float: right; } #newsletter-button { display: block; height: 20px; width: 138px; background: transparent url(../images/structure/global-sprites.png) -1022px -147px no-repeat; float: left; margin: 13px 10px 7px 10px; } #newsletter-button:hover { background-position: -1022px -183px; } #site-search { float: right; margin: 7px 10px auto auto !important; } #search-field { position: relative; z-index: 10; width: 200px; margin-right: -17px; float: left; height: 18px; border: none; color: #9d9484; font-family:"FuturaBTW01-LightConden"; font-weight:lighter; font-size:1.6em;} .ie8 #search-field { width: 190px; } .ie7 #search-field { margin-top: -1px; height: 15px; } #search-button { float: left; position: relative; z-index: 5; padding: 4px 20px 5px 30px; } /* ** ** Photos and Captions ** */ #content div.left-photo{ float:left; margin:5px 20px 10px 0 !important; width:220px;} #content div.right-photo{ float:right; margin:5px 0 10px 20px !important; width:220px; } #content p.caption{ color:#a9a9a9; font-family:"FuturaBTW01-LightConden";font-weight:bolder;font-size:1.1em; margin-bottom:0;} /* ** ** Main Nav ** */ #main-nav { overflow: auto; width: 100%; height: 30px; padding: 18px 0 12px; margin-bottom: 10px; background-color: #030303; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #656565),color-stop(1, #030303)); background: -moz-linear-gradient(center top, #656565 0%, #030303 100%); -pie-background: linear-gradient(#656565, #030303); /* behavior: url(/styles/PIE.htc); */ } #main-nav ul { margin-left: 15px; } #main-nav li { display: block; margin-left: 47px; float: left; } #main-nav li:first-child { margin-left: 0; } #main-nav a { text-indent: -10000px; display: block; height: 30px; background: transparent url(../images/structure/global-sprites.png) -302px -144px no-repeat; } #mn-contact-ben a { width: 77px; background-position: -302px -144px; } #mn-serving-marylanders a { width: 130px; background-position: -385px -144px; } #mn-issues a { width: 38px; background-position: -522px -144px; } #mn-legislation a { width: 67px; background-position: -566px -144px; } #mn-newsroom a { width: 65px; background-position: -640px -144px; } #mn-students a { width: 54px; background-position: -712px -144px; } #mn-about-maryland a { width: 100px; background-position: -772px -144px; } #mn-about-ben a { width: 65px; background-position: -878px -144px; } #contact #mn-contact-ben > a, , #mn-contact-ben a:hover { width: 76px; background-position: -302px -175px; } #request #mn-serving-marylanders > a, #mn-serving-marylanders a:hover { width: 130px; background-position: -385px -175px; } #issues #mn-issues > a, #mn-issues a:hover { width: 38px; background-position: -522px -175px; } #leg #mn-legislation > a, #mn-legislation a:hover { width: 67px; background-position: -566px -175px; } #newsroom #mn-newsroom > a, #mn-newsroom a:hover { width: 65px; background-position: -640px -175px; } #students #mn-students > a, #mn-students a:hover { width: 54px; background-position: -712px -175px; } #maryland #mn-about-maryland > a, #mn-about-maryland a:hover { width: 100px; background-position: -772px -175px; } #about #mn-about-ben > a, #mn-about-ben a:hover { width: 65px; background-position: -878px -175px; } /* subnav */ #main-nav li ul { display: none; } #main-nav li:hover > ul { display: block; } #main-nav li ul { position: absolute; background-color: #0f0f0f; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #121212),color-stop(1, #000000)); background: -moz-linear-gradient(center top, #121212 0%, #000000 100%); box-shadow: 5px 5px 5px rgba(0,0,0,.2); -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.2); -moz-box-shadow: 5px 5px 5px rgba(0,0,0,.2); -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; padding: 15px 15px 5px 15px; z-index: 1000; margin: 0 0 0 -15px; width: 150px; } #main-nav li#mn-about-ben ul { margin-left: -94px; text-align: right; } /*tertiary nav */ #main-nav li ul li ul { /* IE Bug forces us to have a duplicate non-pie.htc rule here */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #000000 !important; margin: -43px 0 0 150px; } #main-nav li ul li { float: none; margin: 0; width: 150px; margin-bottom: 10px; } #main-nav li ul li a, #main-nav li ul li a:hover { text-indent: 0; background: none; height: auto; width: auto; color: #d6d6d6; font-size: 1.8em; text-decoration:none; } #main-nav li ul li a:hover { color: #c4900d; } /* ** ** Footer ** */ footer { position: relative; clear: left; } /* ** OFFICE LOCATIONS ** ** DESCRIPTION: used for office locations ** USAGE: ** */ #office-locations { overflow: auto; background: #8d8d8d; border-bottom: 1px #707070 solid; padding: 20px; color: #fff; } #office-locations ul { margin-left: 0; list-style: none; } #office-locations li { display: block; width: 660px; overflow: hidden; } #office-locations li img { margin-right:20px; float: left; } #office-locations .vcard { font-size: 1.1em; line-height: 1.5em; float: left; } #office-locations .org { font-family:"FuturaBTW01-LightConden"; font-size: 1.8em; border-bottom: 1px #7b5a5e solid; padding-bottom: 2px; margin: 2px auto 5px auto; float:left;} #office-locations .adr,.tel,.fax { float:left; width:185px; } .directions { display: block; margin-bottom: 10px; } #map { width: 235px; height: 138px; margin: auto 30px auto -7px; float: left; background-image: url(../images/structure/global-sprites.png); background-position: 0 0; background-repeat: no-repeat; } /* map on the region pages */ #region-map-container { width: 235px; height: 135px; margin: 1em auto; float: none; background-image: url(../images/structure/state-sprites.png); } /* added a region-map for use with the map on the region pages */ div.washington #map, div.washington #region-map-container { background-position: -1421px 0; } div.cumberland #map, div.cumberland #region-map-container { background-position: -240px 0; } div.baltimore #map, div.baltimore #region-map-container { background-position: -475px 0; } div.salisbury #map, div.salisbury #region-map-container { background-position:-711px 0; } div.bowie #map, div.bowie #region-map-container { background-position: -946px 0; } div.rockville #map, div.rockville #region-map-container { background-position: -1181px 0; } div.southern #map, div.southern #region-map-container{ background-position: -1661px 0; } /* added a _region for use with the map on the region pages */ div.washington #link_washington,#link_washington:hover, div.cumberland #link_cumberland,#link_cumberland:hover, div.baltimore #link_baltimore,#link_baltimore:hover, div.salisbury #link_salisbury,#link_salisbury:hover, div.bowie #link_bowie,#link_bowie:hover, div.rockville #link_rockville,#link_rockville:hover div.southern #link_southern,#link_southern:hover, div.cumberland #link_cumberland_region,#link_cumberland_region:hover, div.baltimore #link_baltimore_region,#link_baltimore_region:hover, div.salisbury #link_salisbury_region,#link_salisbury_region:hover, div.bowie #link_bowie_region,#link_bowie_region:hover, div.rockville #link_rockville_region,#link_rockville_region:hover div.southern #link_southern_region,#link_southern_region:hover { background-position:0px -12px; } /* added a -region for use with the map on the region pages */ #washington-office,#cumberland-office,#baltimore-office,#salisbury-office,#bowie-office,#rockville-office,#southern-office, #cumberland-office-region,#baltimore-office-region,#salisbury-office-region,#bowie-office-region,#rockville-office-region,#southern-office-region { display:none; height:450px; } /* added a -region for use with the map on the region pages */ div.washington #washington-office,div.cumberland #cumberland-office,div.baltimore #baltimore-office,div.salisbury #salisbury-office,div.bowie #bowie-office,div.rockville #rockville-office,div.southern #southern-office, #washington-office-region,div.cumberland #cumberland-office-region,div.baltimore #baltimore-office-region,div.salisbury #salisbury-office-region,div.bowie #bowie-office-region,div.rockville #rockville-office-region,div.southern #southern-office-region { display:block; height:145px; } /* ** MEGA-FOOTER ** ** DESCRIPTION: used for clients who want all major links/categories in their site footer ** USAGE: each column should be created with an unordered list (ul) and given an ** appropriate column width for class (e.g. a four column mega footer will ** have