@import url("reset.css");

body {background:#F2EFE9;}
div.clear {clear:both;/*height:1px;font-size:1px;*/}		/*blanked out puts 1 pixel gap between*/
span.underline {text-decoration:underline;}
span.bold {font-weight:bold;}
/**********FONT**********/
/*
11px ----- 0.688em
13px ----- 0.813em
14px ----- 0.875em
16px ----- 1em
18px ----- 1.125em
20px ----- 1.25em
21px ----- 1.313em
*/

/******************************/
/********** HEADINGS **********/
/******************************/
h1 {
	color:#333333;
	font-size:1.313em;
	line-height:31px;
	padding-bottom:20px;
}
h2 {
	color:#685457;
	font-size:1.125em;
	padding-bottom:30px;
}

#pubList.haplotype h1 {
	padding-bottom:0px;
}

#pubList.haplotype .list > h2 {
	margin-top:30px;
	padding-bottom:20px;
}

/**************************/
/********** TEXT **********/
/**************************/
a {
	color:#675357;
	font-size:0.875em;
}

/************************************************************/
/************************** HEADER **************************/
/************************************************************/
div#header {
	background:#A5CCD1 url(/_images/header/header_background.gif);
	height:138px;	/*to show the whole height of background*/
}
div#header img#logo {
	float:left;
	margin-left:-140px;		/*offset the logo so that emblem leaks out the page*/
}
/*****PRIMARY NAVIGATION*****/
div#primaryNav {	/*use this one to shift primaryNav*/
	background:#A5CCD1;
	float:right;
	width:366px;	/*same width as buttons including button padding*/
}
div#primaryNav ul {
	background:url(/_images/header/primaryNav/top_border.gif) repeat-x top;
	float:left;
}
div#primaryNav li {float:left;}
div#primaryNav li.home a,
div#primaryNav li.about a,
div#primaryNav li.maps a,
div#primaryNav li.contact a {
	display:block;
	height:79px;
	padding-right:2px;
	width:90px;
}
div#primaryNav li.home a {background:url(/_images/header/primaryNav/roll/roll_home.gif) 0 0 no-repeat;}
div#primaryNav li.about a {background:url(/_images/header/primaryNav/roll/roll_about.gif) 0 0 no-repeat;}
div#primaryNav li.maps a {background:url(/_images/header/primaryNav/roll/roll_maps.gif) 0 0 no-repeat;}
div#primaryNav li.contact a {background:url(/_images/header/primaryNav/roll/roll_contact.gif) 0 0 no-repeat;}
div#primaryNav li.last a {padding:0px;}	/*to make the top border bar same width as the total width of primaryNav*/

div#primaryNav li.home:hover a,
div#primaryNav li.about:hover a,
div#primaryNav li.maps:hover a,
div#primaryNav li.contact:hover a {
	background-position:0px -79px;
}	/*to make rollover effect*/
div#primaryNav a.activated {padding-right:2px;}		/*spacing between each tab */
div#primaryNav span {display:none;}
/*****PRIMARY NAVIGATION END*****/

/*****SECONDARY NAVIGATION*****/
div#primaryNav ul ul {
	background: none;
	clear:both;
	position: absolute;
	z-index: 100;
	background-color: #B3D19D;
	width: 181px;
	display: none;
	padding:10px 0px 5px 0px;
}
div#primaryNav ul li:hover ul, div#primaryNav ul li ul:hover {
	display: block;
}
div#primaryNav ul li.maps li {
	width: 181px;
	margin: 0px auto;
	display: block;
	padding: 10px 0px 0px 0px;
	font-size: 14px;
}
div#primaryNav ul li.maps li.intro {
	color: #FFFFFF;
	font-size: 14px;
	width: 161px;
	font-weight: bold;
	padding: 10px 0px 5px 18px;
}
div#primaryNav ul li.maps li a {
	background-image:none;
	height: auto;
	font-size: 1em;
	display: block;
	padding-bottom: 9px;
	border-bottom: 1px solid #FFFFFF;
	width: 140px;
	margin: 0px auto;
}
div#primaryNav ul li.maps li.last a {
	border: none;
	padding-bottom: 10px;
}
/*****SECONDARY NAVIGATION END*****/

