@import url('reset.css');

html {
 background-color: #f7f8f8;
 background-color: #fefefe;
 background-color: #FFFFFF;
}

body {

}

h1, h2, h3, .h1override {
	color: #252525;
 	font-family: 'Oswald', 'Lato', sans-serif; 
	font-size: 3em;
	text-align: left;	
	font-weight: 400;
	line-height: 140%;
	margin-bottom: 0.25em;
	clear: both;	
}

h2 {
	margin-top: 0.7em;
	font-size: 2em;
}

.h2-1,
.h3-1 {
   clear: none;
}

h3 {
	font-size: 1.5em !important;
	margin-top: 0.7em !important;
	clear: none !important;		
}

h3 a {
 	font-family: 'Oswald', 'Lato', sans-serif; 
}

h4 {
	font-family: 'Oswald', 'Lato', sans-serif; 
	font-size: 1.2em;
	font-weight: normal;		
	line-height: 150%;
 	color: #000000;
	text-align: left;
}

p, ul, li, a, label, blockquote, input, select, input, textarea, th, td, dl, dt, dd, .caption .table1 {	
	font-family: 'Abel', Helvetica, Arial, sans-serif;
 	font-size: 1.2em;
 	line-height: 150%;
	color: #252525;
	text-align: left;
	margin-bottom: 0.3em;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Abel', Helvetica, Arial, sans-serif;
	color: #808080;
}
::-moz-placeholder { /* Firefox 19+ */
	font-family: 'Abel', Helvetica, Arial, sans-serif;
	color: #808080;
}
:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Abel', Helvetica, Arial, sans-serif;
	color: #808080;
}
:-moz-placeholder { /* Firefox 18- */
	font-family: 'Abel', Helvetica, Arial, sans-serif;
	color: #808080;
}
	
li {
  font-size: 1em;
}

dt {
  font-size: 1em;
  font-weight: bold;
}

p a {
 	font-size: 1em;
}

dd {
	font-size: 1em;
}	

.td-3 a {
	font-size: 1em;
}

.td-3-1 a {
	font-size: 1em;
}

p.p1 {
	width:98%;
}

.odd, .even {
   background-color: #f9f9f9;
   display: block;
   float: left;
   clear: both;
   width: 98%;
   padding: 8px 5px;
   border-bottom: 1px solid #FFFFFF;
}

.even {
   background-color: #ededed;
}

.error p {
	color: #D60000;
}

.desktop-show {
 display: inherit;
}

.mobile-show {
 display: none;
}


/*-----------------------------------------------
  Links
  -----------------------------------------------*/
  
a {
	color: #3b5998;
	text-decoration: none;
}

p a {
   font-weight: bold;
}

h3 a {
   font-weight: normal;
}

a:hover {
	color: #b38600;	
	text-decoration: underline;
}

a:active { 
	padding-top: 2px; 
}


a.list {
   padding: 2px 4px;
   margin-left: -4px;
}

a.list:hover {
	color: #FFFFFF;	
	background-color: #445571;
	text-decoration: none;
}

p.row a {
	background-color: #445571;
}


a.list-label {
 	font-family: 'Oswald', 'Lato', sans-serif; 
 	color: #000000;
}

a.list-label:hover {
 	font-family: 'Oswald', 'Lato', sans-serif; 
 	color: #000000;
 	text-decoration: underline;
}


/*-----------------------------------------------
  Forms 
  -----------------------------------------------*/

label, .question, .label {
 	font-family: 'Oswald', 'Lato', sans-serif; 
}

.col1 {
 width: 49%;
 float: left;
}

.col2 {
 width: 49%;	
 float: right;
 clear: right;
}

.col1-1 {
 width: 30%;
 float: left;
}

.col2-1 {
 width: 70%;	
 float: left;
 clear: right;
}

