/*
Index.html basic
*/

a {
color: #555;
}

html {
    overflow: auto;
    min-width: 1000px;
}



body {
  background-color: #C0C0C0;
  font-size: 11px;
  font-family: Helvetica;
   line-height: 1.2;
   width: auto;
}

@media screen and (max-device-width: 480px){

	html {
	overflow: auto;
	min-width: 480px;
	}

	body {
	background-color: #B0B0B0;
	font-size: 7px;
	font-family: Helvetica;
	
	width: auto;
	}
}

/*
Index.html logo
*/

.logo {
	margin:0 auto;
	z-index: 10;
	position: absolute;
	left:50px;
	top: 10px;
	
	}
	
	
.HIV{

	font-family: Gill Sans, Verdana;
	font-size: 220%;
	color:#08519C;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-weight: bold;
	}

.mutationBrowser {
	font-family: Gill Sans, Verdana;

	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 15px;
	line-height: 14px;
	letter-spacing: -2px;
	font-weight: bold;
	}
	
.optionButtons {
width: 100%;
   min-width: 1000px;
  padding-top: 0px;
  border-radius: 5px;
  margin: 10px 0px 3px 0px;
  padding: 10px 0px 10px 0px;
  /*border: 1px solid #08519C;*/
  background: white;
white-space: nowrap;
}



.footerDiv {
	width: 100%;
	text-align:center;
   min-width: 1000px;
  padding-top: 0px;
  border-radius: 5px;
  margin: 10px 0px 3px 0px;
  padding: 10px 0px 10px 0px;
  /*border: 1px solid #08519C;*/
  background: white;
white-space: nowrap;
}


.mutationSwitcherDiv {
white-space: nowrap;
}

/*
Index.html hidden data storage
*/

#hash {
display: none;
}

#structurePath{
display: none;
}

#residue{
display: none;
}

.viewType {
display:none;
}

#proteinFocus {
  display: none;
}


.tooltip {
  font-size:11px;
  max-width:250px;
  text-align: center;
  border-radius: 5px;
  padding: 5px 5px 5px;
  background: #FFFFFF ;
  max-width:400px;
  border: 1px solid #DCDCDC;
  display: none;
  z-index:3;
}
/*
-----------------------------------------------------------
index.html data divs
-----------------------------------------------------------
*/

.residueData {
  width: 100%;
   min-width: 1000px;
  padding-top: 0px;
  border-radius: 5px;
  margin: 5px 0px 3px 0px;
  padding: 10px 0px 10px 0px;
  /*border: 1px solid #08519C;*/
  /*background: white;*/
  display: none;
  
}

.dataDiv {
  width: 100%;
  min-width: 1000px;
  margin: 0px 0px 3px 0px;
  padding: 0px 0px 20px 0px;
  border-radius: 5px;
  background: white;
  /*border: 1px solid #08519C;*/
  z-index:2;
  position: relative;
  overflow: auto;
}

.limitedDiv {
  width: 100%;
   min-width: 1000px;
  margin: 0px 0px 3px 0px;
  padding: 20px 0px 20px 0px;
  border-radius: 5px;
  background: white;
  /*border: 1px solid #08519C;*/
  z-index:2;
  position: relative;
  overflow: auto;
  #max-height:300px;
}


/*
-----------------------------------------------------------
index.html page layout
-----------------------------------------------------------
*/

.container {
  width: 95%;
  margin: 0 auto;
}


.container article.main {
  width: 99%;
  margin: 0px 0px 0px;
}

.container article.main p {
  font-size: 120%;
  color: #000000;
  margin: 0px 0px 0px;
}


.container header {
  font-family: sans-serif;
  font-size: 6em;
  color: #555555;
  margin: 45px 0 0 0;
  text-shadow: 2px 2px 1px #aabfd4;
}



.container footer {
  height: 25px;  
  clear: both;
  margin: 0px 0;
}


.container h2 {
  font-family: Helvetica;
  font-size: 140%;
  color: #708090;
  text-transform: uppercase;
  padding-top: 15px;
}

.container h4 {
  font-family: Helvetica;
  font-size: 110%;
  text-transform: uppercase;
  padding-top: 5px;
}


/*
-----------------------------------------------------------
index.html options tabs
-----------------------------------------------------------
*/

.switcher-content {
  display: none;
}


.switcherDiv a {
  background: #f1f1f1;
  background:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  border: 1px solid #BBBBBB;
  color: #444444;
  
  padding: 5px 1px 5px 1px;
  margin:0px 2px 0px 0px;
  border-radius:5px;
  
  font-weight: bold;
  text-decoration: none;
  font-size: 120%;
  font-family: Helvetica, Tahoma, Verdana, sans-serif;
  z-index:1;
  cursor: pointer; 
  

  
}

