/*  This font was used to make the "AVA" logo at the top of the page
@font-face{
	font-family: hall-fetica-wide;
	src: url('Hall Fetica Wide.ttf');
}
*/

*{  /*make all box sizes include the borders to make math eaiser*/
	-webkit-box-sizing: border-box; /*safari & chrome*/
	   -moz-box-sizing: border-box; /*firefox*/
		    box-sizing: border-box;
}



/*FONT
================*/
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
thead{ /*baseline text styles*/
	font-family: Open Sans;
	font-size: 1em; /*.8125em roughly 13px*/
	color: #444;/*non-transparency fallback*/
	color: rgba(0,0,0,.8);
	text-shadow: 0 1px 0 rgba(255,255,255,.75),0 2px 0 rgba(255,255,255,.75);
}

em{ /*draw attention to certain snippets of text*/
	font-style: normal;
	font-weight: bold;
	color: #333654;/*non-transparency fallback*/
	color: rgba(51,54,84,1);
}



/*LISTS
================*/
ul{
	list-style: none;  /*no bullets allowed*/
	/*height: 100%;*/
}



/*TABLES
================*/
thead{
	background-color: rgba(51,54,84,1);
	display: block;
	border-top-left-radius: .3em;
	border-top-right-radius: .3em;
}
th{
	color: rgba(255,255,255,.85);
	font-size:1em;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	padding: .1em 1em .1em;
}
table{
	background-color: rgba(255,255,255,.75);
	float: left;
	display: inline-block;
	margin: 1em;
	width:22em;
	/*min-height:18em;*/
	max-width: 100%;
	border-radius: .3em;
	box-shadow:.2em .2em .5em rgba(0,0,0,.2);
	white-space: normal !important; /*because I use this to horizontally stack sections*/
}
tbody{
	width:100%;
	display: inline-table;
}
td{
	text-align: left;
	vertical-align: top;
	padding: .1em .25em .1em;
}

tr:nth-child(even){
	background-color: rgba(68,68,68,.1);
}

.clickable{
	/*prevent clicking a botton from selecting the button text*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	cursor: pointer;
}



/*BASIC STRUCTURE
================*/
body{
	background: #ccc; /*fallback*/
	background: url("images/wavecut_lightblue.gif");
}

#wrapper{ /*The big obvious box that holds everything */
	width:1000px;
	height:860px;
	margin:auto; /*centered*/
	margin-top:-.5em;/*push it to the top*/
	margin-bottom:3em;/*just to give the scrolling a bit of room at the bottom*/
	padding:1.5em;
	padding-top:0;
	/*static w/ media queries...is the goal*/

	background-color: #fefefe;
	/*wood accent stripe, textured paper*/
	background: url("images/horizontal-saint.png") repeat-x,
				url('images/creampaper.jpg');


	box-shadow: 0 0 2em rgba(0,0,0,.5);

	overflow: hidden; /*create a literal content box*/
}

#slideshow{ /*where the sections slide around...it's not a visble object*/
	position: relative;
	top:-20px;
	padding: 0;
	z-index: 50;
	height: 740px; /*the full height of the page minus the header (150px)*/

	white-space: nowrap;
	overflow: hidden;
}

#slider{
	position: relative;
	top:-80px;
	left:0;

	transition: left 1s cubic-bezier(0.39, 0.575, 0.565, 1);
	-o-transition: left 1s cubic-bezier(0.39, 0.575, 0.565, 1);
	-moz-transition: left 1s cubic-bezier(0.39, 0.575, 0.565, 1);
	-webkit-transition: left 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}

section{ /*All the unique blocks of content*/
	display:inline-block; /*create horizontally stacked blocks of content*/
	/*each section must be the exact size of the #slideshow to display correctly*/
	width:952px;
	height:650px;
	vertical-align: top;

	margin-right: 100px; /*white-space buffer between each "page"*/
	margin-left: 0;
	padding: 0;
}

section:last-child{
	margin-right: 0; /*don't create extra space after the last page of content*/

}


/* NAVIGATION
================*/

nav{
	position: relative;
	top: -110px;
	z-index: 100;

	border-top: 1px solid #ccc;
}

nav li{
	display:inline-block;
	color:#999;
	margin: 0 20px 0 20px;
}

nav li:hover{
	color:#666;
}

.active{
	color:#333;
}



/*next & back should line up horizontally and extend beyond the width of the page by 5px*/
#back{
	position: relative;
	top:330px;
	left:-54px;
	z-index: 2;

	text-shadow: -1px 0 0 #fff;

	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