textarea, input[type="password"], input[type="text"], input[type="textarea"], isindex {
 outline: 0px none;
 padding: 2px;
 width: 250px;
 width: 96%;
 margin: 5px 0px;
 -moz-box-sizing: border-box;
 background: none repeat scroll 0px 0px rgb(255, 255, 255);
 border: 1px solid rgb(173, 156, 156);
 border-radius: 2px 2px 2px 2px;
 box-shadow: 0px 1px rgba(34, 25, 25, 0.15) inset, 0px 1px rgb(255, 255, 255);
 transition: all 0.08s ease-in-out 0s;
 display: inline-block;
 font-family: 'Abel', Helvetica, Arial, sans-serif;
 font-size: 1.2em;
 line-height: 150%;
 color: #252525;
}

textarea {
 width: 98%;
 
}

#error {
 display: none;
}

#login-form {
 max-width: 300px;
}

#confirm-form,
#activity-link {
 max-width: 500px;
}

input[type="text"].error {
 background-color: #b8d6e1;
}

.iradio_line-grey,
.icheckbox_line-grey,
.icheckbox_square-grey {
 margin-right: 20px; 
 float: right;
}


.submit {
  font-family: 'Oswald', 'Lato', sans-serif; 
  background-color: #445571;
  color: #FFFFFF;
  height: 40px;
  width: 80px;
  padding: 5px 10px;
  margin: 10px 0px 2px 0px;
  border: 0px solid;
  text-align: center;  
}

.upload {

}


/*-----------------------------------------------
  Elements
  -----------------------------------------------*/

#give,
#header,
#client_header, 
#client_navigation,
#content,
#sponsor,
#footer,
#search,
#menu3 {
   padding: 10px;
   max-width: 900px !important;
   margin-left:	auto;
	margin-right: auto;
	clear: both;
}

#search, #q {
   clear: both;
   float: left;
   height: 35px;
   margin: 0 0 10px 10px;
   width: 300px;
   background: white url("https://www.whatisbiotechnology.org/assets/icons/search.png") right no-repeat;
   font-size: 16px;
}


#content {
  padding-top: 60px;
  min-height: 400px;
  margin-bottom: 40px;
}

#content.client_content {
  padding-top: 20px;
  padding-bottom: 60px;
}

.line, .line-1 {
   float: left;
   clear: both;
   width: 100%;
   border-bottom: 1px solid #bab3ad;
   height: 1px;
}

.line-1 {
   margin-bottom: 30px;
}

.noline {
   float: left;
   clear: both;
   width: 100%;
   border-bottom: 1px solid #FFFFFF;
   height: 0px;
}

.line-above-1 {
	margin-top: 30px;
	padding-top: 5px;
  	border-top: 1px solid #bab3ad;
  	width: 50%;
}

.span {
 float: left;
 clear: both;
 display: block;
 width: 100%;
 margin: 10px 0px;
 padding: 0px;
}

.bold {
 font-weight: bold;
}

.span1 {
	width: 200px;
	margin-right: 10px;
	font-weight: bold;
}

.mobile-show {
	display: none;
}

#logo {
	width: 400px;	
 	height: 85px;
 	display: block;
   float: left;
   margin-bottom: 10px;
}

.logo-1 {
	font-family: 'Merriweather', 'Lato', sans-serif; 
	font-size: 28px;
	line-height: 28px;
	margin: 0 0 -4px 0;
	padding: 0;
	color: #445571;
}

.logo-2 {
	font-family: 'Merriweather', 'Lato', sans-serif; 
	font-size: 54px;	
	line-height: 54px;
	margin: 0;
	padding: 0;	
	color: #445571;
}

#navigation {
	margin-left: 20px;
	width: 425px;
   float: right;
}

#client_navigation {
	margin-left: -10px;
	width: 900px;
	max-width: 900px !important;
   float: left;
}


#banner {
    overflow: hidden;
    height: 300px;
    border-top: 2px solid #000;
    border-bottom: 4px solid #000;
    float: left;
    clear: both;
    width: 100%;
}

#banner h1 {
    text-align: center;
    font-weight: normal;
    margin: 50px auto 40px auto;
    float: none;
    z-index: 5;
    color: #FFF;
    text-shadow: 1px 1px #000;

}