/*************************************************************/
/************************** CONTENT **************************/
/*************************************************************/
div#content {
	margin:0 auto;
	padding-bottom:70px;
	width:780px;
}
div#content div.clear {
	height:1px;
}
/*****HOME - TEXT AND MAP*****/
div#content div#homeIntro {		/*text column*/
	float:left;
	padding-top:35px;
	width:386px;
}
div#content div#homeIntroText p a {
	color:#333333;
	font-size:1em;		/*some reason p and a is same size but a still turns out smaller, having one higher sets it to same*/
}
div#content div#homeIntroText a {font-weight:bold;}

div#homeMapContainer {		/*map column container*/
	float:right;
	margin-top:35px;
	width:335px;
	background-color:white;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:25px 17px 22px 17px;
}
div#homeMapContainer img {
	display:block;
	margin:0px auto;
}
div#homeMapContainer div.homeMap {
	margin-top:17px;
	width:157px;
	min-height:311px;
}
div#homeMapContainer div.homeMap.left {
	float:left;
	padding-right:8px;
	border-right:1px solid #D7D1CC;
}
div#homeMapContainer div.homeMap.right {
	float:right;
}
div#homeMapContainer div.homeMap p.title {
	font-size:1.125em;/*18px*/
	font-weight:bold;
	color:#333;
	padding-bottom:10px;
}
div#homeMapContainer div.homeMap p.intro {
	font-size:0.813em;/*13px*/
	font-weight:normal;
	color:#999;
	line-height:130%;
	padding-bottom:15px;
}
div#homeMapContainer div.homeMap li {
	min-height:19px;
	background:transparent url(/_images/home/map_icon.png) no-repeat left;
	padding-left:24px;
	margin-bottom:5px;
	vertical-align:middle;
}
div#homeMapContainer div.homeMap li a {
	display:block;
	padding-top:2px;
	font-size:0.813em;/*13px*/
	color:#665257;
}
div#homeMapContainer div.homeMap li a:hover span {
	text-decoration:underline;
}
/*****HOME - TEXT AND MAP END*****/

/*****HOME - PICTURED BOX*****/
div#homeSmallMapContainer {		/*pictured box*/
	background:#D7D1CC;
	margin-top:30px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:25px 17px 22px 17px;
	margin-right:5px;
}
div#homeSmallMapContainer img {display:block;width:100%;height:auto;}
div#homeSmallMapContainer h1 {padding:0px;margin-top:17px;margin-bottom:10px;line-height:26px}
div#homeSmallMapContainer h2 {color:#333333;padding:0px;margin-top:17px;margin-bottom:15px;line-height:24px}
div#homeSmallMapContainer a {display:block;font-weight:normal;margin-bottom:10px;}
/*****HOME - PICTURED BOX END*****/

/*****CONTACT - CONTACT FORM*****/		/*includes heading*/
h1.contactPage {
	padding:35px 0px 10px 0px;	/*spacing between h1 and header*/
}
p.letUsKnow {
	color:#999999;
	font-size:1.125em;
	padding-bottom:35px;
}
form#contactForm {
	background:#FFF;
	margin-bottom:45px;		/*spacing between the contact form and the next element*/
	padding:30px 0px 30px 25px;		/*padding around the form*/
	width:700px;
	-moz-border-radius:5px;			/*rounded corner for firefox*/
	-webkit-border-radius:5px;		/*rounded corner for safari and chrome*/
}
form#contactForm p {
	display:block;
	float:left;
	font-size:1.125em;
	padding:10px 0px 0px 0px;
	width:145px;
}
form#contactForm input {width:315px;}
form#contactForm input,
form#contactForm textarea {
	background:#ECE9EA;
	color:#333333;
	display:block;
	font-size:1.125em;		/*setting just a font as to a height will change the height anyway*/
	padding:10px;	/*some space between words and border*/
}
form#contactForm textarea {
	height:233px;
	width:495px;
}
form#contactForm input#contactSubmit {		/*the button*/
	background:#FAA901;
	color:#FDFDFD;
	font-size:1.313em;
	padding:5px;
	margin-left:145px;
	width:70px;
	-moz-border-radius:3px;			/*rounded corner for firefox*/
	-webkit-border-radius:3px;		/*rounded corner for safari and chrome*/
	cursor: pointer;
}
form#contactForm label {		/*if field isnt filled in*/
	color:#F00;
	display:block;
	font-size:0.813em;
	padding:5px 0px 0px 145px;
}
div#visitLinks {
	background:#FFF;
	padding-left:25px;
	margin-bottom:135px;
	width:400px;
	-moz-border-radius:5px;			/*rounded corner for firefox*/
	-webkit-border-radius:5px;		/*rounded corner for safari and chrome*/
}
div#visitLinks h2 {
	color:#333333;
	padding-top:25px;
}
div#visitLinks div#homeMapContainer {
	float:left;
	padding-top:0px;
}
#thankyou { display:none; }
/*****CONTACT - CONTACT FORM END*****/

