@charset "UTF-8";
/* CSS Document */


/*mobile styles*/
@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 {
	width: 90%;
	margin: 0 auto;
	min-width: 320px;
	max-width: 480px;

}

/*header styles*/
header {
	height: 70px;
}

header h1 {
	font-size: 2em;
	padding-left: 55px;
	line-height: 70px;
	width: 190px;
	margin: 0 auto;
	background: url(../_images/desolve_logo_50.png) no-repeat left center;
}

header h2 {
	display: none;
}

/*nav styles*/
#mainNav {
	width: auto;
	margin: 0;
	margin-bottom: 1em;
	background: white;
	overflow: hidden
}

#mainNav li {
	margin: 0;
	float: none;
	position: relative;
}
.topMenu {
	max-height: 0;
	visibility: hidden;
}
.topMenu.expand {
	max-height: 900em;
	visibility: visible;
}

#mainNav a, #mainNav h3 {
	font-size: 1em;
	text-align: left;
	color: white;	
	display: block;
	margin-bottom: 1px;
	background: rgb(76, 67, 65);
	padding-left: 1em;
	line-height: 2em;
	text-transform: uppercase;
	cursor: pointer;
}
#mainNav a:hover {
	color: white;
}
#mainNav a.current {
	color: rgb(237, 228, 214);
}
#mainNav span.indicator {
	position: absolute;
	right: 1em;
}
/*dropdown menu styles*/
#mainNav ul.submenu {
	float: none;
	width: auto;
	height: auto;
	max-height: 0;
	-moz-transition:max-height 0.5s ease;
	-webkit-transition:max-height 0.5s ease;
	-o-transition:max-height 0.5s ease;
	transition:max-height 0.5s ease;
	overflow: hidden;
}
#mainNav ul.submenu.expand {
	max-height: 20em;
}

#mainNav ul.submenu li a {
	padding: .2em 1em;
	white-space: nowrap;
	color: white;
	text-align: left;
	font-size: 1em;
	padding-left: 3em;
	background: rgb(100, 98, 102);
}
#mainNav .menuToggle {
	display: block;
	background: rgb(76, 67, 65);
	width: 8em;
	margin-bottom: .2em;
	position: relative;
}
.menuToggle a {
	text-align: center;
	padding: 0;
}

/*homepageIntro styles*/
.homepageIntro {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 2.4em;
}

.homepageIntro h1 {
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	margin-bottom: .5em;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0px -2px 4px rgba(255,255,255,0.8);
}

.homepageIntro p {
	width: 90%;
	font-size: .8em;
	margin: 0 auto;
	line-height: 2;
	
	
}

/* article styles */
article {
	width: 90%;
	margin: 0 auto;
	
}

article section {
	border-bottom: 2px solid rgb(76, 67, 65);
	margin-bottom: 1.6em;
	overflow: hidden;
	position: relative;
	padding-bottom: 20px;
}

article h1 {
	background: url(../_images/icon_sprites_50.png) no-repeat right top;
	padding: 20px 0 5px;
}

article h2 {
	font: 2em Cardo, Georgia, serif;
	margin-bottom: 0;
}

.caption {
	font-size: .8em;
	margin-top: 1em;
}

article p.pubdate {
	font-size: 1em;
	text-transform: uppercase;
	margin-bottom: 1em;
}

article .preview {
	height: 175px;
}

/*index page*/
	
.tangled .preview {
	background: url(../_images/sm-tangled-banner.jpg) no-repeat;
}

.trespass .preview {
	background: url(../_images/sm-trespass-banner.jpg) no-repeat;
}

.air .preview {
	background: url(../_images/sm-air-banner.jpg) no-repeat;
}

.shoemaker .preview {
	background: url(../_images/sm-shoemaker-banner.jpg);
}

.trains .preview {
	background: url(../_images/sm-trains-banner.jpg) no-repeat;
}

.russia .preview {
	background: url(../_images/sm-russia-banner.jpg) no-repeat;
}

.churches .preview {
	background: url(../_images/sm-churches-banner.jpg) no-repeat;
}

.landscapes .preview {
	background: url(../_images/sm-landscapes-banner.jpg);
}

.cityscapes .preview {
	background: url(../_images/sm-cityscapes-banner.jpg) no-repeat;
}


.news .preview {
	background: url(../_images/news_banner.jpg) no-repeat;
}

/*residencies*/
	
.care .preview {
	background: url(../_images/residencies/sm-care-banner.jpg) no-repeat;
}
	
