/*********************************************************************************
1. Universal styles (typography, etc.)
2. Header & Nav styles
3. Main BJody Content
4. JQUERY
5. Footer Content
*********************************************************************************/



	@font-face {
    font-family: 'GoudyBookletter1911Regular';
    src: url('../fonts/goudy_bookletter_1911-webfont.eot');
    src: url('../fonts/goudy_bookletter_1911-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/goudy_bookletter_1911-webfont.woff') format('woff'),
         url('../fonts/goudy_bookletter_1911-webfont.ttf') format('truetype'),
         url('../fonts/goudy_bookletter_1911-webfont.svg#GoudyBookletter1911Regular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

/* MENU */	
	
@font-face {
    font-family: 'permiansanstypefaceregular';
    src: url('../fonts/PermianSansTypeface-Bold-webfont.eot');
    src: url('../fonts/PermianSansTypeface-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PermianSansTypeface-Bold-webfont.woff') format('woff'),
         url('../fonts/PermianSansTypeface-Bold-webfont.ttf') format('truetype'),
         url('../fonts/PermianSansTypeface-Bold-webfont.svg#permiansanstypefaceregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

/* MASTER STORY TELLERS */	
 @font-face {
	font-family:"Caudex Bold";
	src:url("../fonts/Caudex-Bold.eot?") format("eot"),
	url("../fonts/Caudex-Bold.woff") format("woff"),
	url("../fonts/Caudex-Bold.ttf") format("truetype"),
	url("../fonts/Caudex-Bold.svg#Caudex-Bold") format("svg");
	font-weight:normal;
	font-style:normal;
	}

/************************************************************************************
*************************************************************************************
1. Universal Styles
************************************************************************************
***********************************************************************************/

a:link {
	color: #990000;
	text-decoration:underline;
	list-style-type:none;
	text-decoration:none;
	}
a:visited {
	color: #666;
	list-style-type:none;
	text-decoration:none;
	}
a:hover {
	color: #0033cc;
	list-style-type:none;
	text-decoration:none;
	}
a:active {
	list-style-type:none;
	text-decoration:none;
	color: #F00;
	}
	
/************************************************************************************
*************************************************************************************
2. Header & Nav Styles
************************************************************************************
***********************************************************************************/
/* TOP MENU */
	
#topMenu{
	text-align: center;
	margin: 0 auto;
	padding: 6px 0 6px 0;
}
	
#topMenu ul{
	font: 1.1em/1.7em 'permiansanstypefaceregular', Arial, sans-serif;	
}

#topMenu li{
	display:inline;
	list-style-type:none;
	padding: 15px;
	text-decoration:none;
	
	}

/************************************************************************************
*************************************************************************************
3. Main Body Styles
*************************************************************************************
************************************************************************************/
		
body {
	background-color: #c9cace;
	background: #c9cace url(../images/sky.jpg);
	background-repeat: repeat-x;
	overflow-y: scroll;
	}
	
.fontBold:link{
	font-size: 120%;
	font-weight: bold;
/*	color:#F30;*/
}

#wrapper{
	margin: 0;
	width: 100%;
	}

.clearBoth{
	clear:both;
	}
	
	.clearLeft{
	clear:Left;
	}
	
	.clearRight{
	clear:Right;
	}
		
/*frontPage Background Window*/
#frontBackground{
	width: 1200px;
	margin: 0 auto;
	background-image: url(../images/room_01.jpg);
	background-repeat: no-repeat;
	}
	
#frontBack .Content{
	width: 1200px;
	margin: 0 auto;
	}

/*MAIN*/
	
.logo{
	margin: 0 auto;
	width: 161px;
	}

.story{
	color: #3366cc;
	font: 1.6em/1.5em 'Caudex Bold', Arial, sans-serif;
	letter-spacing: 1px;
	margin: 0 auto;	
	text-align:center;
	width: 300px;
	z-index: 3;	
	}	
	
	
	
