/* ---------------------------------------------------------- **Client Name** 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 {} h1 { font: 30px/34px Tahoma; color: #00071e; margin-bottom: 10px; } h2 { font: italic 17px/22px Georgia; color: #00071e; margin-bottom: 10px; } h3 { font: 18px/20px Tahoma; color: #888888; margin-bottom: 7px; } h4 { font: bold 14px/18px Tahoma; color: #333; margin: 0; } h5 { font: bold 12px/13px Tahoma; color: #333; padding:2px 0; } h6 { font: 11px/13px Tahoma; color: #666; padding:0 0 10px 0; } a { color: #333333; text-decoration: none; } a:hover { color: #000000; text-decoration: underline } p { font: normal 13px/18px Georgia; color: #000000; margin-bottom: 10px; padding:0;} p.caption { font: 11px/14px Tahoma; color: #333; margin: 5px 0 5px 0; padding:0;} p a { color: #00071e; text-decoration: underline; } h3 a { color: #888888; text-decoration:none; } h3 a:hover { color: #000000; text-decoration:none; } h4 a { color: #333333; text-decoration:none; } h4 a:hover { color: #00071e; text-decoration:underline; } h2.lighter { font: italic 16px/20px Georgia; color: #666666; margin-bottom: 20px; } h4.cufon { font: normal 14px/18px; } blockquote { } .base ul, ol { } .base ul { } .base ol { } .base ul li, .base ol li { } .base li ol { } .base li ul { } .entry { margin-bottom: 20px } p.date { } /* 03 =LAYOUT ---------------------------------------------------------- */ html { background: #00071e; } body {text-align: center;} #wrapper { width: 1000px; margin: 0 auto; } #content { float: left; width: 950px; margin-left: 25px; text-align: left; } #main { width: 645px; float: left; background: #e1e1e1; padding: 10px; margin-top: 15px; margin-bottom: 15px; margin-left: 20px; display: inline; width: 605px; padding: 30px; } #book #main { width: 898px; background: #000000; padding: 0px; } #truecompass #main {width:838px; background-image:url(http://tedkennedy.org/page/-/truecompass/book_text_bg.jpg); background-position:top left; background-repeat:no-repeat; background-color: #b7b47d;} /** 03.1 =HEADER ---------------------------------------------------------- **/ #header { width: 1000px; height: 204px; text-align: left; background: url(/page/-/img/header-piping.png) bottom no-repeat; */ } #header .lefthalf { float:left; width:550px;} #header .righthalf { float:right; width:390px; } #header .lefthalf .face { float:right; display:inline; margin: 0 0 0 0; width:228px; height:197px; background: url(/page/-/img/header-face.png) no-repeat; } #header .righthalf .etching {display:inline-block;width:352px;height:157px; margin: 25px 30px 0 0; text-indent: -5000px; } #header .lefthalf .logo a { display: block; width: 237px; height: 121px;float:left; display: inline-block; margin: 60px 0 0px 83px; width:237px; height:121px;} /** 03.2 =SIDEBAR ---------------------------------------------------------- **/ #sidebar { width: 233px; float: right; background: url(/page/-/img/nav-background.png) left top no-repeat; padding-left: 16px; padding-top: 15px; } #sidebar a { display: block; color: #fff; line-height:18px; text-transform: uppercase; text-decoration: none; width: 185px; padding: 0 5px 3px; margin: 13px 0 0 9px; font-family: arial; font-size: 14px; font-weight: bold;} #sidebar a.tributes { padding-left: 15px; text-indent: -10px ; width: 164px; } #sidebar a.mass { padding-left: 15px; text-indent: -10px ; } #sidebar .divider {background: url(/page/-/img/bottom_border.png) no-repeat; float: left; width: 177px; height: 6px; margin: 0px 0 0 9px; } #sidebar .ask a{ float: left; color: #fff; text-indent:-9999px; background: url(/page/-/img/bg_institute2.png) no-repeat; width: 192px; height: 182px; margin-top:20px;cursor:pointer; overflow: hidden; } /** 03.3 =FOOTER ---------------------------------------------------------- **/ #footer { float: left; color: #D1D8EF; font: normal 11px/14px Verdana, Arial, Helvetica; height: 80px; padding-top: 20px; text-align: center; width: 1000px;} #footer a { color: #D1D8EF; text-decoration:none; } #footer a:hover { color: #FFFFFF; text-decoration:underline; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #content { background: url(/page/-/img/home-middle-piping.png) bottom no-repeat; margin-left: 0; width: 1000px; height: 400px; } #home #main { width: 645px; float: left; background: none; padding: 10px 10px 10px 60px; margin: 15px 0 15px 0; height: 352px; } #home #sidebar { width: 224px; padding-left: 25px; padding-top: 15px; margin-right: 25px; display: inline; } #home #sidebar a { padding: 0 5px 3px; margin: 13px 0 0 0px; } #home #sidebar a.tributes { padding-left: 15px; text-indent: -10px ; width: 164px; } #home #sidebar a.mass { padding-left: 15px; text-indent: -10px ; }#home #sidebar .divider { margin: 0px 0 0 0px; } /** 04.1 =HERO ---------------------------------------------------------- **/ #hero { position: absolute; top: 218px; width: 640px; height: 363px; margin-left:10px } #home-rotator img { width: 640px; } body #home-rotator .entry { height: 363px; display: none; font-family: helvetica, arial, sans-serif; width: 640px; border-bottom: none; margin: 0 } #home-rotator #home-rotator-1 {display: block;} #home-rotator .entry-image {position: absolute; top: 0px; left: 0px;} #home-rotator .entry-strip {position: absolute; top: 283px; width: 640px; background: #000412; left: 0; height: 80px; opacity: .80; } #home-rotator .entry-text {position: absolute; top: 300px; width: 452px; line-height: 1.1em; color: #fff; font-weight: bold; font-size: 25px; right: 40px; text-align: right; } #home-rotator .entry-text2 {position: absolute; top: 330px; width: 452px; line-height: 1.1em; color: #fff; font-weight: bold; font-size: 14px; right: 40px; text-align: right; } #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: 640px; z-index: 5; height: 363px;} #home-rotator .overlay a {display: block; width: 640px; height: 363px;} #home-rotator-pager {position: absolute; top: 333px; text-align: right; width: 139px; padding-left: 0; z-index: 10; font-family: arial; font-weight: bold; height: 25px; left: 7px; } #home-rotator-pager a {background: #; color: #868686; text-decoration: none; text-align: center; font-size: 14px; line-height: 18px; margin-bottom: 0; display: block; float: left; margin-left: 0; margin-right: 2px; height: 15px; width: 15px; padding: 5px; } #home-rotator-pager a.activeSlide {background: #000; color: #868686;} #home-rotator-pager a:focus { outline: 0;} /** 04.1 =CAROUSEL ---------------------------------------------------------- **/ #carousel { float: left; height: 75px; margin-top: 15px; margin-bottom: 10px; } .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0;} .jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 90px; height: 80px; } .jcarousel-list a { display: block; width: 75px; text-decoration:none; } .jcarousel-list a img{ display: block; width: 75px; opacity: .5; } .jcarousel-list a:hover img{ display: block; width: 75px; opacity: 1; text-decoration:none; } .jcarousel-next { z-index: 3; display: none; } .jcarousel-prev { z-index: 3; display: none; } .jcarousel-next-horizontal { background: url(/page/-/img/btn_next.jpg) no-repeat -21px; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 850px; padding-left: 40px; padding-right: 40px; margin-left: 40px; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 850px; height: 75px; margin-right: 0; margin-bottom: 0; } .jcarousel-skin-tango .jcarousel-item { width: 85px; height: 75px; } .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 15px; right: 5px; width: 18px; height: 48px; cursor: pointer; background: transparent url(/page/-/img/carousel_next.jpg) no-repeat 0 0;} .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; left: 5px; width: 18px; height: 48px; cursor: pointer; background: transparent url(/page/-/img/carousel_prev.jpg) no-repeat 0 0; top: 15px;} .banner { float: left; text-align: center; padding-top: 15px; width: 1000px; } .caption-top, .caption-bottom { font-family: Arial; background: #000000; color: #ffffff; cursor:default; padding:3px; font-size:9px; text-align:left; cursor: pointer; margin-bottom: 0; } .caption-top { border-width:0px; margin-bottom: 0; } .caption-bottom { border-width:0px; margin-bottom: 5px; } .caption a, .caption a { background:#000; border:none; text-decoration:none; padding:0px; cursor: pointer;} .caption a:hover, .caption a:hover { background:#202020; text-decoration:none; cursor: pointer;} /* 05 =SUBPAGES ---------------------------------------------------------- */ .iconphoto, .iconpdf, .iconmp3, .iconvideo, .iconlink {display:block;height:20px;width:20px;background-repeat:no-repeat;} .iconphoto {background-image:url(/page/-/img/icon-photos.png);} .iconpdf {background-image:url(/page/-/img/icon-pdf.png);} .iconmp3 {background-image:url(/page/-/img/icon-mp3.png);} .iconlink {background-image:url(/page/-/img/icon-link.png);} .iconvideo {background-image:url(/page/-/img/icon-video.png);} .supplementalbox { width:200px; text-align: center; float:right;background-color:#FFFFFF;border:1px solid #999999;margin:0 0 5px 10px;padding:5px;} .supplementalbox h5 { font: normal 12px/13px Verdana; color: #666; margin:2px 0 5px 0; text-transform:uppercase } table.supplementaltable {font: normal 10px/13px Verdana;text-align:left;} table.supplementaltable a {font: normal 11px/13px Verdana; color:#777; text-decoration:none;} table.supplementaltable a:hover {font: normal 11px/13px Verdana; color:#333; text-decoration:underline;} table.supplementaltable td.rightcell { padding-left:6px } #header-inownwords { background-image:url(/page/-/img/header-inownwords.jpg);display:block; height:191px; width:600px; text-indent:-5000px; } #header-service { background-image:url(/page/-/img/header-lifetimeofservice.jpg);display:block; height:191px; width:600px; text-indent:-5000px; } #header-massachusetts { background-image:url(/page/-/img/header-massachusetts.jpg);display:block; height:191px; width:600px; text-indent:-5000px; } #header-biography { background-image:url(/page/-/img/header-biography.jpg);display:block; height:191px; width:600px; text-indent:-5000px; } #header-tributes { background-image:url(/page/-/img/header-tributes.jpg);display:block; height:191px; width:600px; text-indent:-5000px; } .subfront-left { width:405px;float:left;padding-right:20px;border-right:1px solid #CCC } .subfront-right { width:165px;float:right } #bythenumbers {text-align:center} #bythenumbers .thenumber {font: normal 28px/28px Tahoma; color: #666666; margin:0 0 4px 0;} #bythenumbers h6 { margin: 0 0 10px 0; } .speech-entry { border-bottom: 1px solid #CCC; padding:10px 0 5px 0; } .speech-entry-thumb {float:left; display:block;width:90px;height:85px;background-repeat:no-repeat; background-position:top left} /*.speech-entry-text { float:right; width:310px;padding-right:5px;}*/ .speech-entry-text { float:right; width:310px;padding-right:5px;} .speech-entry:hover { background-image: url(/page/-/img/mouseovergradient.jpg); background-position:right; background-repeat:repeat-y; } .videosidebarbox { border:1px solid #999; padding:7px; margin-bottom:15px } .videosidebarbox:hover { background-image: url(/page/-/img/mouseovergradient.jpg); background-position:middle; background-repeat:repeat-y; } .sociallinks { text-align:center; border:1px solid #999;padding:4px;background-color:#FFF; } .sociallinks .twitter, .sociallinks .facebook, .sociallinks .send { display:inline;height:20px; background-repeat:no-repeat; background-position:bottom; text-indent:-10000px;color:#FFFFFF; } .sociallinks .twitter { width:153px; margin-left: 20px; background-image:url(/page/-/img/social-twitter.png);} .sociallinks .facebook { width:127px; margin-left: 20px; background-image:url(/page/-/img/social-facebook.png);} .sociallinks .send { width:113px; background-image:url(/page/-/img/social-send.png);} .sociallinks .twitter:hover, .sociallinks .facebook:hover, .sociallinks .send:hover { background-position:top; } #truecompass #main #left {width:283px; float:left;display:block;} #truecompass #main #left #bookbox {width:283px;height:320px;display:block;text-align:center;} #truecompass #main #right {width:540px;float:right;display:block;} #truecompass #main #left #leatheredition {width:283px;height:200px;display:block;margin-top:150px;text-align:center; background-image:url(/page/-/truecompass/leather-edition.jpg);background-repeat:no-repeat;} /** 05.1 =GALLERY ---------------------------------------------------------- **/ #gallery li a{ float: left; text-align: left } #gallery li img {float:left; display:block; background-repeat:no-repeat; background-position:top left; margin-bottom: 5px; } #gallery li { padding: 0; float: left; width: 141px; margin-bottom: 5px; height: 143px; margin-right: 10px; font: normal 11px/13px Verdana;padding-top:.5em;text-align:left;} .speech-entry:hover { background-image: url(/page/-/img/mouseovergradient.jpg); background-position:right; background-repeat:repeat-y; } #tribute #main { margin: 0; width: 680px; padding: 10px; } #tribute #main { width: 645px; float: left; background: #e1e1e1; padding: 10px; margin-top: 15px; margin-bottom: 15px; margin-left: 20px; display: inline; width: 605px; padding: 30px; } #tribute #main .caption{font: normal 11px/14px Verdana; color: #333333; padding: 5px 0 10px 0; } #tribute #main-image.galleria_container { border: none; margin-bottom: 10px; } #tribute #main .demo{position:relative;margin-top:2em; } #tribute #main .gallery_demo{width:702px;margin:0 auto;} #tribute #main .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;} #tribute #main .gallery_demo li div{left:240px} #tribute #main .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} #tribute #main #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;} #tribute #main #main_image img{margin-bottom:10px;} #tribute #main .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} #tribute #main .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;} #tribute #main .info p{margin-top:1.6em;} # #main .galleria{list-style:none;width:200px} #tribute #main .galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0} #tribute #main .galleria li a{display:none} #tribute #main .galleria li div{position:absolute;display:none;top:0;left:180px} #tribute #main .galleria li div img{cursor:pointer} #tribute #main .galleria li.active div img,.galleria li.active div{display:block} #tribute #main .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} #tribute #main .galleria li .caption{display:block;font: normal 11px/13px Verdana;padding-top:.5em;text-align:left;} * html .galleria li div span{width:400px} /* MSIE bug */ /* 06 =FRAMEWORK ---------------------------------------------------------- */ .bigformfield, .smallformfield {font-family:Verdana, Arial, Helvetica, sans-serif;border:1px solid #666666;background-color:#ECECEC;color:#333333;padding:4px;margin:2px;width:98%;} .bigformfield {font-size:14px;} .smallformfield {font-size:12px;} .label {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666666;} .biggerlabel {font-size:14px;color:#333333;} .required {color:#990000;font-weight:bold;} /* 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;}