/*****CONTACT - CONTACT TEAM*****/		/*after contact form*/
span.title {		/*to be used everywhere not just contact page*/
	background:#B6ADAE;
	color:#F2EEE9;
	font-size:1.313em;
	margin-bottom:30px;
	padding:7px 10px;
}
div.contactPerson {		/*the mini profile*/
	background:#FFF url(/_images/icon/icon_mail.gif) 12px 27px no-repeat;	/*px to reposition background for some padding*/
	min-height:53px;	/*the height of the box*/
	margin-top:15px;	/*small amount of spacing between title and contactPerson*/
	padding:15px 0px 0px 60px;
	width:310px;		/*actual width 370 but padding left is 60*/
	-moz-border-radius:8px;			/*rounded corner for firefox*/
	-webkit-border-radius:8px;		/*rounded corner for safari and chrome*/
}
div.contactPerson a {	/*link*/
	color:#333333;
	font-size:1.125em;
	width:200px;
}
div.contactPerson p {
	color:#999999;
	font-size:1em;
	padding:5px 0px 0px 0px;	/*define for all as default has padding bottom*/
	width:200px;
}
div.contactPerson img {
	margin-top:-50px;		/*align the image to middle of the box*/
}
div.last {margin-left:40px;}	/*spacing between the two profiles*/
span.title,
div.contactPerson,
div.contactPerson a,
div.contactPerson p,
div.contactPerson img {
	float:left;
}
/*****CONTACT - CONTACT TEAM END*****/

/*****ABOUT - RESEARCH GROUP*****/
div#researchGroup {
	background:url(/_images/about/fly.gif) no-repeat top right;		/*mosquito actually*/
	margin-top:35px;	/*for the padding between this and header*/
	width:795px;		/*slightly wider than default 780 to offset the mosquito*/
}
div#researchGroup h1,
div#researchGroup p {width:600px;}
/*****ABOUT - RESEARCH GROUP END*****/

/*****ABOUT - TEAM PROFILE*****/
div.teamProfile {		/*the largest box containing all*/
	background:#FFFFFF url(/_images/about/footer/pattern.gif) repeat-x bottom;
	float:left;
	min-height:399px;
	padding:20px 15px 0px 15px;
	margin-bottom:40px;
	width:340px;
	-moz-border-radius:5px;			/*rounded corner for firefox*/
	-webkit-border-radius:5px;		/*rounded corner for safari and chrome*/
	display:inline;		/*fix double height in IE6*/
}
div.teamProfile h2 {padding-bottom:0px;}	/*default has padding*/
div.teamProfile span {
	color:#999999;
	display:block;		/*so padding works*/
	font-size:1em;
	padding:5px 0px 30px 0px;	/*spacing between h1 this and p after*/
}
div.teamProfile div.portrait {
	float:right;
	margin:-15px -40px 0px 0px;		/*to make it bleed out div*/
}
div.teamProfile p {
	color:#675357;
	font-size:0.813em;
	line-height:20px;
}
div.emailTeam {		/*the link on the footer*/
	background:url(/_images/icon/icon_mail.gif) no-repeat left;
	height:36px;
	padding:18px 0px 0px 50px;
}
div.emailTeam a {font-size:1em;}
/*****ABOUT - TEAM PROFILE END*****/

/*****ABOUT - GROUP PROFILE*****/
div#groupProfile {		/*profile for team*/
	background:#FFF;
	clear:both;		/*to contain everything otherwise collapse*/
	-moz-border-radius:5px;			/*rounded corner for firefox*/
	-webkit-border-radius:5px;		/*rounded corner for safari and chrome*/
}
div#groupProfile img {		/*group photo*/
	float:left;
	padding:15px 40px 0px 15px;
}
div#groupDescription {padding:20px 18px;}		/*database team description*/

div#groupDescription p, div#groupDescription ul li {
	color:#675357;
	font-size:0.813em;
	line-height:21px;
}
/*****ABOUT - GROUP PROFILE END*****/