#header li a,
#client_header li a,
#footer li a {
 	font-family: 'Oswald', 'Lato', sans-serif; 
	text-transform: uppercase;
	color: #4d4d4d;
	float: left;
	display: block;
	text-align: left;
	vertical-align: top;
	margin: 10px 10px 10px 0px;
	list-style-type:	none;
	font-size: 1em;
	padding: 5px 10px;
	text-decoration: none;
}

#footer li a {
	color: #000000;
	font-size: 1em;
}

#header li a:hover,
#client_header li a:hover,
#footer li a:hover {
	background-color: #445571;
	color: #FFFFFF;
}

a.button1 {
 	font-family: 'Oswald', 'Lato', sans-serif; 
	text-transform: uppercase;
	background-color: #445571;
	color: #FFFFFF;
	float: left;
	display: block;
	text-align: left;
	vertical-align: top;
	margin: 10px 10px 10px 0px;
	list-style-type:	none;
	font-size: 1em;
	padding: 5px 10px;
	text-decoration: none;
	font-weight: normal;
}

a.button1:hover {
	color: #F2F2F2;
	background-color: #000000;
	text-decoration: underline;
	font-weight: normal;
}

a.button2 {
 	font-family: 'Oswald', 'Lato', sans-serif; 
	text-transform: uppercase;
	background-color: #445571;
	color: #FFFFFF;
	float: left;
	display: block;
	text-align: left;
	vertical-align: top;
	margin: 1px 10px 0px 0px;
	list-style-type:	none;
	font-size: 1em;
	padding: 3px 6px;
	text-decoration: none;
	font-weight: normal;
}

a.button2:hover {
	color: #4d4d4d;
	background-color: #000000;
	text-decoration: underline;
	font-weight: normal;
}

a.button3 {
   float: right;
   margin-top: 10px;
   width: 250px;
   text-align: center;
   font-weight: normal;
}

p.callout {
	font-family: 'Oswald', 'Lato', sans-serif; 
	color: #445571;
	font-size: 70px;
	line-height: 100%;
}

p.callout-1 {
	font-family: 'Oswald', 'Lato', sans-serif; 
	color: #445571;
	font-size: 24px;
	line-height: 100%;
}

.callout-2,
span.callout-2 {
	font-family: 'Oswald', 'Lato', sans-serif; 
	color: #445571;
	width: 30%;
	float: left;
		font-size: 1.2em;
	font-weight: normal;		
	line-height: 150%;
 	color: #000000;
	text-align: left;
}



label.radio {
	font-family: 'Abel', Helvetica, Arial, sans-serif;
	width: 80%;
	font-weight: normal;
   float: left;
}

/*-----------------------------------------------
  Give banner
  -----------------------------------------------*/
 
 #give {
 	clear: both;
 	padding: 0px;
   margin-bottom: 1em;
 }  	 
 
 #give h3 {
	margin-top: 0px;
	line-height: 140%;	 	
 }	 


/*-----------------------------------------------
  Tables
  -----------------------------------------------*/

/*Three columns */

.col-2-1 {
 width: 48%;
 float: left;
}

.col-2-2 {
 width: 48%;	
 float: right;
 clear: right;
}

.col-2-1-a {
 width: 78%;
 float: left;
}

.col-2-2-a {
 width: 18%;	
 float: right;
 clear: right;
}

.col-2-1-b {
 width: 65%;
 float: left;
}

.col-2-2-b {
 width: 34%;	
 text-align: right;
 float: right;
 clear: right;
}

.img-border,
.col-2-2-b img {
 border: 1px solid #000000;
 width: 100%;
}

.col-2-container {
 width: 100%;
 float: left;
 clear: both;
 margin-top: 20px;
 margin-bottom: 20px; 
}


/*Three columns */

.col-3-1 {
 width: 32%;
 float: left;
}

.col-3-2 {
 width: 32%;
 float: left;
}

.col-3-3 {
 width: 32%;	
 float: right;
 clear: right;
}

