/* CSS Document */

/* @import Rule - we could specify different media values in a separate css file */
/*@import url(styles_mobile.css) all and (max-width: 420px) {...}*/

html {
	font-size:24px;
}
body {
	font: 300 62.5% "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
	xfont-size:62.5%; /* =62.5% of 32px, 1em now = 20px */
	color:#242430;	
	
	background-color:#CCC; /* fallback */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#242430), to(#E8E9E8));/* Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(top, #E8E9E8, #242430);/* Safari 5.1, Chrome 10+ */
	background: -moz-linear-gradient(top, #E8E9E8, #242430);/* Firefox 3.6+ */
	background: -ms-linear-gradient(top, #E8E9E8, #242430);/* IE 10 */
	background: -o-linear-gradient(top, #E8E9E8, #242430);/* Opera 11.10+ */
}

img,
#map_canvas
{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/* map styles */
#map_canvas
{
	margin-top:1em;
	height: 372px;
	width: 360px;
}
/* end map styles */
h1 {
  color: #9799a7;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 6px;
}

.centeredContainer {
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}
.container {
  background: none; /*#eaeaed;*/
  *zoom: 1; /* IE7 hack */
	margin-bottom:0;
}

.container,
section,
aside {
  border-radius: 5px;
	-moz-border-radius: 5px;
	margin: .5%;
}
section,
aside {
  
	background-color:white;
  padding: 1% 1%; 
	/*margin: 1.5%; 
  padding: 3% 0; */
  text-align: left;
}

section#header, 
section#footer,
#news, #homeOfGAA {
	background-color:#242430;	
	text-align: center;
	color:#fff;
	text-transform:uppercase;
	font-size:1.3em;
}

section.width-100 {
	width: 97%; /* 100% less margins */
}

.mainImage, .flashclass {
	margin-bottom:.5em;
}
.curvyCorners,
.flashclass img
 {
	border-color:#CCC;
	border-style:solid;
	border-width:1px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.flashclass {
	padding-top:.5em;
	padding-right:1em;
}
.flashclass img {
	width:75%;
}
.titleText {
	color: white;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: "Arial Narrow", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: 550;
	font-size: 1.2em;
	padding:1em;
}

#connectingTwitterText, #connectingFacebookText {
	margin-top:.5em;
}

#oktoberhouse {
	color:#fff;
	text-align:center;
	font-size: 1.2em;
	font-family: "Arial Narrow", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: 550;
	letter-spacing: 2px;
	clear: none;
	width: 97%;
	display: block;
	background-color:transparent;	
	text-transform:uppercase;
	height:2em;
}

#oktoberhouse a
{
	color:#CCC;
	text-decoration:none;
}
#oktoberhouse a:hover
{
	color:white;
}

.nowrap {
	white-space:nowrap;
}

/* mobile first strategy */
@media screen and (max-width: 639px) {
	span#blurb {
		margin: 0 .5em 1.5em .5em;
		float:none;
		display:block;
	}	
	#aboutPhotoAndBlurb .mainImage,
	#map_canvas {
		width:99%;
	}
	
	#connectingFacebookBody *,
	#connectingTwitterBody * {
		width: 100% !important;	
	}
	
	#oktoberhouse {
		margin-top:2em;
		font-size:1em;
	}
}

/* 2 Column Layout (Tablet) */
@media screen and (min-width: 640px) and (max-width: 959px) {
	
  .container {
    max-width: 900px;
		margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
  }
	
	#aboutPhotoAndBlurb {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;	
		
		float:left;
		width:50%;
		min-width:425px;
  }
	
	section#about {
		width: 97%;
	}
	
	span#blurb {
		-webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
		padding:0 2em 1em 0;
	}
	section#about img {
		-webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;

		max-height: 282px; /* prevents image overflowing out of section */
		width:95%;
	}
	
	#map_canvas {
		float:none;
		margin-top:0;
		xposition:fixed;
		height: 460px;	
		width: auto;
	}

	section.width-100 {
		float: left;
	}
	
	section#facebook,
	section#twitter
	{
		float: left;
		width: 47%;
	}
	
	#connectingFacebookBody *,
	#connectingTwitterBody * {
		width: 100% !important;	
	}
	
	@-moz-document url-prefix() { /* FireFox */
		#map_canvas {
			height:470px;
		}
		section#about img {
			max-height: 275px; /* without this mod, the image appears too close to the border in FF */
		}
	}
}

/* 3 Column Layout (Desktop) */
@media all and (min-width: 959px) {
  .container {
    max-width: 1200px;
		margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
  }
	
	section {
		float: left;
		/*width: 30.368%; - works in safari but 3rd column spills into a new row on FireFox and Chrome */
		width: 30.29%; /* 30.29 */
	}
	section.width-100 {
		float: left;
	}
	#connectingFacebookBody *,
	#connectingTwitterBody * {
		width: 100% !important;	
	}
	
	@-moz-document url-prefix() { /* FireFox */
		#map_canvas {
			height:360px; /* increase height of maps to match the other 2 columns */
		}
	}
	
}