@charset "UTF-8";

/* Layout Small Screens */

header {
	height:75px;
	background: url(../images/bannerSmallAbout.jpg) no-repeat right 0px;
	
}
header a.logo {
	width: 50px;
	height: 67px;
	top: 5px;
	right: 15px;
	background-image: url(../images/logoSmall.png);
	
}
header a.starLogo {
	width: 122px;
	height:50px;
	top:10px;
	right:20px;
	background-image: url(../images/starLogoSmall.png);
	} 





article {
	padding: 20px 20px 10px 20px;
}


.photos {
				-webkit-column-count:1;
				-webkit-column-gap:1em;
				-moz-column-count:1;
				-moz-column-gap:1em;
				column-count:1;
				column-gap:1em;
				margin-bottom:4em;
				padding-left:40px;
				padding-right:20px;				
			}

/*.col2 .col3 {
				clear: both;
			}
			
			.photos ul {
				display:table;
			}
			.photos ul, .photos li {
				list-style-type:none;
				margin: 0;
				padding:0;
			}
			.photos {
				-webkit-column-count:1;
				-webkit-column-gap:1em;
				-moz-column-count:1;
				-moz-column-gap:1em;
				column-count:1;
				column-gap:1em;
				margin-bottom:4em;
				padding-left:20px;
				padding-right:20px;
			}
			/*.photos img {
				width:90%;
				margin-bottom:.5em;
			}
			.photos li {
				position: relative;
			}
			.photos a:hover:after {
				content: attr(title);
				display: block;
				width:90%;
				position: absolute;
				z-index: 100;
				bottom:.9em;
				left:10px;
				color:white;
				text-align: center;
				font-size: 75%;
				font-family: Arial, sans-serif;
				background-color:#575c7a;			}*/

nav {
	position: static;/*this removes the position properties and set in a different order with nav at the bottom*/
	padding:10px 0px 10px 0px;
	background-color: #515673;
}
nav a {
	color:#a6abc5;
	display:block;
	margin: 15px;
	padding: 9px;
	border: 1px solid #a6abc5;
	background: url(../images/mobile_link_arrow.png) no-repeat right center;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 24px;
	
	}
	nav a:hover {
		color: #fff;
		background-color: rgba(255,255,255,.10);
	}
	
	
	
	.promoContainer {
	padding: 30px;/*changed top nav from 0 to 15*/
		
	}
	.promoContainer .promo {
		width: auto;
		float: none;
		padding: 10px 0px 0px 0px;
		background-position: 20px 13px;
		border-top: 1px solid #ccc;
		
	}
	.promoContainer .promo .content {
	padding: 0px 20px 45px 145px;/*changed left from 90 to 145 changed bottom from 5 to 15*/
		
	}
	footer {
		border-top: 1px solid #a6abc5;
	}
	body {
		background-image: none;
	}
	
	
	
	.rightSide {
		clear:both;
		padding:40px 40px 40px 40px;	
	}
	.animatedLogo {
		width:90%;
		margin:0 auto;
		padding:0;
	}