/* CSS Document */
/* Author: David Longshaw */
/* Date: August 2007 to October 2007 */

body {
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #fff;
background: #7B837D;
}
#allcontent {
width: 924px;
margin: 0 auto;
color: #000;
background: #fff;
}

a {
text-decoration: none;
}
h1 {
font-size: 2em;
line-height: 1.25;
color: #08327D;
font-weight: lighter;
margin-top: 0;
padding-top: 18px; /* 2px higher than sidebar to work around optical illusions. */
}
h2 {
font-size: 1.5em;
font-weight: bold;
color: #7B837D;
}
h3 {
font-size: 1.5em;
font-weight: lighter;
color: #7B837D;
}
h4 {
font-size: 1.3em;
font-weight: normal;
color: #FF5C00;
}
img {
margin-right: 5px;
}
p {
color: #08327D;
}
.bold {
font-weight: 800;
}


/* -------- Main Content ---------- */
#main, #main2, #main_squares {
float: right;
width: 368px;
left: -368px;
position: relative;
}
#main_squares {
width: 390px;
}
#main p {
color: #08327D;
}
/* Use chains of selectors to apply the same styling to different contexts. Don't try duplicating the CSS for each context; it will always get out of sync. */
#main ul, #main2 ul, #main_squares ul, #right_column_lower ul {
margin-left: 10px;
padding-left: 0;
list-style: none;
position: relative; /* IE */
}
#main li, #main2 li, #main_squares li, #right_column_lower li {
margin-left: 0;
margin-bottom: 9px;
padding-left: 15px;
color: #08327D;
background: transparent url(../images/small_arrow.jpg) 0 0.5em no-repeat; /* More control than list-style */
}
#main2 p {
color: #08327D;
}

#main a, #main a:hover, #main a:visited,
#main2 a, #main2 a:hover, #main2 a:visited,
#main_squares a, #main_squares a:hover, #main_squares a:visited {
color: #08327D;
text-decoration: underline;
}

#contact {
color: #FFF;
font-weight: bold;
position: relative;
top: -24px;
left: 600px;
width: 353px;
text-align: center;
}
contact a {
color: white;
font-weight: bold;
text-decoration: none;
}


/* ------ Page Header ----------- */
#header {
background: #d2d5c0 url(../images/header.jpg) left top no-repeat;
width: 924px;
height: 129px;
position: relative; /* Layout context */
}
#logo img {
top: 15px;
left: 41px;
position: absolute;
border: 0;
}
#searchbox {
float: right;
margin-top: 80px;
margin-right: 44px;
}
.submit {
position: relative;
padding-left:4px;
top: 7px;
}
.search {
color: #08327D;
border: 1px solid #7B837D;
height: 18px;
}


#tabs a {
color: #fff;
width: 95px;
height: 32px;
}
.unselected {
background-image: url(../images/tab.jpg);
background-repeat: no-repeat;
width: 95px;
height: 32px;
}

#selected {
background-image: url(../images/tab_selected.jpg);
background-repeat: no-repeat;
width: 95px;
height: 32px;
}

#end {
background-image: url(../images/tab_end.jpg);
background-repeat: no-repeat;
width: 95px;
height: 32px;
}


/* ------- BREADCRUMB -------------------- */
#breadcrumb {
clear: both;
text-indent: 24px;
}
#breadcrumb a, #nav-sub a {
color: #FF5C00;
}
#breadcrumb a.current_location {
color:#08327D;
font-weight: bold;
}
#bread_active {
color: #08327D;
font-weight: bold;
/* text-decoration: underline;    */
}


/* ----- Sectional Navigation -------------- */
#nav-sub {
clear: left;
float: left;
width: 150px;
}
#nav-sub ul {
margin-left: 35px;
margin-top: 21px;
padding: 0;
position: relative;
}
#nav-sub li {
margin-left: 0;
padding-left: 15px;
list-style: none;
background: transparent url(../images/small_arrow.jpg) 0 0.4167em no-repeat; /* More control than list-style */
}


/* ----- DNA Tool ---------- */
#dnatool {
margin-left: 49px;
width: 100px;
}
#dnatool img {
padding: 0;
line-height: 1.0;
border: 0;
}



