@charset "UTF-8";
/*
Modified from Linda tutorials 'Ex_Files_CSS_Page_Layout' by mjm
*/

/* desolve color palette
#4C4341     rgb(76, 67, 65)  ASH
#646266      rgb(100, 98, 102)  DULL GRAY
#7B798F     rgb(123, 121, 143)  PEWTER BLUE
#ADA982    rgb(173, 169, 130)  DARK TAN
#D8D5BC   rgb(216, 213, 188)  MED TAN
#EDE4D6   rgb(237, 228, 214)  LIGHT TAN
#667F6A     rgb(102, 127, 106)  DARK GREEN
*/
/*Fonts*/
@font-face {
	font-family: 'Cantarell';
	src: url('../_fonts/Cantarell-Regular-webfont.eot');
	src: url('../_fonts/Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../_fonts/Cantarell-Regular-webfont.woff') format('woff'), url('../_fonts/Cantarell-Regular-webfont.ttf') format('truetype'), url('../_fonts/Cantarell-Regular-webfont.svg#webfont9UOzsjXz') format('svg');
	font-weight: normal;
	font-style:normal;
}

@font-face {
	font-family: 'Cantarell';
	src: url('../_fonts/Cantarell-Oblique-webfont.eot');
	src: url('../_fonts/Cantarell-Oblique-webfont.eot?#iefix') format('embedded-opentype'), url('../_fonts/Cantarell-Oblique-webfont.woff') format('woff'), url('../_fonts/Cantarell-Oblique-webfont.ttf') format('truetype'), url('../_fonts/Cantarell-Oblique-webfont.svg#webfontRl4nowrT') format('svg');
	font-weight: normal;
	font-style:italic;
}

@font-face {
	font-family: 'Cantarell';
	src: url('../_fonts/Cantarell-Bold-webfont.eot');
	src: url('../_fonts/Cantarell-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../_fonts/Cantarell-Bold-webfont.woff') format('woff'), url('../_fonts/Cantarell-Bold-webfont.ttf') format('truetype'), url('../_fonts/Cantarell-Bold-webfont.svg#webfontKr2CkGZp') format('svg');
	font-weight: bold;
	font-style:normal;
}

@font-face {
	font-family: 'Cantarell';
	src: url('../_fonts/Cantarell-BoldOblique-webfont.eot');
	src: url('../_fonts/Cantarell-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'), url('../_fonts/Cantarell-BoldOblique-webfont.woff') format('woff'), url('../_fonts/Cantarell-BoldOblique-webfont.ttf') format('truetype'), url('../_fonts/Cantarell-BoldOblique-webfont.svg#webfontQ1aSR0ux') format('svg');
	font-weight: bold;
	font-style:italic;
}

