/*
* -----------------------------------------------------------------------------
* Define a standard header + 2 column + footer layout. The footer is forced
* to "stick" to the bottom of the browser window if the page content does not
* fill the screen. Sticky footer code is from ryanfait.com.
* -----------------------------------------------------------------------------
* The layout that should be used in every web page looks like this:
*
*
*
*
*
*
*
* Note that the final element inside the wrapper div is an empty push div.
* Note that the footer div lives outside the wrapper div.
* -----------------------------------------------------------------------------
* To do: remove all styles not related to the layout and put them into a
* separate stylesheet.
* -----------------------------------------------------------------------------
*/
* {
margin: 0;
}
html {
overflow-y: scroll;
}
html, body {
height: 100%;
background-color: rgb(219, 222, 210);
}
.wrapper {
min-height: 100%;
height: auto !important; /* Auto sticks footer to bottom */
height: 100%;
width: 980px;
border-left: 1px solid #333;
border-right: 1px solid #333;
margin: 0 auto -2em; /* Set margin value = -(footer height) */
background-color: #fff;
}
/*
* -----------------------------------------------------------------------------
* Header block with a banner image in the background and page title/subtitle.
* -----------------------------------------------------------------------------
*/
.header {
width: 980px;
height: 110px;
background-image: url("../img/banner_hawc.png");
background-repeat: no-repeat;
background-position: right;
border-bottom: 1px solid #333;
font-family: Georgia, serif;
}
.header h1 {
font-size: 64px;
font-style: oblique;
color: #333;
padding: 0 0 0 10px;
}
.header h2 {
font-size: 18px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #0041a9;
padding: 0 0 0 10px;
}
.header a {
text-decoration: none;
}
/*
* -----------------------------------------------------------------------------
* Menu block. Menu "buttons" are actually elements in an unordered list.
* Code from http://www.projectseven.com/tutorials/navigation/auto_hide/
* -----------------------------------------------------------------------------
*/
#menuwrapper {
border-top: 0;
border-bottom: 1px solid #333;
background-color: #909090;
background-image: url("../img/menu-bkg-3.png");
background-repeat: repeat-x;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#menu {
width: 58em;
}
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#menu a {
display: block;
text-decoration: none;
padding: 5px 10px 5px 10px;
border-right: 1px solid #f0900e;
font-size: .9em;
color: #fbfcbf;
}
#menu a.dropdown {
padding: 5px 16px 5px 10px;
}
#menu li {
float: left;
width: 9em;
}
#menu li {
position: relative;
}
/* hide from IE mac \*/
#menu li {
position: static; width: auto;
}
/* end hiding from IE5 mac */
#menu li ul,
#menu ul li {
width: 13em;
}
#menu ul li a {
color: #565656;
border-right: 0;
padding: 3px 12px 3px 16px;
}
#menu li ul {
z-index: 100;
position: absolute;
display: none;
background-color: #fff;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
}
#menu li:hover a,
#menu a:focus,
#menu a:active {
background: #720000 url("../img/menu-bkg-3.png") repeat-x 0 -20px;
}
#menu li:hover ul {
display: block;
}
#menu li:hover ul a {
color: #000000;
background: #ffffd2 /*rgb(255, 219, 89)*/;
border-top: 1px solid #333;
}
#menu ul a:hover {
background-color: #606060!important;
color: #FFFFFF !important;
}
#menu input {
border: 0;
display: block;
text-decoration: none;
padding: 5px 10px 5px 10px;
border-right: 1px solid #f0900e;
font-size: .9em;
font-weight: normal;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fbfcbf;
background-color: #909090;
background-image: url("../img/menu-bkg-3.png");
background-repeat: repeat-x;
}
#menu input:hover {
background: #720000 url("../img/menu-bkg-3.png") repeat-x 0 -20px;
}
/*
* -----------------------------------------------------------------------------
* Content block; unique for each page.
* -----------------------------------------------------------------------------
*/
.content {
float: left;
width: 710px;
padding-bottom: 2em; /* Extra padding for footer */
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 0.95em;
}
.content p {
padding: 10px;
font-size: 0.95em;
line-height: 1.6em;
}
.content ol, .content ul {
padding-left: 2.5em;
padding-bottom: 1em;
line-height: 1.5em;
}
.content dl {
padding-left: 1.5em;
padding-bottom: 1em;
line-height: 1.5em;
}
.content dt {
font-weight: bold;
}
.content dd {
padding-bottom: 1em;
}
.content li ul {
padding-bottom: 0;
}
.content form {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 10px;
text-align: left;
font-size: 0.95em;
line-height: 1.5em;
}
.content input {
width: 100%;
border: 1px solid #777;
}
.content textarea {
width: 100%;
max-width: 100%;
border: 1px solid #777;
}
.content a {
color: #bd3976;
text-decoration: none;
}
.content a:visited {
color: #64187c;
}
.content a:hover, .content a:focus {
color: #f0900e;
}
.content h3, .content h4, .content h5, .content h6 {
padding: 10px;
line-height: 1em;
}
.content h3 {
font-size: 1.2em;
color: #0041a9;
font-style: oblique;
}
.content h4 {
font-size: 1.1em;
}
.content h5 {
font-size: 1em;
}
.content h6 {
font-size: 0.9em;
}
/*
.content table {
padding: 10px;
margin-left: auto;
margin-right: auto;
}
.content td, .content th {
margin: 0;
padding: 5px;
font-size: 0.95em;
line-height: 1.6em;
text-align: center;
border: 1px solid #333;
}
*/
/*
* -----------------------------------------------------------------------------
* Definition of sidebar elements (search form, limited links, etc.). These
* should be contained inside a "sidebox" that defines a border and fill.
* -----------------------------------------------------------------------------
*/
.sidebar {
float: right;
width: 250px;
padding-bottom: 2em; /* Extra padding for footer */
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.sidebar .sidebox {
color: #333;
color: #333;
background-color: #ffffe6; /*rgb(229, 232, 255); */
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: center;
border: 1px solid #333;
margin: 10px;
padding: 10px;
line-height: 1.6em;
}
.sidebox h3 {
font-size: 1em;
color: #00238b;
}
.sidebox h4 {
font-size: 0.9em;
text-align: left;
}
.sidebox ol, .sidebox ul {
text-align: left;
font-size: 0.9em;
line-height: 1.5em;
}
.sidebox a {
color: #bd3976;
text-decoration: none;
}
.sidebox a:hover, a:focus {
color: #f0900e;
}
/*
* -----------------------------------------------------------------------------
* Divs for handling figures and captions in the content box and sidebar.
* -----------------------------------------------------------------------------
*/
.figure { /* Centered figure on its own line */
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.figureFloatLeft { /* Figure with text wrapping around the right */
float: left;
clear: left;
padding: 10px;
}
.figureFloatRight { /* Figure with text wrapping around the left */
float: right;
clear: right;
padding: 10px;
}
.figure img, .figureFloatLeft img, .figureFloatRight img {
text-align: center;
border: 1px solid #333;
}
.figure td, .figure th {
margin: 0;
padding: 5px;
font-size: 0.95em;
line-height: 1.6em;
text-align: center;
border: 1px solid #333;
}
.figure .caption, .figureFloatLeft .caption, .figureFloatRight .caption {
font-size: 0.8em;
font-style: oblique;
text-align: left;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
margin-top: 0.5em;
}
/*
* -----------------------------------------------------------------------------
* Div for handling news item on the main page.
* Images going into this div should always be 530x350
* -----------------------------------------------------------------------------
*/
#newsitem {
width: 530px;
height: 350px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#newsitem img {
position: absolute;
left: 0;
top: 0;
width: 530px;
border: 1px solid #000;
}
#newsitem p {
z-index: 1;
position: absolute;
color: #ffffff;
font-size: 16px;
font-weight: normal;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
background: rgb(22, 15, 58);
background: rgba(22, 15, 58, 0.75);
left: 0px;
top: 0px;
padding: 10px 0 10px 10px;
width: 521px;
}
#newsitem p.date {
z-index: 1;
position: absolute;
color: #ffffff;
font-size: 10px;
font-weight: normal;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
background: rgb(22, 15, 58);
background: rgba(22, 15, 58, 0.75);
left: 0px;
top: 331px;
padding: 2px 0 2px 10px;
width: 521px;
}
/*
* -----------------------------------------------------------------------------
* Sticky footer trick (footer will not float up into the center of the page):
* http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
* -----------------------------------------------------------------------------
*/
.footer {
height: 4em;
margin: 0 auto;
width: 980px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-color: #fff;
border-left: 1px solid #333;
border-right: 1px solid #333;
color: #333;
}
.footer, .push {
clear: both;
}
.footer p {
text-align: center;
}
.footer a {
color: #bd3976;
text-decoration: none;
}
#twitter-widget-0{
vertical-align: middle;
}