/*****MAPS - GENERIC*****/
div#miniMenuTop div.content, div#miniMenuBottom div.content, div#overviewInfo div.content {
	padding:0px;		/*gets rid of any properties that also affects the main content part*/
	width: 780px;
	margin: 0px auto;
}
/*****MAPS - GENERIC END*****/

/*****MAPS - TOP MINI MENU*****/
div#miniMenuTop {
	background:#685457;
	margin-top:-7px;		/*to cover up pattern on header, works good on IE too*/
	padding:10px 0px;
	width:100%;		/*to make background span across page*/
}
div#miniMenuTop div.content p {
	color:#FFF;
	display:block;		/*block with float left*/
	float:left;
	font-size:1.125em;
	padding:0px;		/*define no padding as deafult has some*/
}
div#miniMenuTop ul li {
	border-right:1px solid #958787;
	display:block;		/*block with float right*/
	float:right;
	padding:0px 10px;
}

div#miniMenuTop ul li.map {color:#FFFFFF;font-weight:bold}

div#miniMenuTop a {
	color:#B3A9AB;
	font-size:1.125em;
	font-weight:bold;
	word-spacing:-2px;		/*tighten up wordspace on links*/
	cursor: pointer;
}
div#miniMenuTop div.content ul li a.selectedLink {color:#FFF;}		/**the current lage viewing/
/*****MAPS - TOP MINI MENU END*****/

/*****MAPS - MAP CONTAINER*****/
div#map {
	height:517px;
	width:100%;
}
div#mapContainer {background-color: #333333;}
/*****MAPS - MAP CONTAINER END*****/

/*****MAPS - BOTTOM MINI MENU END*****/
div#miniMenuBottom {
	background:#333333;
	margin-bottom:35px;		/*put some space between mini menu bottom and content*/
	padding:10px 0px;
}
div#miniMenuBottom div.content {
	margin-top: 5px;
}
div#miniMenuBottom div.content p {
	color:#FFF;
	display:block;
	float:left;
	font-size:1em;
	padding:0px 15px 0px 0px;
}
div#miniMenuBottom div.content form {
	display:block;
	float:left;
}
div#miniMenuBottom div.content select {
	width: 210px;
}
div#miniMenuBottom div.content form input {
	background:#685457;
	color:#FFF;
	font-size:1.125em;
	font-weight:bold;
	margin-left:10px;	/*space between dropdown and go*/
	padding:3px;
	-moz-border-radius:3px;			/*rounded corner for firefox*/
	-webkit-border-radius:3px;		/*rounded corner for safari and chrome*/
}
div#miniMenuBottom div.content .marker_filters.button {
	float:right;
	position:relative;
	padding:2px 7px 5px 7px;
	cursor:pointer;
	font-size:1em;
	font-weight:bold;
	color:white;
}
.ie7 div#miniMenuBottom div.content .marker_filters.button {margin-top:-30px;}
div#miniMenuBottom div.content .marker_filters.button:hover {
	text-decoration:underline;
}
div#miniMenuBottom.haplotype div.content p {
	padding-right: 8px;
}
div#miniMenuBottom.haplotype div.content select {
	width: auto;
}
.marker_filters_tooltip {
	display:none;
	z-index: 1;
	font-size:13px;
	line-height:100%;
	white-space:nowrap;
	padding:0px;
	color:white;
	background:#685457;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}	
.marker_filters_tooltip img.arrow {position:absolute;bottom:-10px;left:60px;}
.marker_filters_tooltip ul {
	padding:0px 15px 10px 10px;
}
.marker_filters_tooltip li {
    margin:8px 5px 12px 0px;
	font-weight:bold;
}
.marker_filters_tooltip li label input {
	position:relative;
	top:2px;
	margin-right:3px;
}
.ie7 .marker_filters_tooltip li label {padding-left:10px;}
.ie7 .marker_filters_tooltip li label input {margin-right:-10px;}
.ie8 .marker_filters_tooltip li label input {margin-right:0px;}
.marker_filters_tooltip li label img {
	position:relative;
	top:6px;
}

#showCountry {cursor:pointer;position:relative;top:3px;}
/*****MAPS - BOTTOM MINI MENU END*****/

/*****MAPS - PUB LIST*****/
div#pubList {padding: 40px 0px;margin: 0px auto;width:780px;}		/*spacing between header and content*/
div#pubList h1 {float:left;margin:0px}		/*for the image 'publications'*/
div#pubList form {float:right;}
div#pubList form input.searchBox {		/*searchbox*/
	background:#FFF;
	color:#CCCCCC;
	margin-right:10px;
	padding:6px;
	width:205px;
}
div#pubList form input:focus {color:#191919;}
div#pubList form input.submitButton {	/*submit button for searchbox*/
	background:#FAA901;
	color:#FFF;
	cursor:pointer;
	font-weight:bold;
	padding:5px 10px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