/* ------- News on Homepage ------ */
#news {
width: 350px;
padding-top: 0;
padding-bottom: 5px;
margin-bottom: 15px;
border: 1px dotted #43BCE9;
}
#news h2 {
padding-top: 6px;
padding-left: 12px;
padding-bottom: 6px;
font-size: 1.5em;
font-weight: lighter;
border-bottom: 1px dotted #43BCE9;
}
#news a {
color: #08327D;
}
#news ul {
margin-bottom: 5px;
padding-bottom: 15px;
margin-left: 27px;
}
.news_list ul li {
list-style-type: disc;
color:#FF5C00;
/*border: 1px solid red;  */
}
#news .special a {
color: #FF5C00;
}
#news a.additional_links {
color: #FF5C00;
background: url(../images/tri_arrow.jpg) no-repeat 15px;
padding-left: 30px;
padding-top: 6px;
display: block;
height: 22px;
font-weight: bold;
border-top: 1px dotted #43BCE9;
}


/*--- SQUARES PAGE STYLES (fixes for IE) ----------*/
a.sq01, a.sq02, a.sq03, a.dnasq03, a.sq04, a.sq05, a.sq06, a.sq07, a.sq08, a.sq09 { /* All squares. */
width: 130px;
height: 145px;
display: block;
padding-top: 115px;
color: #08327D;
text-indent: 15px;
text-decoration: none;
background-repeat: no-repeat;
background-position: left top;
}
#main_squares a.sq01, #main_squares a.sq02, #main_squares a.sq03, #main_squares a.dnasq03, #main_squares a.sq04, #main_squares a.sq05, #main_squares a.sq06, #main_squares a.sq07, #main_squares a.sq08, #main_squares a.sq09,
#main_squares a:visited.sq01, #main_squares a:visited.sq02, #main_squares a:visited.sq03, #main_squares a:visited.dnasq03, #main_squares a:visited.sq04, #main_squares a:visited.sq05, #main_squares a:visited.sq06, #main_squares a:visited.sq07, #main_squares a:visited.sq08, #main_squares a:visited.sq09,
#main_squares a:hover.sq01, #main_squares a:hover.sq02, #main_squares a:hover.sq03, #main_squares a:hover.dnasq03, #main_squares a:hover.sq04, #main_squares a:hover.sq05, #main_squares a:hover.sq06, #main_squares a:hover.sq07, #main_squares a:hover.sq08, #main_squares a:hover.sq09
{ /* IE has arbitrary limit for chained selectors */
text-decoration: none;
}
/* Column 2 */
a.sq02, a.sq05, a.sq08 {
margin-left: 127px;
}
/* Column 3 */
a.sq03, a.dnasq03, a.sq06, a.sq09 {
margin-left: 254px;
}
/* Squares which don't start a row */
a.sq02, a.sq03, a.dnasq03, a.sq05, a.sq06, a.sq08, a.sq09 {
margin-top: -260px;
}
/* Row 1 */
a.sq01 {
background-image: url(../images/squares_yellow.jpg);
}
a:hover.sq01 {
background-image: url(../images/squares_yellow_over.jpg);
}
a.sq02 {
background-image: url(../images/squares_olive.jpg);
}
a:hover.sq02 {
background-image: url(../images/squares_olive_over.jpg);
}
a.sq03 {
background-image: url(../images/squares_lightolive.jpg);
}
a:hover.sq03 {
background-image: url(../images/squares_lightolive_over.jpg);
}
a.dnasq03 {
background-image: url(../resources/image/dna/DNA_lightolive.jpg);
}
a:hover.dnasq03 {
background-image: url(../resources/image/dna/DNA_lightolive_over.jpg);
}
/* Row 2 */
a.sq04 {
margin-top: -120px;
background-image: url(../images/squares_olive.jpg);
}
a:hover.sq04 {
background-image: url(../images/squares_olive_over.jpg);
}
a.sq05 {
background-image: url(../images/squares_orange.jpg);
}
a:hover.sq05 {
background-image: url(../images/squares_orange_over.jpg);
}
a.sq06 {
background-image: url(../images/squares_olive.jpg);
}
a:hover.sq06 {
background-image: url(../images/squares_olive_over.jpg);
}
/* Row 3 */
a.sq07 {
margin-top: -120px;
background-image: url(../images/squares_grey.jpg);
}
a:hover.sq07 {
background-image: url(../images/squares_grey_over.jpg);
}
a.sq08 {
background-image: url(../images/squares_olive.jpg);
}
a:hover.sq08 {
background-image: url(../images/squares_olive_over.jpg);
}
a.sq09 {
background-image: url(../images/squares_yellow.jpg);
}
a:hover.sq09 {
background-image: url(../images/squares_yellow_over.jpg);
}