/*Three columns: wide, narrow, narrow */
.col-3-1-a {
 width: 68%;
 float: left;
}

.col-3-2-a {
 width: 15%;
 float: left;
 text-align: right;
}

.col-3-3-a {
 width: 15%;	
 float: right;
 clear: right;
 text-align: right;
}

/*Four columns */

.col-4-1 {
 width: 24%;
 overflow: hidden;
 white-space: nowrap;
 float: left;
}

.col-4-2 {
 width: 24%;
 overflow: hidden;
 white-space: nowrap; 
 float: left;
}

.col-4-3 {
 width: 24%;
 overflow: hidden;
 white-space: nowrap; 
 float: left;
}

.col-4-4 {
 width: 24%;
 overflow: hidden;
 white-space: nowrap; 	
 float: right;
 clear: right;
}


/*Five columns */

.col-5-1 {
 width: 19%;
 padding-left: 4px;
 overflow: hidden;
 white-space: nowrap;
 float: left;
}

.col-5-2 {
 width: 19%;
 padding-left: 4px; 
 overflow: hidden;
 white-space: nowrap;
 float: left;
}

.col-5-3,
.col-5-4-wide {
 width: 19%;
 padding-left: 4px;
 overflow: hidden;
 white-space: nowrap;
 float: left;
}

.col-5-4-wide {
 width: 70%;
}

.col-5-4,
.col-5-4-wide {
 width: 19%;
 padding-left: 4px;
 overflow: hidden;
 white-space: nowrap;
 float: left;
}

.col-5-4-wide {
 width: 34%;
}

.col-5-5,
.col-5-5-narrow {
 width: 19%;	
 overflow: hidden;
 white-space: nowrap;
 float: right;
 clear: right;
}

.col-5-5-narrow {
 width: 5%;
 text-align: right;	
}


/*-----------------------------------------------
  Paypal
  -----------------------------------------------*/

#donate {
 margin: 0px 0px 20px 0px; 
 width: 100%;
 clear: both;
 float: left;
 text-align: center;
 overflow: auto;
}

#donate a.donate {
 display: inline-block;
 font-family: 'Oswald', 'Lato', sans-serif; 
 font-size: 36px;
 color: #252525;
 text-align: center;
 padding: 14px 30px;
 margin: 0;
 background: #FFC000;
 border: 0;
 cursor: pointer;
 outline: none;
 border-radius: 8px;
}

#donate a.donate:hover{ 
	background: #252525; 
	text-decoration: none;
}

.payment_details{
	width:85%;
}


/*-----------------------------------------------
  Tables
  -----------------------------------------------*/

table {
 table-layout: fixed;
 float: left;
 clear: both;
 cellspacing: 0;
 padding: 0;
 border-collapse: collapse;
}	


.table-1 {
 table-layout: fixed;
 width: 100%;
 line-height: 150%;
 text-align: left;
 vertical-align: top; padding: 0px;
 border: 0px;
 border-top: 1px solid #445571;
 border-bottom: 1px solid #445571;
 margin-bottom: 40px;
}

.th-1, .th-2, .th-3, .th-2-1, .th-3-1 {
 border-bottom: 1px solid #445571;
 text-align: left;
 vertical-align: top;
}

.tr-2 {
 border-bottom: 1px solid #bab3ad;
 text-align: left;
 vertical-align: top;
 width: 100%;
 margin: 0px;
 padding-top: 5px;
 padding-bottom: 5px;
}

.tr-3 {
 border-top: 1px solid #bab3ad;
 text-align: left;
 vertical-align: top;
 width: 100%;
}

.th-1,
.td-1 {
 width: 100px;
 text-align: left;
 margin: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}	
	