.tagLine{
	color: #333;
	float: left;
	font: 1.4em/1.5em 'GoudyBookletter1911Regular', Arial, sans-serif;
	letter-spacing: .5px;
	margin: 30px 0 0 55px;
	text-align: left;
	width: 300px;
	z-index: 3;
	}
	
	.videoLinks{
	color: #333;
	float: left;
	font: 1.4em/2.5em 'GoudyBookletter1911Regular', Arial, sans-serif;
	letter-spacing: .5px;
	margin: 30px 0 0 55px;
	text-align: center;
	width: 300px;
	}
		
	h5{
	font: 1.4em/1.5em 'permiansanstypefaceregular', Arial, sans-serif;
	color:#590098;
	text-align:center;
	margin: 10px 0 0px 50px;
	text-decoration:underline;
	float: left;
	}	
	
	.videoPhone{
	display:none;	
		
	}

/************************************************************************************
*************************************************************************************
4. JQUERY Photoss
*************************************************************************************
************************************************************************************/

#photoShow{
	height: 200px;
	width: 300px;
	}
		
#photoShow div{
	position: absolute;
	z-index: 0;
	}
		
#photoShow div.previous{
		z-index: 1;
	}
	
#photoShow div.current{
		z-index: 2;
	}
	
#photoShow2{
	height: 200px;
	width: 300px;
	}
		
#photoShow2 div{
	position: absolute;
	z-index: 0;
	}
		
#photoShow2 div.previous{
	z-index: 1;
	}

#photoShow2 div.current{
	z-index: 2;
	}

/*video clip*/

	
.video{
	margin: 30px 0 0 40px;
	z-index: 20;
	}
	
.filmTop{
	 z-index:-1;
	}
	
.clipsFront{
	margin: 8px 0 0 40px;
	}

.videoLeft1{
	display: none;
	}
	
.videoLeft{
	float: left;
	margin: 20px 0 0 40px;
	width: 300px;
/*	background: #099;*/
	}
		
.videoRight{
	margin: 10px 40px 0 0;
	text-align: right;
	width: 300px;
	float: right;
/*	background: #099;*/
	}
	
	.womanowned{
	float: left;
	font-size:10px;
	line-height:11px;
	color: #999;
	width: 165px;
	text-align: left;
		
	}
	
/************************************************************************************
*************************************************************************************
5. Footer Content
*************************************************************************************
************************************************************************************/

.descriptionRight{
	color: #797878;
	width:300px;
	float: Right;
	font:.9em/1.7em 'GoudyBookletter1911Regular', Arial, sans-serif;
	letter-spacing: .5px;
	margin:5px 38px 0 0px;
	text-align: left;
	z-index: 4;
	}
	
.descriptionRightTop{
	color: #797878;
	width:300px;
	float: Right;
	font:.9em/1.7em 'GoudyBookletter1911Regular', Arial, sans-serif;
	letter-spacing: .5px;
	margin:10px 38px 0 0px;
	text-align: left;
	z-index:5;
	}

.bottomMenu{
	color: #666;
	font: .9em/2em 'GoudyBookletter1911Regular', Arial, sans-serif;
	letter-spacing: .5px;
	margin: 0 auto;
	padding-top: 65px;
	text-align: center;
	width: 90%;
	}
		
.bottomMenu	a:link {
	color: #990000;
	}
.bottomMenu a:visited {
	color: #000;
	}
.bottomMenu a:hover {
	color: #666;
	}
.bottomMenu a:active {
	}
.front{
	margin-top: 0px;
	padding-bottom: 20px;	
	}
	

