/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: homepage
:: image page
:: paypal
:: tablet
:: desktop

# of columns: 12
gutter: 1.875em
max-width: 160em

http://www.colorcombos.com/color-schemes/227/ColorCombo227.html

main color: 0b3455
alert color: 5F021F
text color: 222222
secondary color: 546F8B
success color: 83AE84
header color: 222222
*/


/* Small screens */
@media only screen {
	/* Define mobile styles */
	#bg {position:fixed; top:-50%; left:-50%; width:200%; height:200%;}
	#bg img {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; opacity:0.5; filter: alpha(opacity = 50);}

	h1, h2, h3, h4, h5, h6, figcaption  {color:#0b3455; font-family: Garamond, Didot, serif;}
	p, a  {color:#0b3455; font-family: Calibri, Tahoma, serif; max-width:64em;}
	figcaption {font-size:.8em; line-height: 1em; margin-top: .2em;}
	h1.page-header {font-size: 2em;}
	h2.page-header {font-size: 1.5em; margin-bottom: 0; font-weight:bold;}
	a:hover {text-decoration:underline;}

	.label.alert {color: #F6E5D3;}

	.emp-header {min-height:1em; border-bottom-left-radius:14px; border-bottom-right-radius:14px; border-bottom:2px solid #0b3455;}
	a.logo {font-family: Garamond, Didot, serif; font-size:1.6em; display:block; margin-top:.1em;}
	a.logo:hover {text-decoration:none;}
	a.underline {text-decoration:underline;}
	p.tagline {font-size:.7em; font-family: Garamond, Didot, serif; margin-bottom: .5em;}
	.about-me-small, .about-me-large {text-align:right; color:#0b3455; margin-top:.1em; margin-bottom:.2em; }
	.about-me-small a, .about-me-large a {font-family: Garamond, Didot, serif; float:right;}
	.about-me-small a {border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 34px; height: 34px; padding: 3px; background: transparent; border: 1px solid #0b3455; color: #0b3455; text-align: center; font-weight: bold; display:block; margin-top:.4em;}
	.about-me-large a {margin-top: .5em;}

	.background-white {background:rgba(255, 255, 255, 0.6);}
	.emp-footer {color:#0b3455; font-size:.8em; padding:.5em 0 0 0; text-align:center; border-top-left-radius:14px; border-top-right-radius:14px; border-top:2px solid #0b3455;}

	.reveal-modal {background:rgba(255, 255, 255, 0.80);}
	.reveal-modal .close-reveal-modal {color:#5F021F;}
	.reveal-modal p {margin-bottom:0px; line-height:1.2em; font-size:.8em; margin-top:.2em;}
	.modal-image {text-align:center; margin-top: .9em;}
	.modal-image-info {}
	.modal-title {font-size:1.6em; color:#0b3455; margin:0; font-weight: bold; float:left; padding-left:0px; text-align:left;}
	.modal-date, .modal-location {line-height:1.2em; font-size:.7em; color:#546F8B; float:left; padding-left:0px; text-align:right;}
	.modal-date  {margin:0;}
	.modal-location {margin:.5em 0 0 0;}
	a.modal-next {float:right;}

	/* homepage ------ */
	#cat-landscape {background: transparent url(http://ericmiller.photography/images/homepage/DSC09218.jpg) -420px -215px no-repeat;}
	#cat-flora {background: transparent url(http://ericmiller.photography/images/homepage/_DSC2058.jpg) -450px -530px no-repeat;}
	#cat-fauna {background: transparent url(http://ericmiller.photography/images/homepage/DSC02944.jpg) -570px -345px no-repeat;}
	#cat-long-exposure {background: transparent url(http://ericmiller.photography/images/homepage/_DSC0694.jpg) -165px -350px no-repeat;}
	#cat-architecture {background: transparent url(http://ericmiller.photography/images/homepage/DSC07168.jpg) -500px -250px no-repeat;}
	.cat-promo {height: 200px; display: block;}
	.cat-promo-title {text-align: center; display: block; background: #0b3455; color: #F6E5D3; border-bottom-left-radius:5px; border-bottom-right-radius:5px; font-family: Garamond, Didot, serif;}
	.cat-promo-title:hover {color: #F6E5D3!important;}

	/* about me page ---- */
	#aboutmeimg {margin-top:.5em;}

	/* image page ---- */
	a.th {border:solid 2px #cccccc;}
	.th {
		-webkit-box-shadow: 0 0 0 1px rgba(11,52,85,0.3);
		box-shadow: 0 0 0 1px rgba(11,52,85,0.3);
	}
	.fourhundred {}
	#nav-landscape {}
	#nav-flora {}
	#nav-fauna {}
	#nav-long-exposure {}
	#nav-architecture {}
	
	#cat-navigation , #cat-navigation-up {text-align:center;}
	#cat-navigation a {
		font-family: Garamond, Didot, serif;
		font-size: .7em;
		color: #0b3455;
		background: transparent;
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
		border-bottom: 1px inset #0b3455;
		border-right: 1px inset #0b3455;
		border-left: 1px inset #cccccc;
		padding: 0 1em 2px 1em;
		position: relative;
		top: -7px;
	}
	#cat-navigation-up  a {
		font-family: Garamond, Didot, serif;
		font-size: .9em;
		color: #0b3455;
		background: transparent;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		border-top: 1px inset #0b3455;
		border-right: 1px inset #0b3455;
		border-left: 1px inset #cccccc;
		padding: 2px 1em 2px 1em;
		position: relative;
		top: -24px;
	}
	#cat-navigation a.selected {
		background: #0b3455;
		color: #F6E5D3;
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
		padding-bottom: 2px;
	}
	#cat-navigation-up a.selected {
		background: #0b3455;
		color: #F6E5D3;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		padding-top: 2px;
	}

	/* paypal ---------*/
	.paypal-form {/*margin-bottom:.5em;*/}
	.paypal-select {width:11.5em; font-size: .8em; margin-bottom:.5em; border-color:#0b3455;box-shadow: 0 0 0 1px rgba(11,52,85,0.3); border-radius:1000px; height:2em; padding:0px 0px 0px .5em;}
	span.paypal-select {display:none;}
	.paypal-button {background:transparent url("../img/paypal-order-a-print-bg-151x26.gif") no-repeat 0px 0px; width:151px; height:26px; color:#0b3455; font-family:Verdana; font-size:14px; font-weight:bold; font-style:italic; margin:0px 0px 1em 4px; padding:0px 0px 1px 0px;}
	.paypal-button:hover {background-color:transparent;}
}

@media only screen and (max-width: 40em) 
{
	/* max-width 640px, mobile-only styles, use when QAing mobile issues */
}

@media only screen and (max-width: 22.5em) 
{
	/* max-width 360px */
	a.modal-next, a.modal-prev {display:none;}

}

@media only screen and (max-width: 15em) 
{
	/* max-width 240px */
	a.logo {font-size:1.2em;}
	#cat-navigation a {
		font-size: .8em;
		top: -6px;
	}
	#nav-landscape {}
	#nav-flora {}
	#nav-fauna {}
	#nav-long-exposure {}
	#nav-architecture   {}
}

/* Medium screens */
@media only screen and (min-width: 40.063em) { 
	/* min-width 641px, medium screens */
	a.logo {font-size:2em;}
	.reveal-modal p {font-size:1em;}
	.cat-promo {height: 300px; display: block;}
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
}

/* Medium-Large screens */
@media only screen and (min-width: 52.063em) { 
	/* min-width 833px, medium-large screens */
	.cat-promo {height: 400px; display: block;}
	#cat-navigation a {
		font-size: .9em;
		top: -5px;
	}
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
}

/* Large screens */
@media only screen and (min-width: 64.063em) { 
/* min-width 1025px, large screens */
}

@media only screen and (min-width: 64.063em) and (max-width: 90em) { 
	/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
	.cat-promo {height: 500px; display: block;}
	#cat-navigation a {font-size: 1em; top: -3px;}
}

/* XLarge screens */
@media only screen and (min-width: 90.063em) { 
/* min-width 1441px, xlarge screens */
	.cat-promo {height: 600px; display: block;}
	.modal-date, .modal-location {font-size:.8em;}
}

@media only screen and (min-width: 90.063em) and (max-width: 120em) { 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
	.cat-promo {height: 700px; display: block;}
}

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { 
/* min-width 1921px, xxlarge screens */
	.cat-promo {height: 800px; display: block;}
}