/* Reset & Basics */
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, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, label, legend, table, caption, 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; vertical-align: baseline; font: inherit; font-size: 100%; }
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-spacing: 0; border-collapse: collapse; }
		
/* Basic Styles */
body { background: url(../images/jhb-bg.jpg) fixed repeat-x left bottom #EEE; background-size: contain; color: #000; font: 13px "Open Sans", Helvetica, Arial, sans-serif; }	
body p { margin-bottom: 10px; }
a { text-decoration: none; color: #73B532; }
a:hover {cursor: hand}
.button { cursor: pointer;}
p a { text-decoration: none; }
p a:hover { text-decoration: underline; color: #000; cursor: hand }
strong { font-weight: 600; }
.marginbottom {margin-bottom: 20px; background-color: #fff; overflow: auto; }

img { max-width: 100%; }

/* Floats and positions*/
.left { float: left; }
.right { float: right; }
.bottom { position: absolute bottom; }

/* Fonts */
h1, h2, h3, h4, h5 { margin-bottom: 10px; font-weight: 300; font-family: 'Roboto', Arial, Helvetica, sans-serif; line-height: 130%; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a { color: #73B532; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration: none; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 14px; font-weight: 300; margin-bottom: 5px }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 16px; font-weight: 600; color: #73B532; }

/* Header and Navigation */
nav { margin: 0 auto; background: #73B532; width: 960px; padding: 0; }
.newnav {  background: #417505!important; }
nav ul { list-style: none;  display: inline-table; margin:0; padding:0px;}
nav ul li:hover > ul { display: inline-block; width: auto; text-align: left;margin:0; }
nav ul:after { content: ""; clear: both; display: inline-block; }
nav ul li { float: left; padding: 0; margin: 0; position: relative; margin:0;padding:0px;}
nav ul li:hover {   }
nav ul li a { display: block; padding: 10px 18px; color: #fff; text-decoration: none; color: #fff; background: #417505; font-size: 14px; font-weight: 300;  }
nav ul li a:hover { text-decoration: none; background-image: url(../images/hover-bg.png); background-position: left bottom; background-repeat: repeat-x; color: #fff; }
nav ul ul { display: none; z-index: 1000; }
nav ul ul { position: absolute; top: 100%; left: auto;}
nav ul ul li { float: none; border-top: 1px solid #73B532; white-space: nowrap}
nav ul ul li a { padding: 10px; color: #fff; padding: 10px 20px;}	
nav ul ul li a:hover { background: #417505; background-image: url(../images/hover-bg.png); background-position: left bottom; background-repeat: repeat-x;   }
nav ul ul ul { position: absolute; left: 100%; top:0; 	}


#themes { background: url(../images/white-down-arrow.png) right center no-repeat;}
#search { float: left; margin: 0; padding: 10px 30px; width: 200px; border: solid 0px red; background: url(../images/white-arrow.png) no-repeat; background-position: 10px; color: #fff; font-weight: 300; font-size: 14px; font-family: 'Roboto', Arial, Helvetica, sans-serif; }

::-webkit-input-placeholder { color:white;} 
:-moz-placeholder {color:white;}
::-moz-placeholder {color:white;}
:-ms-input-placeholder { color:white;}

/* header */
#logoheader { overflow: auto; border: solid 0px red;}
.introcopy { float: left; width: 610px; padding: 20px 30px; height: 104px; border: solid 0px blue; color: #000;}
#logo { float: right; margin: 20px 30px; width: 225px; height: 104px;  }

/* Page Styles */
.container { overflow: auto; margin: 0 auto; width: 960px; height: auto; background: #fff; display: block;}
.arrows  {margin:0;padding:0;}
.arrows li { list-style:none; margin-bottom: 7px; padding-left: 15px; background: url(../images/li-arrow.svg) left top no-repeat; background-position-y: 2px; margin-left:0px;}
.arrows li a { margin:0;padding:0;list-style:none;}
.arrows li a:hover { color:#000; text-decoration:underline; }
#newsletter { margin-top: 30px;}
.pintro { font-weight: 600; font-size: 14px;}
.featureimage { background-size: cover; margin-bottom: 20px; width: 960px; height: 250px; background-position: left top; display: block; }
.pullout { color: #73B532; font-size: 20px; border-left: 1px solid #eee; padding-left: 20px; font-weight: 300; font-family: 'Roboto', Arial, Helvetica, sans-serif;  }

/* Front Page */
.themesblock { overflow: hidden; width: 320px; height: 250px; margin: 0; padding: 0; border: none; position: relative; float: left; }
.themesblock .themesheader { padding: 0px; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background-color: rgba(51,95,0,0.7);  }
.themesblock .themesheader h3 { font-weight: 100; font-size: 14px; color: #fff; padding: 0; margin: 10px; background: url(../images/white-arrow.svg) no-repeat right center;  }
.themesblock .themesheader h3 a {color: #fff;  }
.themesblock .themesheader h3 a:hover {text-decoration: none;  }
.themesblock .themesheader:hover { background-color: rgba(51,95,0,0.9); }

/* About */
.timeline {margin-bottom: 20px; }

/* news */
.newsimg { overflow: hidden; width: 200px; height:auto; float: right; margin-left:30px;margin-bottom:20px;}
.newsrow { overflow: auto; margin: 0 30px 20px 30px; border-bottom: solid 1px #73B532 ; padding-bottom: 20px; }
.newsrow:last-child { border-bottom: none; margin-bottom: 50px}

/* People */
.peopleimg { overflow: auto; width: 160px; height: 220px; background: #ccc; background-size: cover; float: left; }
.peoplerow { overflow: auto; margin: 0 30px 20px 30px; border-bottom: solid 1px #73B532 ; padding-bottom: 20px; }
.peoplerow:last-child { border-bottom: none; margin-bottom: 50px}

/* Links */
.linksrow { overflow: auto; margin-bottom: 20px; border-bottom: solid 1px #ccc;}
.linksrow:last-child { border-bottom: none; }
.linksrow li { display: table; margin-bottom: 20px; padding: 0 0 20px 0; border-bottom: dashed 1px #eee; list-style: none; list-style-image: none; }
.linksrow li:last-child { border-bottom: none; }
.linksimg { max-width: 250px; max-height: 100px; float:left; margin-left: 0; }
.linkstext { float: left; padding-left: 20px; width: 520px; height: auto;  }
.linkstext h5 { margin: 20px 0 0 0; vertical-align: middle;}

/* Projects */
.projects { width: 100%; height: auto; overflow: auto; margin-bottom:0px;padding-bottom:20px;}
.projectsimg { background-size: cover; background-position: center top; float: right; margin: 0px 0px 20px 20px; width: 180px; height: 120px; display: block;  }
.projectstext {float: right; width: 300px; }
.project_themes {border-bottom: dotted 1px #ccc;margin-bottom:20px;}

/* Contact */
#map { margin-top: 30px; width:440px; height:380px; }
#name, #email { float: right; margin-bottom: 10px; padding: 7px; width: 330px; height: auto; border: 1px solid #ccc; }
#message { float: right; margin-bottom: 10px;  padding: 7px; width: 330px; height: 200px; border: 1px solid #ccc;}
.checkboxcopy { display: inline-block; margin-bottom: 10px; margin-left: 10px; }

/* Columns */
.container .column, .container .columns { display: block; float: left; margin-left: 30px; }
.row { display: block; overflow: auto; margin-bottom: 20px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

/* Base Grid */
/* .container .three.columns, .container .twelve.columns, .container .one-third.column, .container .one-half.column, .container .two-thirds.column { overflow: auto; } */
.container .one.column { width: 900px; }
.container .three.columns { width: 150px; }
.container .twelve.columns { width: 710px; }
.container .one-third.column { width: 280px; }
.container .one-half.column { width: 440px; }
.container .two-thirds.column { width: 600px; }

/* Clearing */
.container:after { display: block; visibility: hidden; clear: both; height: 0; }
.linksrow li

/* #Buttons */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { padding: 7px; border: none; border-radius: 5px; background: #73B532; color: #fff; font-size: 12px; display: inline-block; font-weight: 600; margin: 0; }
.button:hover, button:hover. input:hover  {cursor: pointer; cursor: hand;}


/* Footer */
#footer { overflow: auto; padding: 30px; width: 900px; background: #1C1A18; color: #888; }
.footerdetails { float: left; font-size: 11px; line-height: 130%;}
.footercontact, .footercontact a { float: right; color: #888; text-decoration: none;font-size: 12px;}
.footercontact a:hover {color: #fff; }
.highlight { display: inline-block; width: 15px; color: #73B532; font-weight: 700; }

/* MailChimp */
/* MailChimp Form Embed Code - Classic - 08/17/2011 */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:0; margin-bottom: 50px; }
/* #mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;} */
#mc_embed_signup input {border:1px solid #ccc; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; border: none; }
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
#mc_embed_signup .asterisk {color:#c60; font-size:150%; vertical-align: middle;}
#mc_embed_signup .mc-field-group .asterisk {position:absolute; top:25px; right:10px;}        
#mc_embed_signup .clear {clear:both;}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,500,700);

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #logo { background-image: url(../images/Logo@2x.png); background-size: contain; }
}