#next{
	position: relative;
	top:286px;
	left:856px;
	z-index: 2;

	text-shadow: 1px 0 0 #fff;

	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


.button{
	height: 44px;
	width: 150px;
	padding-bottom: 0;
	
	font-size: 2em;
	font-weight: bold;
	text-align: center;

	background: #f3ece6;

	color:#444;
	
	border: 1px solid #fff;
	border-bottom-right-radius: .1em;	
	border-bottom-left-radius: .1em;
	box-shadow: 0 0 .5em rgba(0,0,0,.3); 

	opacity: 0;
	overflow: hidden;

	transition: opacity .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.button:hover{
	opacity: .9;
}



/* PAGE HEADER 
================*/
div#logo{
	margin-bottom: -16px; /*tuck the subtitle up snug*/
	width: 256px;
	height: 105px;
	background-image: url("images/logo.png");
}

hgroup{/*holds the logo and subtitle*/
	display: inline-block;
	position: relative;
	left:-10px;
	width: 49%
}

#contact1,#contact2{ /*The contact information should hug the top right corner*/
	visibility: hidden; /*Hide by default, javascript will reveal as needed*/
	display: inline-block;
	position: relative;
	top:-15px;
	width: 25%;
	height: 100px;
	z-index: 1;
	padding-right: 4px;

	text-align: right;
	color: #999; /*fallback*/
	color: rgba(68,68,68,.7);

	border-right: 1px solid #ccc;
}

#contact1 li{
	font-size: 18px;
}
#contact1 li+li{
	font-size: 12px;
} 

#contact2{
	position: relative;
	top:-20px;

	text-align: left;
	border:none;
}
#contact2 ul{
	margin: 0;
	margin-left: 10px;
	padding: 0;
}


hgroup h1{ /*actual text - offscreen because an image is used instead*/
	text-indent: -9999em;
	/*
	font-size: 4em;
	font-family: hall-fetica-wide;
	text-transform: uppercase;
	letter-spacing: -.23em;
	color:rgb(68,68,68,.5);
	margin-bottom:0;
	margin-left:-.8em;
	padding-bottom:0;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.8)), color-stop(40%, rgba(255,255,255,.2)), to(rgba(0,0,0,.8)));
	text-shadow: 0 1px 0 rgba(0,0,0,.8), 2px 2px .25em rgba(0,0,0,.25), 1px 1px 0 rgba(50,50,255,.6), -1px -1px 0 rgba(192,205,220,1);
	*/
}  

hgroup h2{ /*subtitle*/
	margin-left: 10px;
	font-size: 17px;
	text-transform: uppercase;
	color: #999; /*fallback*/
	color:rgba(68,68,68,.5);
}

.bullet{ /*separates the two halves of the subtitle*/
	display: inline-block;
	margin: 0 .5em .3em;
	width: 3px;
	height: 3px;
	border-radius: 3px;

	background-color:#999;
	background-color:rgba(0,0,0,.2);
}


/* CONTENT TWEAKS
================*/
#showcase{
	position: relative;
	width: 100%;
	height:512px;

	border-radius: .3em;
	
	overflow: hidden;
}


#showcase img{/*the image itself should scale to the container's width*/
	position: relative;
	top:-10%; /*center the boat in the container.  this crops the image*/
	width:100%;

	border:none; /*the border is applied to the parent div instead*/
}

section p{
	/*float:left;*/
	white-space: normal;
	width:945px;
}

img, iframe{
	max-width:100%;
	border-radius: .3em;

	box-shadow:  0 0 .5em rgba(0,0,0,.4);

	margin:.1em;
}

article img{ /*the basic images of each section should adhear to this (1/2 of the golden ratio)*/
	display: inline-block;
	float:left;
	width: 31%;

	margin-right: 1em;
}

article>a>header>img{
	margin-right: 1em;

}

section p:first-letter{
	font-size: 2em;
	font-weight: bold;
}

img.focus{
	width:61.5%;
}

#MasterSuite p+p, #GuestSuite p{
	float:left;
}

#FullSpecs img{
	box-shadow: none;
	border:none;
	float: left;
	margin-right: 1em;
}

#FullSpecs table{
	white-space: normal;
}

#FullSpecs h4{
	margin-bottom: -.75em;
}

#layout div, #layout img{
	font-size: .9em;
	width:auto;
}

#spectables{
	width: 425px;
	height: 600px;

	position: absolute;
	top:0;
	left:8900px;

	overflow-y: scroll;
}