/*------------------------------------------------------------
	OPERATIVE AGENCY WEBSITE © OPERATIVE AGENCY 2014
	OA IS STEVE DiPASQUALE AND BRYAN LEMOS BEÇA
------------------------------------------------------------*/

/*------------------------------------------------------------
	GENERAL
------------------------------------------------------------*/

html, body {
	margin:0;
	padding:0;
	background:#FFF;
	color:black;
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px;
	text-align: left;
	/*overflow:auto;*/
	line-height:150%;
	width:100%;
	min-width:1024px;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

footer, header, nav {
    display: block;
}

#content-wrapper {
	width:960px;
	padding-top:30px;
	margin-bottom:50px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	color:black;
}
.nav-wrapper {
	width:960px;
	height:30px;
	margin-left:auto;
	margin-right:auto;
	color:white;
	background:red;
}

.oa {
	padding:10px;
	width:460px;
	float:left;
}

/*------------------------------------------------------------
	MAIN NAV
------------------------------------------------------------*/

.header {
	padding-top:60px;
	margin-top:0px;
	width:960px;
	margin-bottom:40px;
}

nav {
	width:100%;
	height:30px;
	background:black;
	position:fixed;
	top:0px;
	z-index:1000;
}
nav #wrapper {
	width:960px;
	margin:auto;
}


/*------------------------------------------------------------
	LINKS
------------------------------------------------------------*/

a {
	transition: color 0.2s ease-out ;
	-moz-transition:  color 0.2s ease-out;
	-webkit-transition:  color 0.2s ease-out;
	-o-transition:  color 0.2s ease-out;
}
a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

.white-section a, .white-section a:link, .white-section a:visited {
	color:black;
}
.black-section a, .black-section a:link, .black-section a:visited {
	color:white;
}
.white-section a:hover, .white-section a:active, .black-section a:hover, .black-section a:active {
	color:#00A7FF;
}
nav a, nav a:link, nav a:visited {
	text-decoration:none;
	color:white;
}
nav a:hover, nav a:active {
	text-decoration:none;
	color:#00A7FF;
}

/*------------------------------------------------------------
	TYPOGRAPHY
------------------------------------------------------------*/

h1 {
    font-size: 2em;
	padding-bottom:0;
	margin-bottom:0;
}

h1 a, h1 a:link, h1 a:visited {
	color:black;
	text-decoration:none;
}

footer h1 {
	font-size: 2em;
	padding:0px 0 20px 0;
	margin-left:10px;
	margin-top:12px;
	clear:both;
	padding-bottom:0;
	margin-bottom:0;
	width:930px;
}

.anchor {
	color:black;
	cursor:default;
	margin-top:20px;
}

h2 {
	margin:0 0 12px 0;
	padding:0;
}
.heading-left {
	padding:40px 0 0 10px;
	margin-top:20px;
}
.less-margin {
	margin:0;
}
.top-pad {
	margin-top:40px;
}
.top-pad-20 {
	margin-top:18px;
}
h3 {
	font-size:1.65em;
	font-weight:100;
	margin:0 0 6px 0;
	padding:40px 0 10px 0;
}
footer h3 {
	color:white;
}
h4 {
	font-size:1.25em;
	font-weight:100;
	margin:0 0 6px 0;
	padding:0;
}
h5 {
	font-size:1.25em;
	font-weight:400;
	margin:0 0 4px 0;
	padding:0;
}
h6 {
	font-size:1.25em;
	font-weight:100;
	margin:0 0 0 0;
	padding:0;
}

.footnote {
	font-size:11px;
	line-height:150%;
}
sup, sub {
	vertical-align:baseline;
	position:relative;
	top:-0.4em;
}
sub {
	top:0.4em;
}


/*------------------------------------------------------------
	LISTS
------------------------------------------------------------*/

ul,
ol {
    
	margin: 0 0 12px 0;
    padding: 0 0 0 0px;
	list-style-type:none;
}
ul ul {
	font-size:12px;
	margin:5px 0 12px 12px;
}
.menu {
	margin:4px 0 0 40px;
	padding:0 0 0 40px;
}

.menu li {
	margin:0 0 0 0;
	padding:0 0px 0 17.5px;
	display:inline;
}

.menu a, .menu a:link, .menu a:visited {
	text-decoration:none;
}
.menu a:hover, .menu a:active {
	color:#00A7FF;
}

dd {
    margin: 0 0 0 40px;
}