@font-face {
	font-family: "Cardo";
	src: url("../_fonts/Cardo99s-webfont.eot");
	src: url("../_fonts/Cardo99s-webfont.eot?#iefix") format("embedded-opentype"), url("../_fonts/Cardo99s-webfont.woff") format("woff"), url("../_fonts/Cardo99s-webfont.ttf") format("truetype"), url("../_fonts/Cardo99s-webfont.svg#webfontQ5EXXZTZ") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OstrichSansBold';
	src: url('../_fonts/ostrich-bold-webfont.eot');
	src: url('../_fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../_fonts/ostrich-bold-webfont.woff') format('woff'), url('../_fonts/ostrich-bold-webfont.ttf') format('truetype'), url('../_fonts/ostrich-bold-webfont.svg#OstrichSansBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*Global styles -----------------------------------------------------------------------------------------------------------*/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}



html {
	background: rgb(123, 121, 143);/*PEWTER BLUE */
	background: #FFF;
}

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	
	width:95.33%;			/* width of whole page, changed from 93.33% Aug20, 2013. avoid chopping off .com */
	overflow:hidden;	
		/* This chops off any overhanging divs */
	margin:0 auto;
	margin-top:40px;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
					
	overflow:hidden;
	list-style:disc;
}
.col2 p {
	float:left;
	clear:both;
	
}
.col2 img {
	margin-right:8px;
	}
.col3 ul {
	list-style-type:disc;
	margin-left:15px;
}
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:25%;			/* width of the right column */
	background:#FFF;		/* center column background colour */
}
.threecol .colleft {
	right:50%;			/* width of the middle column */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:46%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:24%;			/* Width of left column content (column width minus padding on either side) */
	left:30%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:24%;			/* Width of right column content (column width minus padding on either side) */
	left:80%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
h2 {
	font-weight:bold;
	font-size:1.2em;	
}





/*mobile styles - edited for BirdingFieldGuides.com - mjm*/
@media only screen and (max-width:480px) {

/*disable text sizing on orientation change*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	-webkit-text-size-adjust:none;
}

body {
	margin: 0 auto;
	min-width: 320px;
	max-width: 480px;
	
	font: 100% Cantarell, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	position: relative;
	background-color: #fff;	
	font-weight:normal;
	font-style:normal;
}

a {
	text-decoration: none;
	color: #667F6A;
}

a:hover {
	color: #7B798F;
	border:none;
}


/*copied from handheldnew.css - mjm*/

header, #pages, body, footer
{
	width: 100%;
	margin: 0;
	overflow: hidden;
}
/* Start Header */
header.desktop, .colmask, .threecol {
	display:none;	
}

header.mobile {
	width: 320px;
	height:75px;
	border-bottom:2px solid gray;
	float:left;
}

header p {
	font: normal 2.5em/1.5em Helvetica, Arial, sans-serif;
	color: #730;
}

header img {
	display: block;
	max-width: 320px;
	padding:10px 0;
}

header nav {
	margin-top: 35px;
	float:right;
	
}

header li {
	display: inline;
	
}

header li:last-child {
	border-right:none;
}

header nav li a {
	font-size: .8em;
	color: #000;
	text-decoration: none;
	padding: 0 10px;
}

header nav li a:hover {
	color:#999;
}

/* End Header */

.horizontalContainerMobile {
	position:relative;
	width: 100%;
	margin-top:100px;
	left:2.5%;
}
.horizontalContainer {
	display:none;
}



#imageContainer, p.hide {
	display:none;	
}

#imageContainerMobile {
	display:block;
	width: 150px;
	height: 225px;
	position: relative;
	overflow: hidden;
	background: #eee;
	margin:5px 10px 4px 0;
	clear:both;
	float:left;
}

#imageContainerMobile img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#imageContainerMobile img.active {
	z-index: 3;
}
aside.desktop {
	display:none;
}
aside.mobile{
	display:block;
	float:left;
	margin:5px 0 0 0;
	margin-left:10px;
}
.appBadge {
	
	margin-bottom:0;
	margin-left:-15px;
}
.badge{
	margin:0 20px 0 20px;
	
}
.badge:last-child{
	margin-top:0;
}
/*about*/

ul {
	list-style-type:disc;
	margin-left:35px;
}
p.label {
	font-weight:bold;
	font-size:0.8em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}
p.text {
	font-weight:normal;
	font-size:1.0em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}		
	

section.bios {
	float:left;
	width:320px;
}
section.links {
	float:left;
	margin-left:5px;	
}

.about {
	margin-left:5px;	
}

section.bios img.bio {
	float:left;
	margin:5px 5px 5px 0;
}
section.bios p {
	clear:both;
	margin:0 5px 20px 5px;
	
}
/*end about*/

footer.mobile {
	width:100%;
}
footer.mobile ul {
	background:#999;
	padding:6px 0;
	margin:0px auto;
	
}
footer.mobile li {
	display:inline;
	border-right: 1px solid white;
	padding:0 11px;
}
footer.mobile li:last-child {
	border-right:none;	
}
footer.mobile li a {
	font-size: 1.5em;
	text-decoration:none;
	text-transform:lowercase;
	color:#fff;		
}
.mobileOnly {
	clear:both;
	width:100%;
}

}


