/*
Theme Name: 	treaties
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	Treaties matter
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/


.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}


/*
/* http://meyerweb.com/eric/tools/css/reset/   v2.0 | 20110126  License: none (public domain) */ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; line-height: 1em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/*clearfix*/
.cf:before,.cf:after {content: " "; display: table; }.cf:after {clear: both;}.cf { *zoom: 1; }

/*styles*/
body { font-family: "Trebuchet MS", times, arial, helvetica, sans-serif;-webkit-font-smoothing: antialiased; }
img { display: block; }
.copy img { display: inline-block; }
a, .mobileNav > ul, #mobileNavToggle img, .copy .wp-caption, .copy .wp-caption > a img { text-decoration: none; color: white;-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
p { margin-bottom: 1.5em;}
strong { font-weight: bold;}
.wp-video { margin-bottom: 1em; }
.highlight { font-weight: bold; }
.clear { clear:both; }

.copy .wp-caption { border: 1px solid #ccc; background: #fff; margin-bottom: 20px; padding: 10px; position: relative; border-radius: 5px; }
/* .copy .wp-caption:hover { background: #eee;} */
.copy .wp-caption > a {display: block; float: left; margin-right: 12px; background: #7b2331; line-height: 1; padding: 5px; border: 1px solid #aaa; }
.copy .wp-caption > a:hover { background: #fff;}
.copy .wp-caption > a img { display: block;}
.copy .wp-caption > a img:hover {   }
.wp-caption .wp-caption-text {  font-size: 14px; text-align: left; color: #666;  }
.wp-caption .wp-caption-text p { margin-bottom: 10px;}
.copy .wp-caption .popup { position: absolute; opacity: .8; left: 20px; top: 25px; z-index: 5;}
body .slb_template_tag p { font-size: 16px; font-family: "Trebuchet MS", times, arial, helvetica, sans-serif;}

.mejs-container {
  width: 50% !important;
  height: auto !important;
  padding-top: 37%;
  
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
.mejs-container, .mejs-embed, .mejs-embed body {
background:transparent!important;
}
/**************************************/
/*navigation styles*/
.nav li { display: inline-block; }
.nav li a { display: block; }

/**************************************/
/*WRAPPER*/
.siteWrapper { width: 1024px; margin: 0 auto; position: relative; /*background: url(images/bg-dev.jpg) no-repeat; height: 800px ;*/ }

/**************************************/
/* HEADER/ PRIMARY NAV*/
.primaryNav { position: absolute; top: 90px; right: 0px ;  background: #003468; border-radius: 9px;  }
.primaryNav li a { padding: 12px 20px; border-right: 1px solid #fff; font-size: 14px; font-weight: bold; display: block}
.primaryNav  input#s { border-radius: 8px; outline: 0; border: 1px solid #fff; background: url(images/search-icon.png) 5px 4px no-repeat #003468;  padding: 6px 27px; margin: 6px 20px;  -webkit-appearance: none; color: #fff; }
.primaryNav input#searchsubmit, label { display: none;}
.mainlogo { float: left; margin: 36px 0 0 39px; }
.mobileNav { display: none; }
/**************************************
MAIN
**************************************/

.siteMain {clear: both;float: left; background: #7b2331;  margin: 20px 0px 0px 0px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;  }

/**************************************
SECONDARY NAV
**************************************/
.secondaryNav {float: left; width: 200px; margin-top: 30px; font-size: 14px; }
.secondaryNav li a:hover { background: rgba(255,255,255,.2);}
.secondaryNav.nav li { border-bottom: 2px solid rgba(255,255,255,.6); display: block;}
.secondaryNav li a { display: block;padding: 16px 0 16px 42px; }
.secondaryNav li.current a { font-weight: bold; color: #fbb040 }

/**************************************
CONTENT
**************************************/
.siteContent { padding: 70px 90px 0px 90px; }

/**************************************
COPY
**************************************/
.copy p, .copy li { line-height: 1.5em; font-size: 14px; word-wrap:break-word; }
.copy h1 { font-size: 42px; font-style: italic; line-height: 1em; margin-bottom: .5em; color: #fbb040;}
.copy h2 { font-weight: normal; font-size: 22px; line-height: 1em; margin-bottom: 1em; color: #000;}
.copy blockquote {   padding-left: 10px; margin-left: 0px; border-left: 1px dotted #333; margin-bottom: 1em; }
.page.welcome .copy blockquote {   border-left: 1px dotted #fff; }
.copy blockquote p{  margin-bottom: .5em; }
.treatiesNav { margin-top: 30px;}
.treatiesNav li { display: block;}
.cards { float: right; margin-right: 30px;}
.copy a {  text-decoration: underline;}
em {font-style: italic}
/**************************************
FOOTER
**************************************/
.footerContainer { background: #003468; clear: both; }
.siteFooter { padding: 30px; width: 964px; margin: 0 auto; clear: both;}
.footerNav { float: left;}
.logosNav {float: right;}
.logosNav li { margin-left: 20px;}
.logosNav img { height: 60px;}
.logosNav a.si-logo { margin-top: -50px;}
.logosNav .si-logo img  { height: 40px;  }

/**************************************
VIDEO GALLERY LINK
**************************************/
.videoGallery { position: fixed; right: 0; bottom: 180px; width: 77px; height: 117px; background: url(images/Video-Gallery-Button.png) }
.videoGallery li video { height: 10px; background: red;   }
body.page-id-107 .drawer { border: none;}

/**************************************
HOMEPAGE
**************************************/
body.home .siteMain { background: url(images/bg-home.jpg) no-repeat; width: 1024px; height: 500px;}
body.home .siteMain .pageBackground { background: none; width: ;}
#homeslider { float: left; margin-left:105px; margin-top: 90px; box-shadow: 5px 5px 20px rgba(1,1,1,.75);   }
#homeslider a { box-shadow: 5px 5px 20px rgba(1,1,1,.75);   }
#homeslider img { width: 200px;  height: auto;}
body.home .siteContent { width: 500px; padding: 0; float: right; margin-top: 130px; margin-right: 90px; }
body.home h1, body.home h2, body.home h3 { color: #e3d5c2; font-size: 36px; font-weight: bold; line-height: 1em;  margin-bottom: 1em;}
body.page.home .copy { color: #fff; }
body.page.home .copy a { background: none; color: #fbb040; border:none; display: inline-block;}
body.page.home .copy a:hover { background: none; color: #fff; text-decoration: underline; }

/**************************************
WELCOME PAGE
**************************************/
body.page.welcome .pageBackground { float:right; background: url(images/scroll-background-home.jpg) no-repeat; padding: 70px 0px 0 30px; width: calc(100% - 230px); width: -moz-calc(100% - 230px); margin: 30px 0px 0 0; min-height:550px; }
body.page.welcome .copy { color: #fff; }
body.page.welcome .copy a { color: #fff; }


/**************************************
Educator PAGE
**************************************/

body.page.educator ul.pdfList a, a.zipFile { padding: 10px 5px 10px 25px; background: url(images/pdfFile.png) no-repeat 5px center; background-color: rgba(1,1,1,.1); margin-bottom: 1px; color: #333; display: block; font-weight: bold; text-decoration: none; }
a.zipFile { background-image: none;}
body.page.educator ul.pdfList {margin-bottom: 40px;}
body.page.educator ul.pdfList a:hover { background-color: transparent; color: #000;}
body.page.educator .gallery li img { display: inline}
body.page.educator h1 em { color: #fff; font-size: .5em;}
body.page.educator .copy h3 {font-size: 18px;}
body.page.educator .drawerToggle {display: none; }

/**************************************
GENERAL PAGE
**************************************/
body.page .pageBackground, body.search .pageBackground { float:right; background: url(images/bg-page-bottom.jpg) repeat-y; padding: 0px 0px 70px 0px; width: calc(100% - 200px); margin: 20px 0px 0 0; min-height: 600px; }
body.page  .copy h3.drawerToggle a { font-size: 24px; background: rgba(0,52,104,.9);  padding: 15px 20px; color: #fbb040; display: block; border-bottom: 1px solid #fff; text-decoration: none; }
body.page  .copy h3.drawerToggle a:hover { color: #003468; background: #fbb040; }
body.page  .copy h3.drawerToggle a.active { background: 0; color: #003468; margin: 14px 0 14px 0; border: 0; padding: 0; }
body.page  .copy h3.drawerToggle a.active:hover { color: #333; }
body.page  .copy h3.drawerToggle:first-child a.active { margin-top: 0; }
.copy .drawer { max-height: 350px; overflow-y: scroll;  position: relative; border-bottom: 5px solid #fbb040; }
/* .copy .drawer .divider { width: 630px; height: 31px; background: url(images/section-shadow2.png) left bottom no-repeat; position: fixed; bottom: 0px; z-index: 5;} */
.copy.nochild .drawer { max-height: none; overflow-y: visible; }

body.page .copy, body.page .copy a { color: #333; }
body.page .siteContent { padding-top: 0px;}

/**************************************
VIDEO PAGE
**************************************/
#videoList p{ font-size: 10px;}
#videoList {   margin: 0px auto;}
#videoList  li {float: left; width: 200px; position: relative;  font-size: 10px; margin-right: 10px;}
#videoList  li img { width: 100%; }

#videoList li > div {width: 200px;height: 110px;background: #fff;margin-bottom: 10px;position: relative;overflow: hidden;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
#videoList li > div a { position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background: red;   opacity: 0; font-size: 0; }
#videoList li > div a:hover { opacity: .2; }
#videoList li { color: #333; }

body #TB_window img#TB_Image { border: 2px solid #444; }
body #TB_window { background: transparent; border: none; }
body .tb-close-icon { color: red;}

#videoGallery { position: absolute; top: 0; left: 0;  background: rgba(0,0,0,.75); display: none;}
#videoLink { display: block;}

/**************************************
SEARCH PAGE
**************************************/
body.search .copy *, body.search .copy a { color: #333; }
body.page .copy h3 { font-weight: bold; font-size: 24px; margin-bottom: 10px;}
body.search .copy h3 { font-weight: bold; font-size: 24px; margin: 10px 0;}
 
/**************************************
MEDIA QUERIES
**************************************/


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

.mobileNav { display: block; position: relative; z-index: 1000; width: 100%; }
#mobileNavToggle { background: black; display: block; padding: 10px;}
#mobileNavToggle:hover { background: #666;}
#mobileNavToggle img { display: inline-block; margin-left: 5px; margin-bottom: -5px; opacity: .7;}
.open #mobileNavToggle img { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);-ms-transform: rotate(180deg); -o-transform: rotate(180deg); }
.page .copy blockquote { border-left-color: #888; }
.mobileNav > ul {left: -100%; position: absolute; width:100%;}
.mobileNav.open > ul { left:0; }
.mobileNav li a { background: #666; display: block; padding: 10px; border-top: 1px solid #fff; }
.mobileNav li a:hover { background: #333;}
.mobileNav li.em a { background: #7b2331; }
.mobileNav li.em a:hover { background: #333; }
.mobileNav li.search  { padding: 10px; background: #003468;  }
.mobileNav li h3 { padding: 10px; font-weight: bold; background: #003468; color: #fff;}

.copy .wp-caption > a  { float: none; }


.siteWrapper, body.home .siteMain, .siteMain { width: 100%; background: #fff; margin-top: 0; }
.siteFooter { width: 100%; padding: 0; margin-top: 20px; clear: both }
.primaryNav, .secondaryNav.nav, .videoGallery, .welcomeImage, #homeslider { float: none; display: none;}
.mainlogo { float: none; margin: 0 5%; display: inline-block; padding-top: 30px;}
body.page .siteMain .pageBackground, .pageBackground, body.page .pageBackground, body.search .pageBackground { float: none; width: 100%; padding: 0; background: #fff; margin-top: 0;  }
body.page.welcome .copy,body.page.home .copy, .copy { color: #333; padding: 0 5%;}
body .siteContent, body.home .siteContent { margin: 0; padding: 0; float: none; }

.copy .drawer { max-height: none; overflow-y: visible; }

.copy h1 { font-size: 36px;}
.copy h3:not(.drawerToggle) { background: #333; color: #fff; margin: 10px 0; padding: 10px;}
.nav li { display: block}


.footerNav, .logosNav { float: none; margin: 20px 5%; padding: 0;}
.footerNav li, .logosNav li {margin:25px 0; }
.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}

.logosNav a.si-logo { margin-top: 25px;}


/**************************************
Educator PAGE
**************************************/
body.page.educator .siteMain { width: 100%;padding-top: 20px; position: relative; }
body.page.educator .siteMain .copy, body.page.educator .siteMain .copy a { color: #111;}
body.page.educator .gallery { background:none; padding-top: 30px; border-top: 1px solid #aaa; color: #333; margin-left: 0px; margin-bottom: 20px; }

body.page.educator .gallery li { float: left;  padding: 0; width: 50%; text-align: center; margin-bottom: 20px;}
body.page.educator .gallery li img { display: inline}
body.page.educator h1 em { color: inherit; font-size: .5em;}



}
@media screen and (max-width:300px) {
.copy .wp-caption > a  img{width: 100%; }

}