/*******************************************************************
* GENERAL SETUP
*******************************************************************/
html, body {
margin: 0;
padding: 0;
height: 97%; /* needed because annoying constrainsts on using percentages */
background: #fff;
}
body {
font: 13px Trebuchet MS, Helvetica, Verdana, Tahoma, san-serif;
color: #445;
}
a {
font-weight: bold;
text-decoration: none;
color: #222279;
}
a img { border: 0 none }
a:visited {
color: #9E9EE9;
}
a:hover, a:active {
text-decoration: underline;
}
/* used to stretch
s with floated elements
.cleared { clear: both; }
/*******************************************************************
* HEADER
*******************************************************************/
/* the header has a background (shadow) centered on it */
#header {
height: 100px;
background: #fff url(../images/shadow_top.png) no-repeat center bottom;
}
/* put the image rendition as background to the page header */
#header h1 {
width: 288px;
height: 69px;
float: left;
margin-top: 14px;
background: url(../images/fabcentral.png) no-repeat left top;
}
/* and then hide the text to make sure we see only the image */
#header h1 span {
visibility: hidden;
}
/* this is the list of sites that go in the header
rememeber to adjust padding from 34px to whatever when needed */
#header ul {
float: left;
border-left: 1px solid #7777A3;
margin: 0 0 0 3em;
padding: 34px 0 0 10px;
font-size: 11px;
}
#header ul li {
list-style-type: square;
margin: 0;
padding: 0;
}
/* header links have a different color */
#header li a, #header li a:visited {
color: #7777A3;
}
/* search box floats to the right */
#searchbox {
float: right;
margin-top: 60px;
}
/* show search logo and and initially dim... will darken on focus */
#searchbox #q {
padding-left: 18px;
background: #fff url(../images/search.png) no-repeat 4px 50%;
border: 1px solid #ccc;
color: #ccc;
}
/*******************************************************************
* FOOTER
*******************************************************************/
#footer {
height: 30%;
background: #fff url(../images/shadow_bottom.png) no-repeat center top;
}
/* footer content is centered */
#footer .extcontent {
padding-top: 20px;
text-align: center;
}
/* CBA link floats off to the right */
#cbalink {
float: right;
}
/*******************************************************************
* SHARED CONTENT POSITIONING
*******************************************************************/
/* container for content of header and footer */
.extcontent {
width: 780px;
margin: 0 auto;
height: 100%;
}
#content {
width: 780px;
height: 80%;
margin: 0 auto;
background: #fff;
}
/*******************************************************************
* SLIDER AREA SETUP
*******************************************************************/
#sliders {
float: left;
width: 100%;
height: 100%;
background: #fff;
}
.lockedslider, .sliderset {
float: left;
height: 100%;
}
/* the opener's image is the only part that is an image */
.opener {
display: block;
width: 24px;
height: 100%;
float: left;
background: #1C1C65;
border-left: 1px solid #0F0F35;
border-right: 1px solid #222279;
}
/* give it a pressed effect when pressing */
.opener:active {
border-right: 1px solid #7F7FEB;
border-left: 1px solid #000;
}
/* the content is a fixed width to allow the whole mess to work */
.slidercontent {
float: left;
width: 598px;
background: #fff;
display: block;
overflow: auto;
height: 100%;
}
.slidercontent iframe {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
/* used to close a panel by hiding the content of the closed panel, but not the handle */
.closed .slidercontent {
display: none;
}
/*******************************************************************
* THUMBNAIL SETS FORMATTING
*******************************************************************/
/* apply to UL for image set */
.icons {
float: left;
margin: 0;
padding: 0;
}
/* make the list items into thumbnails */
.icons li {
display: block;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
/* images are pre-sized, with a black border */
.icons img {
border: 1px solid #000;
/*
width: 148px;
height: 148px;
*/
width: 98;
height: 98;
}
/* on hover, the images have a highlighted border */
.icons li a:hover img {
border: 1px solid #1C1C65;
}
/*
s inside the are made into overlay captions which only show on mouseover */
.icons li a span {
text-decoration: none;
position: absolute;
/* width: 140px; */
width: 90;
z-index: 100;
display: none;
background: #1C1C65;
padding: 2px 5px;
color: #fff;
}
/* show captions on mouseover */
.icons li a:hover span {
display: block;
}
/*******************************************************************
* PRESENTATION CLASSES
*******************************************************************/
/* for bare text inside the content box, to add some padding */
.padded {
padding: 1em;
}
/* for indented text in the content box */
.indented {
padding-left: 2em;
}