/*desktop styles modified mjm*/
@media only screen and (min-width:769px) {



/* coppied from screen.css - mjm*/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	/*	font: inherit;*/
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

/*This css sheet comes from Holy Grail 3 column liquid layout*/
body {
	margin:0 auto;
	padding:0;
	border:0;
	background-color:#FFF;			/* This removes the border around the viewport in old versions of IE */
	width:960px;/*should this be 960px?*/
	min-width:600px;
					/* The min-width property does not work in old versions of Internet Explorer */
	font: .8em Cantarell, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	position: relative;
	font-weight:normal;
	font-style:normal;
	padding-top:5px;
}

a {
	color:#369;
	text-decoration:none;
}
a:hover {
	color:#333;
	background:inherit;
	text-decoration:none;
}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p.label {
	font-weight:bold;
	font-size:1.2em;
	margin-top:50px;
	margin-bottom:1px;
}	

p {
	margin:.4em 0 0 0;

}
img {
	float:left;
	
}


/* Header styles */
header.mobile, footer.mobile, #imageContainerMobile, aside.mobile {
	display:none;
}
/*new mjm Nov 2012*/


/*start here michael dec 6, 2012*/

header.desktop {
	width:896px;
	height:123px;
	border-bottom:2px solid gray;
	background-color:#FFF;
	margin:20px auto;
}
header.desktop nav {
	margin:0 auto;
	}


header.desktop nav ul {
	
	list-style:none;
	float:left;	
		margin-left: 40px;
		margin-top:5px;

		

}

header.desktop nav ul li {
	display:inline;
	list-style:none;

	
	font-size:1.2em;
}
header.desktop nav ul li a {
	padding:0 10px;

	text-align:center;
	color:#369;
	text-decoration:none;
	
}
header.desktop nav ul li a:hover {
	background:inherit;
	color:#333;
}


/* Change Images*/
.wrapper {
	width: 224px;
	margin: 0 auto;
}
.horizontalContainer {
	position:absolute;
	width: 100%;
	height: 480px;
	margin-top:40px;
	/*right:16.6%;*/	
}
.horizontalContainerMobile {
	display:none;
}

#imageContainer {
	display:block;
	width: 224px;
	height: 336px;
	position: relative;
	overflow: hidden;
	background: #eee;
}
#imageContainerAdditional {
	display:block;
	width: 224px;
	height: 214px;
	position: relative;
	overflow: hidden;
	background: #eee;
}
#imageContainerMobile {
	display:none;	
}
#imageContainer img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#imageContainer img.active {
	z-index: 3;
}
/* End change images */


/* Footer styles */
#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #FFF;
}
#footer p {
	padding:10px;
	margin:0;
}
/*about*/

ul {
	list-style-type:disc;
	margin-left:35px;
}
p.text {
	font-weight:normal;
	font-size:1.8em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}	


section.bios {
	float:left;
	width:600px;
	margin-left:30px;
	margin-top:40px;
	
}
section.links {
	float:right;
	margin-right:12px;
	margin-top:7px;	
}

.about {
	margin-left:5px;	
}

section.bios img.bio {
	float:left;

	margin:5px 5px 5px 0;
}
section.bios p {
	clear:both;
	margin:0 5px 20px 5px;
	
}
/*end about*/

p.label {
	text-align:left;	
}

aside {
	width:254px;
	height:400px;
	background:#FFF;
	margin-top:20px;
	margin-right:125px;
	float:right;
	
}

/*FAQs*/
p.textFaqs {
	font-weight:normal;
	font-size:1.0em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}
#blog {
	margin-top:40px;
}
	
.mobileOnly {
	display:none;
}

/*end FAQs*/

}