.zion .preview {
	background: url(../_images/residencies/sm-zion-banner.jpg) no-repeat;
}


.tongass .preview {
	background: url(../_images/residencies/sm-tongass-banner.jpg) no-repeat;
}

.canyon .preview {
	background: url(../_images/residencies/sm-canyon-banner.jpg) no-repeat;
}

.petrified .preview {
	background: url(../_images/residencies/sm-petrified-banner.jpg) no-repeat;
}

.chugach .preview {
	background: url(../_images/residencies/sm-chugach-banner.jpg) no-repeat;
}
.dunes .preview {
	background:url(../_images/residencies/sm-dunes-banner.jpg) no-repeat;
}
.mesa .preview {
	background: url(../_images/residencies/sm-mesa-banner.jpg) no-repeat;
}

.badlands .preview {
	background: url(../_images/residencies/sm-badlands-banner.jpg) no-repeat;
}

.glacier .preview {
	background: url(../_images/residencies/sm-glacier-banner.jpg) no-repeat;
}

.apostle .preview {
	background: url(../_images/residencies/sm-apostle-banner.jpg) no-repeat;
}

.acadia .preview {
	background: url(../_images/residencies/sm-acadia-banner.jpg) no-repeat;
}

.cape .preview {
	background: url(../_images/residencies/sm-cape-banner.jpg) no-repeat;
}

.rockies .preview {
	background: url(../_images/residencies/sm-rockies-banner.jpg) no-repeat;
}



.writing .preview {
	background: url(../_images/sm_writing_banner.jpg) no-repeat;
}

/*gallery styles*/
#gallery h1 {
	font: 4em  Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	text-align: center;
	color: rgb(123, 121, 143);
}

.intro {
	margin-bottom: 2em;
}

.intro p {
	font-size: .8em;
	margin: 0 0 1em;
	
}

.photos img {
	max-width: 90%;
	margin: 0 auto;
	display: block;
	margin-bottom:.8em;
}
.photos li {
	position: relative;
	float: none;
}

#gallery .photos a:after {
	content: attr(title);
	display: block;
	width: 90%;
	position: absolute;
	top: 0;
	left: 5%;
	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}

/*this is a substitute for .photos which you can remove if all is working*/
.floatGallery img {
	max-width: 90%;
	margin: 0 auto;
	display: block;
	margin-bottom:.8em;
}
.floatGallery li {
	position: relative;
	float: none;
}

#gallery .floatGallery a:after {
	content: attr(title);
	display: block;
	width: 90%;
	position: absolute;
	top: 0;
	left: 5%;
	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}


/*this is a substitute for .photos which you can remove if all is working*/
.floatGallery3 img {
	max-width: 90%;
	margin: 0 auto;
	display: block;
	margin-bottom:.8em;
}
.floatGallery3 li {
	position: relative;
	float: none;
}

#gallery .floatGallery3 a:after {
	content: attr(title);
	display: block;
	width: 90%;
	position: absolute;
	top: 0;
	left: 5%;
	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}

/*contact styles*/
#contact h2 {
	margin-bottom: 1em;
}

.connect {
	margin-top: 2em;
}

#contact li a {
	padding-left: 30px;
	line-height: 35px;
	font-size: 1em;
	display:block;
	background-size: 20%;
}


/*form styles*/
fieldset {
	width: 90%;
}

input[type="text"], input[type="email"], input[type="url"], textarea {
	width: 95%;
}

fieldset p {
	float: none;
	width: auto;
}


/*aside styles*/
aside {
	width: 90%;
	margin: 0 auto;
}

aside section {
	clear: both;
}

aside h2 {
	font-size: 1.6em;
	margin: 1em 0 .8em;
	padding-top: .8em;
	border-top: 2px solid rgb(76, 67, 65);
	text-align:center;
}

aside nav h2 {
	border: none;
	padding-top: 0;
}

aside nav {
	margin-bottom: 2em;
}

aside nav ul {
	display: none;
}

nav select {
	width: 200px;
	margin-left: 20%;
}

.contest img {
	display: block;
	margin: 0 auto .8em;
}

.contest p {
	font-size: .9em;
	margin: 0 auto;
	margin-bottom: 1.5em;
	width: 80%;
	line-height: 1.5;
}

.enter a {
	display: block;
}

/*footer styles*/
#pageFooter {
	clear:both;
	overflow:hidden;
	padding-bottom: 2em;
}

#pageFooter form {
	width: 90%;
	margin: 0 auto 1em;
}

.notice {
	width: 300px;
}

#pageFooter p {
	margin-left: 5%;
}
}