/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 100% Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* let's give blockquotes *some* default styling, because unstyled blockquotes are dangerous */
blockquote {padding: 16px; background: #eee;}

h1 {font-size: 1.25em; padding: 10px 0 5px 10px;} /*20px*/
h2 {font-size: 1.125em; padding: 5px 0 5px 10px;} /* 18px*/
h3 {font-size: 1em; padding: 5px 0 5px 10px;} /* 16px*/
p {font-size: 0.875em; line-height: 1.5; padding: 5px 10px;}
li {font-size: 0.875em;}
p:last-child {padding: 5px 10px 10px 10px;}

	#content-main a:link {color: green; text-decoration: none; border-bottom: 1px dashed #CCC;}
	#content-main a:visited {color: orange;}
	#content-main a:hover {color: orange; border-bottom: 1px dashed orange;}
	#content-main a:active {color: green;}

textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}


/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {
body {}
#fixedbkg {background-image: url(../images/bkg-elephants-400.jpg); position: fixed; height:100%; width:100%; z-index: -1;}
#wrapper {margin: 0 2%;}
#banner {display: block; margin: 0 0 2% 0; background: url(../images/bkg-trans1.png) top left repeat;}
	.logocc {float: left; width: 130px; margin: 1% 3% 1% 1%;}
	#byline {margin: 0;}
		#byline p { text-align: right; font-size: 0.8em; line-height: 1.1;}
			#icons {display: none;}
			.icon {display: none;}	

#content-top {}	
#content-intro {margin: 0;}
 #content-intro img {display:block; width: 200px; margin: 10px auto;}
	#content-intro article {background: url(../images/bkg-trans1.png) top left repeat;}
	#content-intro h1, #content-intro p {text-align: center;}

nav {display:block; margin: 0 0 2% 0;}
	nav ul {}
	nav li {float: left; width: 100%; text-align: center; }
	nav li a {display: block; padding: 10px 0; margin: 0; text-decoration: none; font-weight: bold; color: #fff; font-size: 1.125em; background: url(../images/bkg-trans2.png) top left repeat;}
	nav li a:hover {color: #000; background: url(../images/bkg-trans1.png) top left repeat;}
		
#content-interest {display: none;}

#content-sub {display: block; float: left; width: 100%; margin: 0 0 2% 0;}
#content-sub article {margin: 0 0 1% 0;}	
	#content-sub a {display: block; width: 100%; text-decoration: none; color: #000;background: url(../images/bkg-trans1.png) top left repeat;}	
	#content-sub a:hover {display: block; width: 100%; text-decoration: none; color: #fff;  background: url(../images/bkg-trans2.png) top left repeat;}
	#content-sub h1 {text-align: center;}
	#content-sub p {display: none;}
	
#content-main {display: block; float: left; width: 100%; margin: 0 0 2% 0; padding-bottom: 1%; background-color: #FFFEFB;}
	#content-main ul {margin: 0 0 10px 10px;}
		#content-main li {list-style-type: disc; list-style-position: inside;}

#content-other {display: block; float: left; width: 100%; margin: 0 0 2% 0; padding-bottom: 1%; background-color: #F4EDD5;}

footer {display: block; float: left; width: 100%; padding-bottom: 1%;  background-color: #EADCAE;}
	address {font-style: inherit;}
	#contactform {width: 100%; float: none; display: block;}
		#contactform .txtinput {width: 95%; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform textarea {width: 95%; min-height: 100px; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform input#name {background: #fff url(../images/icon-pers-sm.png) 5px 4px no-repeat;}
		#contactform input#subject {background: #fff url(../images/icon-env-sm.png) 5px 4px no-repeat;}
		#contactform textarea#message {background: #fff url(../images/icon-doc-sm.png) 5px 4px no-repeat;}
		#contactform #submitbtn {margin-left: 10px; padding: 5px 10px; border-radius: 4px; text-decoration: none; border: none; color: #fff; background-color: #637537;}

#copywrite {display: block; float: left; width: 100%;}
}
/* ============================== Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
body {}
#fixedbkg {background-image: url(../images/bkg-elephants-800.jpg); position: fixed;  height:100%; width:100%; z-index: -1;}
#wrapper {}
#banner {display: block; margin: 0 0 2% 0; background: url(../images/bkg-trans1.png) top left repeat;}
	.logocc {float: left; width: 130px; margin: 2% 0 2% 2%;}
	#byline {float:right; display: block; width: 65%; margin: 1% 2% 2% 0;}
		#byline p {float:left; display: inline-block; width: 65%; font-size: 0.8em; line-height: 1.2;}
			#icons {float:right; display: inline-block; margin-top: 1%; width: 90px;}
			.icon {float:right; display: inline; max-width: 60%;}

#content-top { }
#content-intro {display: block; float: left; width: 60%; min-width: 355px; margin: 0 0 2% 0;}
	#content-intro img {float: left; width: 150px; margin: 10px;}
	#content-intro article {width: 100%; min-width: 355px; background: url(../images/bkg-trans1.png) top left repeat;}

nav {display: inline-block; width: 100%; min-width: 355px; margin: 0 0 2% 0;}
	nav ul {}
	nav li {float: left; width: 50%; text-align: center; }
	nav li a {display: block; padding: 10px 0; margin: 0; text-decoration: none; font-weight: bold; color: #fff; background: url(../images/bkg-trans2.png) top left repeat;}
	nav li a:hover {color: #000; background: url(../images/bkg-trans1.png) top left repeat;}

#content-interest {display: block; float: left; width: 60%; min-width: 355px; margin: 0 0 2% 0; }
	#content-interest article { min-height: 170px; background: url(../images/bkg-trans1.png) top left repeat; }
	#content-interest img {float: left; max-height: 125px; padding: 10px 10px 0 10px;}

#content-sub {display: block; float: left; width: 97%; margin: 20% 0 0 3%;}
#content-sub article {float:left; width: 30%; min-height: 180px; background: url(../images/bkg-trans2.png) top left repeat; color: #fff; text-align: center;}
	.centerbox {margin: 0 3%;}	
	#content-sub a {display: block; width: 100%; text-decoration: none; color: #fff;}	
	#content-sub a:hover {display: block; width: 100%; min-height: 180px; background: url(../images/bkg-trans1.png) top left repeat; text-decoration: none; color: #000; }

#content-main {display: block; float: left; width: 100%; margin: 2% 0 2% 0; padding-bottom: 1%; background-color: #FFFEFB;}
	#content-main ul {margin: 0 0 10px 10px;}
		#content-main li {list-style-type: disc; list-style-position: inside;}

#content-other {display: block; float: left; width: 100%; margin: 0 0 2% 0; padding-bottom: 1%; background-color: #F4EDD5;}
	#content-other ul {margin: 0 0 10px 10px;}
		#content-other li {list-style-type: disc; list-style-position: inside;}

footer {display: block; float: left; width: 100%; padding-bottom: 1%; background-color: #EADCAE;}
	footer article {-webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px;}
	footer h1 {-webkit-column-span: all; column-span: all;}
	address {font-style: inherit;}	
	#contactform {width: 100%; float: none; display: block;}
		#contactform .txtinput {width: 90%; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform textarea {width: 90%; min-height:100px; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform input#name {background: #fff url(../images/icon-pers-sm.png) 5px 4px no-repeat;}
		#contactform input#subject {background: #fff url(../images/icon-env-sm.png) 5px 4px no-repeat;}
		#contactform textarea#message {background: #fff url(../images/icon-doc-sm.png) 5px 4px no-repeat;}
		#contactform #submitbtn {margin-left: 10px; padding: 5px 10px; border-radius: 4px; text-decoration: none; border: none; color: #fff; background-color: #637537;}

#copywrite {display: block; float: left; width: 100%;}
}

/* ==============================  Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
body { /*background: url(../images/bkg-site1.png) top center no-repeat, url(../images/bkg-elephants-1980.jpg) center center no-repeat; background-attachment: fixed;*/}
#fixedbkg {background: url(../images/bkg-site1.png) top center no-repeat, url(../images/bkg-elephants-1980.jpg) center center no-repeat; position: fixed; height:100%; width:100%; z-index: -1;}
#wrapper {margin: 0 auto; max-width: 1000px;}

#banner {margin: 0 0 2% 0; background: url(../images/bkg-trans1.png) top left repeat;}
	.logocc {float: left; display: block;width: 130px; margin: 1% 2% 1% 2%;}
	#byline {float:right; display: block; width: 60%; margin: 0% 2% 1% 2%;}
		#byline p {float:left; display: inline-block; width: 65%; font-size: 0.875em; line-height: 1.3;}
			#icons {float:right; display: inline-block; width: 120px; margin-left: 2%;}
			.icon {float:right; display: inline; max-width: 60%;}

#content-top {}
#content-intro {display: block; float: left; width: 66%; margin: 0 0 2% 0;}
	#content-intro img {float: left; width: 150px;}
	#content-intro article { width: 100%; min-height: 200px; background: url(../images/bkg-trans1.png) top left repeat;  /* float: left; width: 62%; position: relative; z-index: 10; top: -205px; left: 170px; background: none; */}

nav {display: inline-block; width: 100%; margin: 0;}
	nav ul {}
	nav li {float: left; width: 50%;  text-align: center; font-weight: bold;}
	nav li a {display: block; padding: 10px 0; text-align: center; text-decoration: none; color: #fff; background: url(../images/bkg-trans2.png) top left repeat;}
	nav li a:hover {color: #000; background: url(../images/bkg-trans1.png) top left repeat;}
	
#content-interest {display:block; float: left; width: 30%; min-width: inherit; margin: 0 0 23% 4%;}
	#content-interest article {margin: 0 0 0 0;  background: url(../images/bkg-trans1.png) top left repeat; }

#content-sub {display: block; float: left; width: 94%; margin: 20% 3% 2% 3%;}
	#content-sub article {float: left; width: 30%; min-height: 140px; background: url(../images/bkg-trans2.png) top left repeat; color: #fff; text-align: center;}	
	.centerbox {margin: 0 5%;}	
	#content-sub a {display: block; width: 100%; text-decoration: none; color: #fff;}	
	#content-sub a:hover {display: block; width: 100%; min-height: 140px; text-decoration: none; color: #000;  background: url(../images/bkg-trans1.png) top left repeat;}

#content-main { }
	#content-main  {float: left; width: 100%; background-color: #FFFEFB;  margin: 0 0 2% 0; padding-bottom: 1%;}
	.twocol {-webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; }
	.twoblock {float: left; width: 50%;}
	#content-main h1 {-webkit-column-span: all; column-span: all;}
	#content-main ul {margin: 0 0 10px 10px;}
		#content-main li {list-style-type: disc; list-style-position: inside;}
	
#content-other { }
	#content-other  {float: left; width: 100%; background-color: #F4EDD5;  margin: 0 0 2% 0; padding-bottom: 1%;}
	#content-other h1 {-webkit-column-span: all; column-span: all;}
	#content-other ul {margin: 0 0 10px 10px;}
		#content-other li {list-style-type: disc; list-style-position: inside;}
	
footer {float:left; width: 100%; padding-bottom: 1%; background-color: #EADCAE;}
	footer article {-webkit-columns: 3 200px; -moz-columns: 3 200px; columns: 3 200px;}
	footer h1 {-webkit-column-span: all; column-span: all;}
	address {font-style: inherit;}	
	#contactform {width: 100%; float: none; display: block;}
		#contactform .txtinput {width: 90%; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform textarea {width: 90%; min-height:100px; padding: 5px 5px 5px 30px; margin: 5px 10px; border: 2px solid #ccc; border-radius: 4px;}
		#contactform input#name {background: #fff url(../images/icon-pers-sm.png) 5px 4px no-repeat;}
		#contactform input#subject {background: #fff url(../images/icon-env-sm.png) 5px 4px no-repeat;}
		#contactform textarea#message {background: #fff url(../images/icon-doc-sm.png) 5px 4px no-repeat;}
		#contactform #submitbtn {margin-left: 10px; padding: 5px 10px; border-radius: 4px; text-decoration: none; border: none; color: #fff; background-color: #637537;}
	#copywrite {display: block; float: left; width: 100%;}
}


/* Print styles
-------------------------------------------------------------------------------*/
@media print {



}