@media only screen and (max-width: 960px) and (min-width:750px) {
	
#frontBackground{
	background-image: url(../images/room_960-1.jpg);
	background-repeat: no-repeat;
	margin: 0 auto;
	width: 100%;
	}
		h4{
	text-align:left;
		margin: 10px 0 0px 100px;
	}
	


}

	
@media only screen and (max-width: 750px) and (min-width: 420px) {
	
		
a:link {
	color: #FFF;
	text-decoration:underline;
	list-style-type:none;
	text-decoration:none;
	}
a:visited {
	color: #CCC;
	list-style-type:none;
	text-decoration:none;
	}
a:hover {
	color: #0033cc;
	list-style-type:none;
	text-decoration:none;
	}
a:active {
	list-style-type:none;
	text-decoration:none;
	color: #F00;
	}
	.front{
	margin-top: 10px;
	padding-bottom: 20px;	
	}
	
	#topMenu
	{
	width: 100%;
	}
	
	.bottomMenu{
	padding-top: 10px;
	font: .8em/2em 'GoudyBookletter1911Regular', Arial, sans-serif;
	width:80%;
	}
		
	#frontBackground{
	width: 100%;
	background-image: url(../images/room_767.jpg);
	background-repeat: no-repeat;
	margin: 0 auto;
	}
	
	.tagLine{
	color: #333;
	float:none;
	margin: auto 0;
	text-align: left;
	padding: 0 20px;
	width: 90%;
	}
	
	.videoLeft1{
	display:block;
	margin: 0 auto;
	width: 300px;
/*	background: #099;*/
	}
	
	.videoLeft{
	display: none;
	}

	.videoRight{
	display: none;
	}

	
	.descriptionRight{
	display: none;
	}
	
	.videoLinks{
	display: none;
	}
	
	.videoLinksPhone{
	display: none;
	}
	
	.descriptionRightTop{
	display: none;
	}
	
	h4{
	text-align:left;
		margin: 10px 0 0px 125px;
	}
	

			
	}

	
	@media only screen and (max-width : 420px) {
	.wrapper{
	width: 320px;
	}
	
	h5{
	text-align:center;
		margin: 0 auto;
	}
	
	body {
	background-image: none;
	background:#eeeeee; 
	}
	
	#frontBackground{
	width: 100%;
	background-image: none;
	background:#eeeeee;
	margin: 0 auto;
	}
	
	.descriptionRight{
	display: none;
	}
	
	.descriptionRightTop{
	display: none;
	}
	
	.tagLine{
	color: #333;
	float: none;

	letter-spacing: .5px;
	margin: 0 auto;
	text-align: left;
	width: 100%;
	z-index: 3;
	}
	
	.videoLinks{
	display: none;
	}
	
	.videoPhone{
	display:block;
	margin: 0 auto;
	width: 250px;
		
	}
	
	.Content{
	width: 100%;
	margin: 0 auto;
	}
	
	.mobilePhoto{
	background-image: url(../images/mobile_window.jpg);	
	width: 200px;
	height: 243px;
	margin: 0 auto;
	margin-top: 20px;	
	display:block;	
	}
	
	.video{
	display: none;	
	}

	.videoLeft{
	display: none;
	}
	
	.videoRight{
	display: none;
	}	
	
	#photoShow{
	display: none;
	}
	
	#photoShow2{
	display: none;
	}
		
	.filmTop{
	display: none;
	}
	
	.current{
	display: none;
	}
	
	.logo{
	margin: 0 auto;
	width: 161px;
	margin-bottom: 0px;
	}

	.story{
	z-index: 3;
	margin: 0 auto;
	width: 300px;
	color: #3366cc;
	text-align:center;	}	
	
	.tagLine{

	z-index: 3;
	margin: 0 auto;
	text-align: center;
	color: #333;
	float: none;
	}
	
	#photoShow div{
	display: none;
	}

	#photoShow2{
	display: none;
	}
		
	#photoShow{
	display: none;
	}
	
	.front{
	margin-top: 10px;	
	}
	
	#topMenu{
	width:  320px;
	}
		
	#topMenu li
	{
	padding: 10px;
	}
	
	#topMenu ul
	{
	font: 1em/1.6em 'permiansanstypefaceregular', Arial, sans-serif;
	letter-spacing: .5px;
	}
	
	.bottomMenu{
	padding-top: 10px;
	font: .8em/2em 'GoudyBookletter1911Regular', Arial, sans-serif;
	width:80%;

	}


}