nav ul {
	position:relative;
	left:446px;
	color:white;
    list-style: none;
    list-style-image: none;
	margin:6px 0 0 0px;
	padding:0 0 0 0px;
}
nav ul li:first-child {
	margin:4px 0 0 0;
	padding: 2px 0 0 0px;
	display:inline;
}
nav ul li {
	margin:4px 0 0 0;
	padding: 2px 0 0 18px;
	display:inline;
}
#oa-logo {
	transition: opacity 0.2s ease-out ;
	-moz-transition:  opacity 0.2s ease-out;
	-webkit-transition:  opacity 0.2s ease-out;
	-o-transition:  opacity 0.2s ease-out;
}
#oa-logo {
	float:left;
	margin:0px 0 0 10px;
	z-index:1001;
	width:34px;
	height:18px;
	background-image: url('images/oa-white.png');
	background-size: 34px 18px;
	background-position: top left;
	background-repeat:no-repeat;
	text-indent:-1000px;
	cursor:pointer;
}
#oa-logo:hover, #oa-logo:active {
	opacity:0.5;
}


/*------------------------------------------------------------
	IMAGES
------------------------------------------------------------*/
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
	padding:0 0 0 0;
	margin:0px;
	max-width:100%;
}
iframe {
	padding: 0 0 0px 0;
}
.image-border {
	border-top: 1px solid black;
	border-bottom:1px solid black;
}

/*------------------------------------------------------------
	CONTENT
------------------------------------------------------------*/

.white-section {
	width:100%;
	background-color:white;
	color:black;
	padding:0 0 20px 0;
}
.black-section {
	width:100%;
	background-color:black;
	color:white;
	padding:0 0 40px 0;
}
.section-wrapper {
	width:960px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}

#intro-section {
	position:relative;
	padding:30px 0 0 0;
	margin:0;
}
#top {
	position:relative;
	width:100%;
	top:0px;
	left:0px;
	display:block;
	margin:0;
	padding:0;
}
#top img {
	max-width:100%;
}
#top-wrapper {
	position:relative;
	width:960px;
	margin: 0 auto 0 auto;
	padding:0;
	z-index:900;
	display:block;
}
#title {
	position:absolute;
	bottom:0px;
	left:0px;
	width:960px;
	height:100px;
}
#oa {
	padding:0 0 0 10px;
	margin:0;
	font-size:2.5em;
	font-weight:500;
	float:left;
	color:white;
	z-index:1000;
	text-shadow: black 0em 0em 0.1em
}
#tsod {
	font-size:2.5em;
	font-weight:100;
	margin:0;
	padding:0 0 0 40px;
	color:white;
	float:left;
	z-index:1001;
	text-shadow: black 0em 0em 0.1em
}

.content-panel {
	padding-bottom:24px;
}
.content-right {
	width:460px;
	float:right;
	padding:0 10px 0 10px;
}
.content-left {
	float:left;
	width:460px;
	padding:0 10px 0 10px;
}
.content-full {
	clear:both;
	width:960px;
	padding:0 10px 0 10px;
}
.clear-both {
	clear:both;
}
.conclusion {
	font-size:3em;
	line-height:130%;
	font-weight:100;
}
.exhibition-info {
	width:380px;
	padding: 0 50px 0 40px;
	margin-top:20px;
	border-left: 1px solid gray;

}
.allele-description {
	margin:0;
	padding:0;
	font-weight:100;
}
/*------------------------------------------------------------
	ALLELIC MATRIX
------------------------------------------------------------*/
.allele-wrapper p {
	margin:0;
	padding:0 0 12px 0;
}
.biological {
	color:#1EF91E;
}
.geological {
	color:#BABABA;
}

/*------------------------------------------------------------
	FOOTER
------------------------------------------------------------*/

footer {
	color:white;
	background-color:black;
	width:100%;
	clear:both;
}
#footer-wrapper {
	height:150px;
	font-size:14px;
	width:960px;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	background:black;
}
footer p{
	padding:0px;
	margin:0px;
}
footer h4 {
	margin:0;
	padding:40px 0 0 0;
}

footer a, footer a:link, footer a:visited {
	color:white;
}
footer a:hover, footer a:active {
	color:#00A7FF;
}
#oa-contact {
	float:left;
	width:150px;
	height:80px;
	margin:35px 0 0 10px;
	padding:0 60px 0 0;
	background-image: url('images/oa-white.png');
	background-size: 150px 80px;
	background-position: top left;
	background-repeat:no-repeat;
	text-indent:-1000px;
}
#contact-list {
	float:left;
	padding-top:76px;
}