.th-2,
.td-2 {
 width: 300px;
 text-align: left;
 margin: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

.th-2-1,
.td-2-1 {
 width: 200px;
 text-align: left;
 margin: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

.th-3,
.td-3 {
 width: 150px;
 text-align: left;
 margin: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

.th-3-1,
.td-3-1 {
 width: 250px;
 text-align: left;
 margin: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

.th-4
.td-4 {
 width: 150px;
 text-align: left;
 margin: 5px;
}

.th-5
.td-5 {
 width: 150px;
 text-align: left;
 margin: 5px;
}


/*-----------------------------------------------
  Pagination
  -----------------------------------------------*/
  
#pagination {
 margin-left:	auto;
 margin-right: auto;
 float: left;
 text-align: center;
 width: 100%;
 margin-bottom: 30px;
}

#pagination a,
#pagination .currentpage {
	font-family: 'Abel', Helvetica, Arial, sans-serif;
 	font-size: 1em;
	border: 1px solid #000000; 
	color: #000000;	 
	float: left;
	margin-left: 2px;
	padding:	1px 10px 1px 10px;	
	text-decoration: none;
	cursor: pointer;
	text-align: center;	
}

#pagination .currentpage {
	padding:	2px 10px 3px 10px;	
}

#pagination a:hover,
#pagination .currentpage {
	color: #FFFFFF;
	background-color: #445571; 	 
}

#pagination a .previous {
	width: 64px;
	float: left; 
}

#pagination a .next {
	width: 38px;
	float: left; 
}

/*-----------------------------------------------
  Drop down menu for exhibitions.
  -----------------------------------------------*/

#menu3 {
 color: #FFFFFF;
 padding: 10px;
 margin-bottom: 40px;
 clear: both;
 max-width: 900px !important;
 margin-left:	auto;
 margin-right: auto;
 clear: both;
}

#menu3 a,
#menu3 li {
 color: #FFFFFF;
}

#menu3 li a {
 font-size: 1.2em;
}

#menu3-container {
 background-color: #445571;
 overflow: auto;
 width: 100%;
 float:left;
 clear: both;
 display: none;
 z-index: 1;
}

#menu3-container-1 {
 background-color: #445571;
 overflow: auto;
 width: 50%;
 float:left;
 clear: both;
 padding: 0px 5px;
}

#menu3-1 {
 padding-top: 10px;
 width: 50%;
 float: left;
 background-color: #445571;	
}	

#menu3-1-1 {
 padding-top: 10px;
 width: 100%;
 float: left;
 background-color: #445571;	
}	

#menu3-1 ol {
list-style-type:none;
padding: 5px;
}

#menu3-1 ol li:hover,
#menu3-1-1 ol li:hover {
background-color: #4d4d4d;
}

#menu3-1 ol li a:hover,
#menu3-1-1 ol li a:hover {
text-decoration: none;
}

#menu3-2 {
 padding-top: 10px;
 width: 50%;
 float: right;
 background-color: #445571;
}

#menu3-2 ol {
list-style-type:none;
padding-left: 5px;
}

#menu3-2 ol li:hover {
background-color: #4d4d4d;
}

#menu3-2 ol li a:hover {
text-decoration: none;
}

.lightbox img {
 width: 100%;
}

.profile {
    width: 40%;
    text-align: right;
    float: right;
    margin-top: 1em;
    padding: 0px 0px 12px 8px;

}

p.caption {
	margin-bottom: 0px;
}

#back {
 float: left;
 text-align: left;
}
	
#forward {
 float: right;
 text-align: right;
}


#centre {
  margin: 0 auto;
}


#back a.button1,
#forward a.button1 {
 margin-left: 0px;
 margin-right: 0px;
}

.video1 {
 width: 850px; 
 height: 478px; 
 overflow:hidden;
 position:relative;
}

.video1 iframe {
 width: 100%; 
 height: 56%;
 left:0;
 top:0;
 position:absolute; 
}


/*-----------------------------------------------
  Social links at bottom of page.
  -----------------------------------------------*/

#content {
   min-height: 90%;
}

#content.client_content {
   padding-bottom: 0px;
}

#social {
	padding: 10px 0px;
	padding-bottom: 60px;
   max-width: 900px !important;
   margin-left: auto;
   margin-right: auto;
   clear: both;
}