/* ---------------------------------------------------------- **EMK Institute** CSS Managed by: Blue State Digital Last Update: May 2009 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { color: #2c1c0d; font: 14px/1.5em Georgia, "Times New Roman", Times, serif; } h1 { color: #bf0909; font: 1.7em Verdana; margin-bottom: 10px;text-transform: uppercase; } h2 { color: #bf0909; font: bold 1.4em Verdana; margin-bottom: 10px; text-transform: uppercase; } h3 { color: #316294; font-size: 1.25em; margin-bottom: 10px; } h4 { color: #666666; font-size: 1.25em; } p { margin-bottom: 10px; } p.date { color: #666666; text-transform: uppercase; margin-bottom: 5px; font-size: .85em; } a { color: #316294; text-decoration: none; } a:hover { text-decoration: underline; } blockquote { } ul, ol { padding-left: 20px; margin-bottom: 10px; } ul { } ol { } ul li, ol li { list-style-type: disc; list-style-position: inside; } li ol { } li ul { } .entry { margin-bottom: 10px; } span.feature-title { color: #315e8a; font-weight: bold; font-size: .85em; text-transform: uppercase; } span.feature-description { color: #315e8a; font-size: .85em; text-transform: uppercase; } /* 03 =LAYOUT ---------------------------------------------------------- */ html { background: url(/page/-/img/bg.jpg) repeat-x #2f5579; } #wrapper { margin: 0 auto; width: 960px; background: #fff; } body.full-width #main { float: left; width: 916px; background: #fff; border-right: 2px solid #dce0e4; border-left: 2px solid #dce0e4; padding: 20px;} body.full-width #sidebar { display: none; } body.black #main { background: #000; width:960px; color: #fff; padding: 0px; border-left: none; border-right: none;} /** 03.1 =HEADER ---------------------------------------------------------- **/ #header { } #header .mainHeader { height: 100px; width: 960px; background: url(/page/-/img/header.png) no-repeat; float: left; } #header .mainHeader a h1 { display: inline-block; float: left; text-indent: -9999px; margin-top: 48px; margin-left: 22px; width: 280px; height: 32px; } form#stayInformed { float: right; padding-right: 10px; padding-top: 15px; width: 355px; } form#stayInformed input.submit { width: 108px; font: 12px "Helvetica", Arial, Geneva, sans-serif; height: 21px; float: left; display: inline; } form#stayInformed input#zip { border: #d7d7d7 solid 1px; padding: 4px; width: 79px; font: 12px "Helvetica", Arial, Geneva, sans-serif; margin-right: 10px; float: left; display: inline; } form#stayInformed input#email { border: #d7d7d7 solid 1px; padding: 4px; width: 125px; font: 12px "Helvetica", Arial, Geneva, sans-serif; margin-right: 10px; float: left; display: inline; } /** 03.2 =NAV ---------------------------------------------------------- **/ #siteNav { height: 37px; width: 960px; background: url(/page/-/img/site-nav-updated.png) no-repeat; float: left; margin-bottom: 5px; } #siteNav ul{ position: relative; padding: 0; } #siteNav ul li{ float: left; list-style: none; margin: 0;} #siteNav ul li a{ text-indent: -9999px; height: 37px; display: block; float: left; overflow: hidden; } #siteNav ul li a:hover { background: url(/page/-/img/nav.png) no-repeat; } #siteNav li.home a{ width: 108px; } #siteNav li.home a:hover { background-position: 0 -37px; } #siteNav li.institute a{ width: 220px; } #siteNav li.institute a:hover { background-position: -68px -37px; } #siteNav li.senator a{ width: 212px; } #siteNav li.senator a:hover { background-position: -242px -37px; } #siteNav li.interact a{ width: 134px; } #siteNav li.interact a:hover { background-position: -454px -37px; } #siteNav li.videos a{ width: 120px; } #siteNav li.videos a:hover { background-position: -549px -37px; } #siteNav li.support a{ width: 121px; } #siteNav li.support a:hover { background-position: -549px -37px; } #content { background: #1e3850; } #main { float: left; width: 596px; background: #fff; border-right: 2px solid #dce0e4; border-left: 2px solid #dce0e4; padding: 20px; } /** 03.3 =SIDEBAR ---------------------------------------------------------- **/ #sidebar { background: #fff; width: 295px; float: right; border: 10px solid #e7e7e7; } #sidebar .action { } #sidebar .action a { color: #fff; font-size: 1.65em; display: block; padding: 15px; margin-bottom: 1px; } #sidebar .action a:hover { text-decoration: none; background: #720405} #sidebar a.support {background: url(/page/-/img/btn_bg.jpg); } #sidebar a.share {background: url(/page/-/img/btn_bg.jpg); } #sidebar a.tell {background: url(/page/-/img/btn_bg.jpg); } #sidebar .video { margin-bottom: 10px; } #sidebar .news { margin-bottom: 10px; } #sidebar .featureOne { background: #fff; width: 270px; height: 150px; margin-bottom: 10px; padding-left: 11px; padding-right: 12px; } #sidebar .featureTwo { background: #fff; width: 295px; height: 150px; background: #fff; width: 270px; height: 150px; margin-bottom: 10px; padding-left: 11px; padding-right: 12px; } /** 03.4 =FOOTER ---------------------------------------------------------- **/ #footer {float: left; height: 55px; padding: 20px; background-color: #203a54; width: 920px; margin-top: 5px; font-size:12px;} #footer a.footer-logo { float: left; width: 210px; } #footer span { float: right; color: #fff; margin-top: 25px; margin-right: 5px; width: 555px; } #footer span a { color: #fff; text-decoration: underline; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #main{ border: none; padding: 0; width: 960px; } #home #siteNav { margin: 0; } #home-rotator-container { height: 293px; background: #091519; position: relative; margin: 0px 0 5px; width: 960px;} #home-rotator { width: 960px; height: 293px; } #home-rotator .entry-strip {position: absolute; top: 40px; width: 275px; height: 185px; background: #24435c; opacity: .90; padding: 20px;} #home-rotator .entry-headline {position: absolute; top: 65px; width: 296px; height: 40px; left: 20px; } #home-rotator .entry-headline span {color: #BF0909; color: #FFFFFF; font: 1.6em Arial; margin-bottom: 10px;text-transform: uppercase; opacity: 1;} #home-rotator .entry-text {position: absolute; top: 104px; width: 267px; left: 20px; color: #E0E9EF; font-weight: normal; font-size:12px; line-height:16px;} #home-rotator .entry {width: 960px; height: 293px; display: none; font-family: arial, helvetica, sans-serif; margin-bottom: 0; } #home-rotator .entry-button {position: absolute; top: 353px; left: 20px; } #home-rotator .entry-button a {background: #E2E51A url(/page/-/site/images/bullet-feature.png) no-repeat 5px center; padding: 5px 10px 2px 14px; line-height: 18px; color: #1F3E46; text-transform: uppercase; font-weight: bold; font-size: 12px;} #home-rotator .overlay {position: absolute; width: 672px; height: 292px; z-index: 5;} #home-rotator .overlay a {display: block; width: 672px; height: 292px;} #home-rotator-pager {position: absolute; top: 235px; text-align: right; width: 160px; padding-left: 10px; z-index: 10; font-family: arial; font-weight: bold; left: 135px; } #home-rotator-pager a { color: #fff; text-decoration: none; text-align: center; padding: 3px 7px; margin: 10px 10px 0 0; font-size: 12px; line-height: 18px; background: #182f46} #home-rotator-pager a.activeSlide {background: #E2E51A; color: #1E3B43;} #home-rotator-pager a.activeSlide {background: #d9ad59; color: #244360;} #home .video { background: #e7e7e7; width: 295px; height: 295px; margin-left: 5px; float: left; margin-bottom: 5px; padding: 10px; } #home .blog { background: #; width: 635px; margin-left: 5px; float: left; } #home .blog img { float: left; border: 2px solid #203a54; margin-right: 15px; margin-bottom: 5px; } #home .blog p{ padding-left: 93px; } #home .news { background: #e7e7e7; width: 295px; margin-left: 5px; float: left; margin-bottom: 5px; padding: 10px; height: 295px; } #home .news a { text-decoration: none; } #home .news p.date { margin-bottom: 0; } #home .rightSide { background: #e7e7e7; width: 295px; height: 176px; float: right; border: 10px solid #e7e7e7; margin-bottom: 5px; margin-right: 5px; } #home .rightSide .action a { color: #fff; font-size: 1.65em; display: block; padding: 15px; margin-bottom: 1px; } #home .rightSide .action a:hover { text-decoration: none; background: #720405} #home .rightSide a.support { background: url(/page/-/img/btn_bg.jpg); } #home .rightSide a.share { background: url(/page/-/img/btn_bg.jpg); } #home .rightSide a.tell { background: url(/page/-/img/btn_bg.jpg); } #home .rightSide .action { margin-bottom: 10px; } #home .rightSide .featureOne { background: #fff; width: 270px; height: 150px; margin-bottom: 10px; padding: 10px 12px 10px 11px; } #home .rightSide .featureTwo { background: #fff; width: 270px; height: 150px; margin-bottom: 10px; padding: 10px 12px 10px 11px; } #home .quote { float: left; width: 556px; margin-left: 0; padding: 42px; } #home .quote h2 { display: inline; color: #316294; text-transform: none; font-weight: normal; } #home .quote span.quote-mark { display: inline; margin-left: -10px; } #home .quote em { color: #316294; display: inline; padding-left: 5px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ /*VIDEO GALLERY*/ #media { border-bottom: 1px dotted #ccc; border-top: 1px dotted #ccc; padding: 10px 0 2px 0; } .left { float: left; width: 560px; } .right-video { float: right; width: 316px; } .right-video .entry { float: left; border-bottom: 1px dotted #ccc; clear: both; padding: 0 0 2px 0; width: 316px; } .right-video .entry h4 { color: #316294; font-size: 14px; margin-bottom: 0; } .right-video .entry p { font-family: Helvetica, sans-serif; font-size: 12px; } .media_gallery img { margin: 0 10px 10px 0; } #gallery_display h3 { margin: 10px 0 0 0; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ input#processbutton{ margin-top: 25px; } #bsd.full-width #main { float: left; width: 916px; background: #fff; border-right: 2px solid #dce0e4; border-left: 2px solid #dce0e4; padding: 20px;} #contact_importer_button { float: left; } /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}