/*tablet styles*/
@media only screen and (min-width:481px) and (max-width:768px) {

body {

	margin: 0 auto;
	padding:0;
	min-width: 481px;
	max-width: 768px;
	background-color:#FFF;
	font: .8em Cantarell, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	position: relative;
	font-weight:normal;
	font-style:normal;
	padding-top:5px;
	width:85%;

}

/* Header styles */
header.mobile, footer.mobile, #imageContainerMobile, aside.mobile {
	display:none;
}

header {
	height: 165px;
}

header h1 {
	font-size: 3.2em;
	padding-left: 110px;
	line-height: 165px;
	width: 270px;
	margin: 0 auto;
}

header h2 {
	display: none;
}
header.desktop {	/*actually the tablet header, but no need to change name, must attributes (width)*/
	width:100%;/*arbitrary, but looks about right, don't want the header extending all the way to the edge 768px;*/
	height:100px;
	border-bottom:2px solid gray;
	background-color:#FFF;
	margin:20px auto;
}
header.desktop img {
	width:100%;
	height:100%;
}

header.desktop nav {
	margin-top:-10px;

	
	
}


header.desktop nav ul {
	
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}

header.desktop nav ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
	font-size:1.2em;
}
header.desktop nav ul li a {
	
	
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	color:#369;
	text-decoration:none;
}
header.desktop nav ul li a:hover {
	background:inherit;
	color:#333;
}
.horizontalContainer {
	position:absolute;
	width: 100%;
	height: 480px;
	margin:40px auto;

	
}

.horizontalContainerMobile {
	display:none;
}


p.label {
	font-weight:bold;
	font-size:1.8em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}	


/* Change Images*/
.wrapper {
	width: 224px;
	margin:0 auto;
	
}
#imageContainer {
	display:block;
	width: 224px;
	height: 336px;
	position: relative;
	overflow: hidden;
	background: #eee;
}
#imageContainerMobile {
	display:none;	
}
#imageContainer img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#imageContainer img.active {
	z-index: 3;
}
/* End change images */

/*about*/

ul {
	list-style-type:disc;
	margin-left:35px;
}
p.text {
	font-weight:normal;
	font-size:1.0em;
	margin-top:10px;
	margin-bottom:0;
	text-align:left;
}		
	

section.bios {
	float:left;
	width:500px;
	margin-left:30px;
	margin-top:40px;
	
}
section.links {
	float:right;
	margin-right:12px;
	margin-top:7px;	
}

.about {
	margin-left:5px;	
}

section.bios img.bio {
	float:left;

	margin:5px 5px 5px 0;
}
section.bios p {
	clear:both;
	margin:0 5px 20px 5px;
	font-size:1.2em;
	
}
/*end about*/

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	
	width:93.33%;			/* width of whole page, changed from 93.33% Aug20, 2013. avoid chopping off .com, changed back to original 93.33, temporary, see what happens */
	overflow:hidden;	
		/* This chops off any overhanging divs */
	margin:0 auto;
	margin-top:40px;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
					
	overflow:hidden;
	list-style:disc;
}
.col2 p {
	float:left;
}
.col2 img {
	margin-right:8px;
	}
.col3 ul {
	list-style-type:disc;
	margin-left:15px;
}
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:33%;			/* width of the right column */
	background:#FFF;		/* center column background colour */
}
.threecol .colleft {
	right:34%;			/* width of the middle column */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:32%;			/* width of center column content (column width minus padding on either side) CHANGED FROM 46% FOR THIS TABLET VIEW AUG 22,2013 */
	left:101%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:31%;			/* Width of left column content (column width minus padding on either side) */
	left:36%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:31%;			/* Width of right column content (column width minus padding on either side) */
	left:72%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
h2 {
	font-weight:bold;
	font-size:1.2em;	
}
#blog {
	margin-top:40px;
}
.mobileOnly {
	display:none;
}




}