/* ----- RIGHT COLUMN ------------------------- */
#right_column, #right_column_squares, #right_column_lower {
float: right;
width: 300px;
left: 340px;
position: relative;
}
#right_column_lower {
margin-top: 18px; /* Match <h1> margin-top. */
padding-top: 4em; /* <h1> has 2em text with 1em margins. */
/* originally 24px */
margin-right: 16px;
}
#right_column_lower img {
 display: block;
 margin: 0 auto;
}
#right_column_squares {
margin-top: 18px; /* Match <h1> margin-top. */
padding-top: 4em; /* <h1> has 2em text with 1em margins. */
}
#right_column_squares iframe {
display: block;
float: right;
}
#right_column p {
margin-top: 72px;
width: 307px;
color: #08327D;
}
#right_column_lower p {
width: 307px;
color: #08327D;
}


.highlighted {
color:#FF5C00;
}

.learnmore {
color:#FF5C00;
background: url(../images/small_arrow.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 10px;
font-size: smaller;
}


#footer {
clear: both;
background: #ecf0d5 url(../images/footer.jpg) left top no-repeat;
width:924px;
height:37px;
text-align: center;
margin-top: 15px;
}

#footer_txt {
position:relative;
top:10px;
color: #ccc;
}

#footer_txt a {
text-align: center;
color: #7B837D;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
position:relative;
bottom: 0;
}

.copyright {
width: 924px;
text-align: center;
color: #FFFFFF;
background: #7B837D;
position: relative;
bottom: -20px;
font-size: smaller;
border-bottom: 5px solid #7B837D;
}
/*-----MAIN NAVIGATION----------------------------------------*/

/* Use a background image instead of an <img> element. */
#navcontainer {
float: left;
width: 100%;
background: #d2d5c0 url(/images/contact_bar.jpg) left top repeat-x;
}
#navcontainer img {
display: none;
}
/* Zero margins and padding of the list instead of using negative margins on its parent. */
#navcontainer ul, #content li {
margin: 0;
padding: 0;
}
#navcontainer ul li {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(../images/tab.jpg) repeat-x 0;
font: 12px/30px "Arial", verdana, sans-serif;
text-align: center;
}

#navcontainer a {
color: #7B837D;
font-weight: bolder;
text-decoration: none;
display: block;
width: 95px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;

}

#navcontainer li#active {
background: url(../images/tab_selected.jpg) repeat-x 0;
}
#navcontainer li#active a {
color: #fff;
}
#navcontainer a:hover {
background: url(../images/tab_hover.jpg) repeat-x 0;
}
#navcontainer li#active a:hover {
background: url(../images/tab_selected.jpg) repeat-x 0;
}

#template_area /* !!! take out width and height before adding content*/ {
background: #FFF;
width: 836px;
height: 400px;
margin-left: 44px;
margin-right: 44px;
margin-top: 12px;
margin-bottom: 20px;
}

/*------FORM and ADDITIONAL Styles-----------------------------------------------------*/

form p {
color: #7B837D;
}

input.text {
border: 1px solid #7B837D;
margin-left: 10px;
color: #08327D;
}

fieldset {
border: 1px solid #7B837D;
padding: 10px;
width: 271px;
}

legend {
color: #7B837D;
font-size: small;
}

textarea {
border: 1px solid #7B837D;
padding: 10px 10px 10px 20px;
color: #08327D;
}

.options {
border: 1px solid #7B837D;
}

.submit_but {
border: 1px solid #7B837D;
margin-top:10px;
margin-bottom: 5px;
}

label {
color: #FF5C00;
font-size: medium;
}

table {
border-collapse: collapse;
border: 1px solid #7B837D;
}

tr td {
border: 1px dotted #7B837D;
padding: 10px;
color: #08327D;
}



.white {
color: #FFF;
}


#main_form {
margin-left: 185px;
margin-top: 5px;
width: 316px;
padding-left: 10px;
min-height: 470px;
}

input.text {
border: 1px solid #7B837D;
margin-left: 0;
color: #08327D;
}

#allcontent .centre {
 display: block;
 margin: 0 auto;
}

a.orange {
 color: orange;
}