.switcherDiv a:hover {
   background:#f1f1f1;
color:#000000;
text-decoration:underline;
border: 1px solid #666666;
}


.switcherDiv .dataDiv_switcher_selected {
	background:#f1f1f1;
	color:#000000;
	text-decoration:underline;
	border: 1px solid #666666;
}

.switcherDiv .dataDiv_switcher_helper:hover {
  background: white;
    border: 0px;
  /*background-color: #08519C;
  border: 1px solid #08519C;
  color: #EFF3FF;*/
}



.switcherDiv .dataDiv_switcher_helper {
  font-weight: bold;
  font-size: 120%;
  background: white;
  color: #000000;
  border: 0px;
  
 /*
  
  margin: 0 0 5px 0;
  background-color: #08519C;
  border: 1px solid #08519C;
  width:100px;
  color: #EFF3FF;*/
}



/*
-----------------------------------------------------------
index.html protein tabs
-----------------------------------------------------------
*/


.protein_switcher {
  background: #f1f1f1;
  background:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  border: 1px solid #BBBBBB;
  color: #444444;
  
  padding: 5px 5px 5px 5px;
  margin:0px 2px 0px 0px;
  border-radius:5px;
  
  font-weight: bold;
  text-decoration: none;
  font-size: 120%;
  font-family: Helvetica, Tahoma, Verdana, sans-serif;
  line-height: 0px;
  height: 15px;
  z-index:1;
  cursor: pointer; 
  white-space: nowrap;
}

.protein_switcher:hover {
color:#000000;
text-decoration:underline;
border: 1px solid #666666;
}

.protein_switcher_selected {
color:#000000;
text-decoration:underline;
border: 1px solid #666666;
}


.protein_switcher_helper:hover {
  /*background-color: rgba(130,80,150,0.05);
  border: 1px solid rgba(130,80,150,0.05);
  background-color: #08519C;
  width:100px;
  color: #EFF3FF;*/
}

.protein_switcher_helper {
  font-weight: bold;
  font-size: 120%;
  background-color: white;
  color: #white;
  border: 1px;
  /*background-color: rgba(130,80,150,0.05);
  border: 1px solid rgba(130,80,150,0.05);

  padding: 2px 2px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  font-size: 100%;
  font-family: Helvetica, Tahoma, Verdana, sans-serif;
  line-height: 0px;
  height: 15px;
  background-color: #08519C;
  border: 1px solid #08519C;
  color: #EFF3FF;*/
}


/*
-----------------------------------------------------------

-----------------------------------------------------------
*/

.expand {
 text-align: center;
  width: 100%;
  margin: 10px 10px 10px 0px;
  border-radius: 5px;
  
  display: none;
}

#hoverHelp {
width:30%;
}

#hoverText {
   font-weight: bold;
   font-size: 120%;
  
   font: Helvetica, Sans-Serif;
  
   letter-spacing: -1px;
   
   border-radius: 5px;
   color:#FFF;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.5);
   padding: 4px;
}




/*
-----------------------------------------------------------
Index.html Login css
-----------------------------------------------------------
*/
.login_container {
margin:0 auto;
position: relative;
z-index: 10;
position: absolute;
right: 30px;
top: 20px;
}

.login_question {
padding: 4px 4px;
background: #FFFFFF;
border: 1px solid #6BAED6;

border-radius: 3px;
color:#AAAAAA;

color: #000000;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
cursor: pointer; 
z-index:2;
position: relative;
}

.login_link {
padding: 4px 4px;
background: #BDD7E7;
border: 1px solid #BDD7E7;

border-radius: 3px;

color: #000000;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
cursor: pointer; 
z-index:2;
position: relative;
}
}

.login_link:hover {
border: 1px solid #08519C;
}


.login_details {
color:#333333;
padding: 4px 4px;
background: #BDD7E7;
font-weight: bold;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
display:none;
z-index:1;
position: relative;
}

.login_submit {
padding: 4px 4px;
background: #FFFFFF;
border: 1px solid #6BAED6;

border-radius: 3px;
color:#AAAAAA;

color: #000000;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-family: Helvetica, Tahoma, Verdana, sans-serif;
cursor: pointer; 
z-index:2;
position: relative;
}


#searchTerm {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:10px;
    margin:0 0 5px;
    padding:2px;
    width:100px;
}