div#pubList div.list {float:left;}		/*lists container*/
div#pubList div.list div.article {		/*the container for the article*/
	background:#EBE7E2;
	padding-top:22px;
	overflow:hidden;	/*to contain everything, replaces div clear*/
}
div#pubList div.list div.article.hidden {
	display:none;
}
div#pubList div.list.search-in-place div.article.hidden {
	display:block;
}
div#pubList div.list div.article.hidden-by-search {
	display:none !important;
}
div#pubList div.list div.odd {
	background:#F2EFE9;
}
div#pubList div.list div h2 {
	color:#191919;
	font-size:0.875em;
	line-height:21px;
	padding:0px 20px;
}
div#pubList div.list div p {padding:0px 20px;}	
div#pubList div.list div p.author {
	color:#665257;
	font-size:0.75em;
	padding:5px 20px;
}
div#pubList div.list div p.publishDate {
	color:#999999;
	font-size:0.75em;
	padding-bottom:10px;
}
div#pubList div.links {
	border-bottom:2px solid #FFFFFF;
}
div#pubList div.viewAbstract {
	background:url(/_images/maps/publications/tab_open.gif) 20px 0px no-repeat;
	float:left;
	height:24px;
	padding:8px 0px 0px 27px;
	width:137px;
}
div#pubList div.viewAbstractOn {
	background:url(/_images/maps/publications/tab_close.gif) 20px 0px no-repeat;
}
div#pubList div.viewAbstract a {
	font-size:0.813em;
	font-weight:bold;
}
div#pubList div.journal {
	float:right;
	height:32px;
	text-align:right;
}
div#pubList div.journal p {font-weight:bold;}
div#pubList div.journal p a {color:#CC0000;}
div#pubList div.list div div.abstract {		/*div for abstract*/
	float:left;
	padding:0px;
	width:100%;
	display:none;		/*hide and show on jQuery*/
}
div#pubList div.list div div.abstract p {	/*hide and show this with jQuery*/
	background:#FFF;
	border-bottom:2px solid #B3A9AB;
	color:#1A1A1A;
	float:left;
	font-size:0.75em;
	padding:15px 20px;
	/*width: 100%;*/		/*makes abstract overflow out of page*/
}
p#showMore {clear:both;width:100%;text-align:right;cursor:pointer;font-weight:bold;padding:10px 0px;}
p#showMore:hover {text-decoration:underline}
/*****MAPS - PUB LIST END*****/

/************************************************************/
/************************** FOOTER **************************/
/************************************************************/
div#footer {
	background:url(/_images/footer/footer_background.gif) repeat-x;
	height:232px;
}
div#footer p {
	color:#FFFFFF;
	font-size:1.125em;
	padding:45px 0px 15px 0px;
}
div#footer img {padding-bottom:30px;}
div#footer ul {
	display:block;
	float:left;
	width:305px;
}
div#footer li {
	border-right:1px solid #958787;
	padding:0px 15px;
	display:block;
	float:left;
}
div#footer li.first {padding-left:0px;}	/*shifts the whole li back to in line with the page*/
div#footer li.last {border:none;}		/*last link -contact- does not have border right*/
div#footer a {
	color:#FFFFFF;
	font-size:1em;
}
div#footer span {
	color:#FFFFFF;
	float:right;
	font-size:0.813em;
}
/***********************************************************/
/************************** ERROR **************************/
/***********************************************************/
div#content img#error {		/*ERROR IMAGE*/
	margin:40px 0px;
	float:left;
}
div#content a#refresh {
	display:block;
	font-size:1em;
	margin-bottom:40px;
}
div#content div.errorBox {		/*contains all*/
	float:left;
	margin-right:35px;
	width:350px;
}
div#content div.errorBox p {
	font-size:1em;
	padding-bottom:0px;
}
div#content div.errorInfo {		/*just the links and emails*/
	background:#FFF;
	height:130px;
	padding:20px;
}
div#content div.errorInfo ul li {
	list-style:inside;
	padding-bottom:7px;
}
div#content div.errorInfo a {font-size:1em;}