/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/
/* GENERAL RULES FOR EVERYTHING */
/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/

html,body{
margin:0px;
padding:0px;
height:100%;
}

a{
border:none;
outline:none;
text-decoration:none;
font-weight:bold;
color:#cc042a;
}

a:hover{
color:red;
}

.mobileAppear{
	display:none;
}

.tabletAppear{
	display:none;
}

.phoneAppear{
	display:none;
}

#main{
	width:1000px;
	min-height:1000px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:60px;
	margin-bottom:60px;
	//background-color:rgb(250,250,250);
}

.content{
	border:0px solid silver;
	width:100%;
	min-height:50px;
	position:relative;
	margin-bottom:30px;
}

.standardText{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:15px;
	line-height:22px;
	text-align:left;
}

.smallText{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:15px;
	line-height:20px;
	text-align:left;
}

.caption{
	display:block;
	margin-top:5px;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:13px;
	line-height:16px;
	text-align:left;
	font-style:italic;
}

p{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:17px;
	line-height:25px;
	margin-top:0px;
	text-align:justify;
}

h1{
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:#666;
	font-size:35px;
	line-height:40px;
	margin-top:0px;
}

h2{
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:#666;
	font-size:25px;
	line-height:30px;
	margin-top:0px;
}

h3{
	display:inline-block;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#888;
	font-size:18px;
	line-height:20px;
	text-align:left;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-top:0px;
}

.halfBold{
	font-weight:400;
	color:#666;
	font-size:15px;
}

.officialTitle{
	display:inline-block;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#888;
	font-size:22px;
	line-height:25px;
	text-align:left;
	text-transform:uppercase;
	letter-spacing:2px;
}

.horizontalLine{
	border-top:1px solid silver;
	position:relative;
	height:30px;
	width:1000px;
	margin-top:15px;
}

.downTriangle{
	font-size:12px;
	font-family: arial, times, tahoma bold italic, sans-serif;
	
}

/* FOOTER */

footer{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:97%;
	min-height:100px;
	background-color:#444;
	
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#signatureDiv{
	border:0px solid silver;
	position:absolute;
	top:25px;
	left:25px;
	width:200px;
}

#siteByText{
	position:relative;
	top:15px;
}

#CSLLogo{
	display:block;
	position:relative;
	width:35px;
	float:left;
	top:5px;
	margin-right:10px;
}

.footerText{
	color:#bbb;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size:12px;
	line-height:12px;
	text-align:center;
}

.footerLink{
	color:#bbb;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size:11px;
	line-height:11px;
	text-align:left;
}

.footerLink:hover{
	color:#ccc;
}

#footerCreditsDiv{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	max-width:500px;
	top:35px;
}

#footerSocialDiv{
	position:absolute;
	top:25px;
	right:25px;
}

.footerSocialIcon{
	width:40px;
	opacity:0.7;
	margin-left:2px;
	margin-right:2px;
}

.footerSocialIcon:hover{
	opacity:0.9;
}

table{
	border: 1px solid silver;
}

td{
	border: 1px solid silver;
	vertical-align:top
}

/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/
/* CONTENT PAGE NAVIGATION */
/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/

#navigationDiv{
	position:fixed;
	height:50px;
	width:100%;
	z-index:1;
}

#navigationBox{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	height:40px;
	width:96%;
	background-color:rgba(20,20,20,0.8);
	
	-webkit-transition: height 0.2s, width 0.2s; /* Safari */
	transition: height 0.2s, width 0.2s, border-radius 0.5s;
	
	border-radius: 0px 0px 20px 0px;
	-moz-border-radius: 0px 0px 20px 0px;
	-webkit-border-radius: 0px 0px 20px 0px;
}

#mariBlackNameBox{
	position:absolute;
	height:40px;
	width:130px;
	background-color:#cc042a;
	color:white;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	font-size:12px;
	line-height:40px;
	text-align:center;
	letter-spacing:1px;
}

#navItemsDiv{
	position:absolute;
	left:155px;
}

.navItem{
	position:relative;
	display:inline-block;
	color:white;
	line-height:40px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:2px;
	margin-right:10px;
	cursor:pointer;
}

.navItem:hover{
	color:#ddd;
}

.navigationDropDownContainer{
	display:none;
	position:absolute;
	padding:3px;
	padding-top:0px;
	left:-11px;
	width:185px;
	background-color:rgba(20,20,20,0.2);
}

.navigationDropDown{
	position:relative;
	display:block;
	background-color:white;
}

.navigationDropDownItem{
	display:inline-block;
	margin-right:10px;
	cursor:pointer;
	width:95%;
	padding-left:5%;
	font-weight:300;
	color:#666;
}

.navigationDropDownItem:hover{
	color:#333;
	background-color:#efefef;
}

.navigationDropDownItem.current{
	color:#cc042a;
	font-weight:400;
	background-color:white;
	cursor:default;
}

#menuIcon{
	display:none;
	position:absolute;
	left:150px;
	top:11px;
	cursor:pointer;
	opacity:0.7;
}

#menuIcon:hover{
	opacity:1;
}

#navSocialDiv{
	position:absolute;
	right:10px;
	top:8px;
}

.navSocialIcon{
	width:23px;
	opacity:0.7;
	margin-left:1px;
	margin-right:1px;
}

.navSocialIcon:hover{
	opacity:0.9;
}

#featureNavButtonDiv{
	position:absolute;
	right:133px;
}

.featureNavButton{
	display:inline-block;
	position:relative;
	height:40px;
	color:white;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:2px;
	line-height:40px;
	padding-left:10px;
	padding-right:10px;
	cursor:pointer;
	background-color:rgba(204,4,42,1);
}

.featureNavButton:hover{
	background-color:rgba(204,4,42,0.7);
}

#mobileNavigationDropDown{
	display:none;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:88%;
	top:0px;
	padding:10px;
	background-color:rgba(20,20,20,0.2);
}

#mobileNavigationDropDownBox{
	display:block;
	position:relative;
	height:auto;
	max-height:80vh;
	width:auto;
	padding:25px;
	padding-bottom:5px;
	background-color:white;
	overflow:scroll;
}

#mobileNavCloseButton{
	position:absolute;
	cursor:pointer;
	font-family:'Lato', sans-serif;
	font-weight:400;
	font-size:18px;
	right:15px;
	top:7px;
	color:#aaa;
}

#mobileNavCloseButton:hover{
	color:#666;
}

.mobileNavigationItemBox{
	display:block;
	vertical-align:top;
	margin-bottom:30px;
}

.mobileNavigationTitle{
	color:#aaa;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:2px;
	cursor:default;
	margin-bottom:10px;
}

.mobileNavigationItem{
	color:#666;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:15px;
	text-transform:uppercase;
	letter-spacing:2px;
	cursor:pointer;
}

.mobileNavigationItem:hover{
	color:#333;
	background-color:#efefef;
}

.mobileNavigationItem.current{
	color:#cc042a;
	font-weight:400;
	background-color:white;
	cursor:default;
}

.navigationDropDownItem.current{
	color:#cc042a;
	font-weight:400;
	background-color:white;
	cursor:default;
}

.mobileNavigationItem.featured{
	display:inline-block;
	margin-top:10px;
	color:white;
	background-color:#cc042a;
	padding:5px;
	padding-left:10px;
	padding-right:10px;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

.mobileNavigationItem.featured:hover{
	background-color:rgb(169,4,42);
}

/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/
/* CONTENT PAGES (OTHER THAN NAVIGATION) */
/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/

#topFeaturePhotoArea{
	position:relative;
	display:block;
	width:100%;
	max-height:610px;
	overflow:hidden;
	z-index:0;
}

#topFeaturePhotoArea img{
	position:relative;
	display:block;
	width:100%;
	height:auto;
	z-index:0;
}

#featurePhotoCredit{
	display:block;
	position:absolute;
	height:10px;
	left:7px;
	margin-top:5px;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:10px;
	line-height:10px;
	color:#bbb;
	text-align:left;
	text-transform:uppercase;
}

.photoCredit{
	height:10px;
	width:50%;
	margin-top:-10px;
	
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:10px;
	line-height:10px;
	color:#bbb;
	text-transform:uppercase;
}

.photoCredit.left{
	float:left;
}

.photoCredit.right{
	float:right;
}

#accoladesDiv{
	position:absolute;
	margin-left:2%;
	margin-right:2%;
	bottom:0px;
	width:94%;
	height:50px;
	padding-left:1%;
	padding-right:1%;
	padding-top:10px;
	padding-bottom:15px;
	background-color:rgba(20,20,20,0.8);
	z-index:2;
	overflow:visible;

	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:18px;
	color:#eee;
	text-align:center;
	
	border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
}

#quoteDiv{
	display:block;
	position:absolute;
	width:82%;
	width:calc(99% - 180px);
	/*VERTICALLY ALIGN*/
	top:50%;
	transform: translateY(-50%);
}

#summaryAwardIconDiv{
	display:block;
	position:absolute;
	height:100px;
	width:130px;
	padding:10px;
	right:0px;
	top:-43px;
	background-color:#333;
	
	border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
}

#awardsFooter{
	position:relative;
	padding:20px;
	padding-left:25px; /*Added to avoid the 6th award sitting by itself on the bottom line when the content is at full width*/
	padding-right:25px; /*Added to avoid the 6th award sitting by itself on the bottom line when the content is at full width*/
	background-color:#f9f9f9;
	text-align:center;
	margin-top:50px;
	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

#awardsFooter img{
	position:relative;
	display:inline-block;
	margin:10px;
	height:100px;
	opacity:0.3;
}

#mariBlackNameBoxAwards{
	position:relative;
	height:40px;
	width:100%;
	padding:10px;
	margin-left:-10px;
	margin-top:-10px;
	margin-bottom:10px;
	background-color:rgba(20,20,20,0.3);
	color:white;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	font-size:12px;
	line-height:20px;
	text-align:center;
	letter-spacing:1px;
	
	border-radius: 10px 0px 0px 0px;
	-moz-border-radius: 10px 0px 0px 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
}

#contentAwardDiv .award{
	width:115px;
}

#rotaQuoteBubble{
	display:none;
	position:absolute;
	height:auto;
	width:auto;
	max-width:400px;
	bottom:30px;
	left:20px;
	padding:25px;
	background-color:rgba(255,255,255,0.9);
	z-index:1;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

#rotaQuoteBubble img{
	width:14px;
	height:14px;
	display:block;
	position:absolute;
	bottom:25px;
	left:-14px;
}

#rotaQuoteBubble i{
	display:block;
	font-size:13px;
	margin-top:10px;
}


/*////// STAY IN TOUCH BOX AND MAILCHIMP STYLE RULES //////*/

#stayInTouchBox{
	display:block;
	position:absolute;
	margin-left:825px;
	width: 165px;
	z-index:2;
	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

/* Special @media RULES for the stayInTouchBox, which needs to vanish at widths smaller than 1220px */
@media only screen and (max-width:1220px){
	#stayInTouchBox{
		display:none;
	}
}

/*////// END MAILCHIMP STYLE RULES //////*/

#container{
	width:90%;
	max-width:800px;
	min-height:500px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	margin-bottom:60px;
}

#container .horizontalLine{
	width:100%;
}

#container .standardText{
	margin-bottom:40px;
}

.halfWidth{
	border:0px solid red;
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-right:-4px; /*Takes care of the whitespace issue on inline-block styled elements*/
	margin-bottom:10px;
	width:47%;
	min-width:307px;
}

.halfWidth.left{
	padding-right:3%;
}

.halfWidth.right{
	padding-left:3%;
}

.contentImage{
	display:block;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	margin-bottom:15px;
}

.halfWidth .contentImage{
	width:100%;
}

.textWrapLeft{
	/*To allow text to wrap around an element, like a photo*/
	width:50%;
	float:left;
	margin-right:20px;
	margin-top:15px;
}

.textWrapRight{
	/*To allow text to wrap around an element, like a photo*/
	width:50%;
	float:right;
	margin-left:20px;
	margin-top:15px;
}

.contentVideo{
	display:block;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	max-height:51vw; /*This will clip a tiny bit of the vertical space of the video but prevents excess black rectangles on top and bottom*/
}

/* MEDIATOOLS PAGE */

.hiResImageThumbnail{
	display:inline-block;
	vertical-align:top;
	margin:10px;
}

#mediaToolsPasswordInput{
	color:#888;
	display:inline-block;
	width:160px;
}

#mediaToolsPasswordSubmit{
	cursor:pointer;
}

#hiddenMediaToolsContent{
	display:none;
}

/* PHOTOGALLERY PAGE */

.photoGalleryThumbnail{
	display:inline-block;
	vertical-align:top;
	margin:3px;
	padding:5px;
	height:150px;
	cursor:pointer;
}

.photoGalleryThumbnail:hover{
	background-color:#ddd;
}

#fullScreenShade{
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(20,20,20,0.7);
	z-index:2;
}

#photoGalleryDisplayDiv{
	position:fixed;
	display:none;
	width:94%;
	padding-left:3%;
	padding-right:3%;
	padding-bottom:5%;
	height:95%;
	overflow:scroll;
	z-index:3;
}

#photoGalleryDisplay{
	background-color:white;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	display:block;
	max-width:530px;
	margin-top:10vh;
	padding:20px;
	z-index:3;
	
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
}

#photoGalleryCloseButton{
	background-color:white;
	position:absolute;
	right:-15px;
	top:-15px;
	display:block;
	width:30px;
	height:30px;
	padding:5px;
	line-height:27px;
	text-align:center;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:#888;
	cursor:pointer;
	
	border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	-webkit-border-radius: 30px 30px 30px 30px;
}

#photoGalleryCloseButton:hover{
	color:#555;
}

.selectedPhotoDiv{
	display:none;
}

.displayPhoto{
	background-color:#eee;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	display:block;
}

.photoTitle{
	display:block;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#888;
	font-size:22px;
	line-height:25px;
	text-align:left;
	text-transform:uppercase;
	letter-spacing:2px;
	margin-top:15px;
	margin-bottom:15px;
}

.photoDescription{
	display:block;
	margin-top:15px;
	margin-bottom:15px;
}

/* CALENDAR PAGE */

.eventDate{
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#666;
	font-size:18px;
	line-height:20px;
	text-align:left;
	text-transform:uppercase;
	letter-spacing:2px;
	margin-top:25px;
	margin-bottom:5px;
}

.eventTitle{
	font-weight:bold;
}

.eventDetails{
	font-style:italic;
}

/* Special @media RULES for the Navigation, for the awkward inbetween phase from 890 px till the phone styles kick in at 720px*/
@media only screen and (max-width:890px) and (min-width:721px){
	
	#navigationBox{
		height:40px;
		width:100%;
	
		-webkit-transition: height 0.2s, width 0.2s; /* Safari */
		transition: height 0.2s, width 0.2s, border-radius 0.5s;
	
		border-radius: 0px 0px 0px 0px;
		-moz-border-radius: 0px 0px 0px 0px;
		-webkit-border-radius: 0px 0px 0px 0px;
	}
	
	#navItemsDiv{
		display:none;
	}
	
	#menuIcon{
		display:block;
	}
	
}

/* VIDEOS PAGE */

.videoContainer{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:15px;
	line-height:22px;
	text-align:left;
}

.videoOuterContainer{
	height:10px;
	margin-bottom:20px;
	padding-bottom:30px;
	border-bottom:1px solid silver;
	overflow:hidden;
}

.videoTitle{
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#666;
	font-size:22px;
	line-height:25px;
	text-align:left;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:10px;
	cursor:pointer;
}

.videoTitle:hover{
	color:red;
}

/* ACCORDION FOLDER */

.accordionContainer{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:15px;
	line-height:17px;
	text-align:left;
}

.accordionOuterContainer{
	height:10px;
	margin-bottom:10px;
	padding-bottom:15px;
	border-bottom:1px solid silver;
	overflow:hidden;
}

.accordionTitle{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	color:#666;
	font-size:15px;
	line-height:15px;
	text-align:left;
	margin-bottom:5px;
	cursor:pointer;
}

.accordionTitle:hover{
	color:red;
}

.accordionTitle .halfBold:hover{
	color:red;
}

/* BOOKING PAGE */

.tdText{
	border:0px solid gray;
	margin-left:20px;
	margin-bottom:10px;
}

/* BOOKING PAGE */

#bookingConfirmationDiv{
	display:none;
	position:fixed;
	padding-left:5%;
	padding-right:5%;
	width:90%;
	height:100%;
	z-index:3;
	
	background-color:rgba(0,143,204,0.98);
	color:white;
	text-align:center;
	line-height:35px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:28px;
	text-transform:uppercase;
	letter-spacing:1px;
}

#bookingConfirmationMessage{
	display:block;
	position:relative;
	/*VERTICALLY ALIGN*/
	top:45%;
	transform: translateY(-50%);
}

fieldset{
	border:0px;
	padding:0px;
}

.control-group{
	margin-bottom:20px;
}

.form-horizontal input{
	border: 1px solid #ABB0B2;
    display: block;
    width: 100%;
    padding: 8px 0;
    text-indent: 2%;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.form-horizontal textarea{
	border: 1px solid #ABB0B2;
    display: block;
    width: 100%;
    padding: 8px 0;
    text-indent: 2%;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.form-horizontal label{
	display: block;
	margin-bottom: 5px;
	font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #888;
	cursor: default;
}

select{
	width:100%;
}

.form-horizontal button{
	display: block;
	width:100%;
	padding:10px;
	cursor:pointer;
	border:0px;
	background-color:#888;
	color:white;

	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:18px;
	line-height:20px;
	text-transform:uppercase;
	letter-spacing:1px;
	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.form-horizontal button:hover{
	background-color:#666;
}


/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/
/* HOME PAGE */
/*/////////////////////////*//*/////////////////////////*/
/*/////////////////////////*//*/////////////////////////*/


/* TOP SCREEN AREA */

#topDiv{
	position:relative;
	width:98%;
	height:99%;
	min-height:600px;
	margin-top:1%;
	margin-left:1%;
	margin-right:1%;
	overflow:hidden;
	background-color:#d4e0e9;
	background-image:url('../images/homePageCoverPhoto-tempEdit.jpg');
	background-repeat:no-repeat;
	background-position:right;
}

/* (SIZING THE COVER PHOTO: If the screen gets really big we expand the size of the photo a little. Note that IE does not support the "cover" value so a little bit of background color will show on the left side on really large screens running IE.) */
@media only screen and (min-width:2490px){
	#topDiv{background-size:cover}
}


#leftCorner{
	position:absolute;
	top:0px;
	left:0px;
	z-index:0;
}

#rightCorner{
	position:absolute;
	top:0px;
	right:0px;
	z-index:0;
}

#socialIconDiv{
	position:absolute;
	top:15px;
	right:20px;
}

.socialIcon{
	margin-left:2px;
	margin-right:2px;
	width:35px;
	cursor:pointer;
}

.socialIcon:hover{
	opacity:0.8;
}

#quickLinkBox{
	border:0px solid gray;
	position:absolute;
	top:90px;
	left:15px;
}

#topButtonDiv{
	position:relative;
	min-width:580px;
}

.quickLinkButton{
	position:relative;
	display:inline-block;
	background-color:rgb(204,4,42);
	padding:15px;
	padding-right:20px;
	padding-left:20px;
	margin-right:10px;
	margin-top:10px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:white;
	font-size:20px;
	line-height:20px;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:2px;
	cursor:pointer;
	
	-webkit-transition: background-color 0.2s; /* Safari */
	transition: background-color 0.2s;
}

.quickLinkButton:hover{
	background-color:rgb(169,4,42);
}

#MARIBLACK{
	position:relative;
	display:inline-block;
	margin-top:15px;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:rgb(204,4,42);
	font-size:8vw;
	line-height:7vw;
	text-align:left;
	letter-spacing:5px;
	cursor:default;
}

#subTitle{
	position:relative;
	margin-top:5px;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:rgb(204,4,42);
	font-size:1.5vw;
	line-height:2vw;
	text-align:left;
	text-transform:uppercase;
}

#rota-quote{
	position:relative;
	height:55px;
	max-width:565px;
	margin-top:5px;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:rgb(204,4,42);
	font-size:13px;
	line-height:20px;
	text-align:left;
	margin-bottom:10px;
	font-style:italic;
}

.quoteAuthor{
	font-style:italic;
	font-size:12px;
}

#awardDiv{
	position:absolute;
	right:20px;
	bottom:30px;
	text-align:right;
}

.award{
	width:150px;
}

/* AUDIO PLAYER */

#audioPlayerDiv{
	position:absolute;
	left:20px;
	bottom:30px;
}

#audioPlayerBubble{
	display:none;
	position:absolute;
	height:62px;
	min-width:110px;
	top:-82px;
	background-color:white;
	padding-left:15px;
	padding-right:15px;
	cursor:default;
	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

#audioPlayerBubbleArrow{
	position:absolute;
	bottom:-15px;
	left:53px;
}

#audioPlayerBackButton{
	position:relative;
	display:inline;
	margin-left:5px;
	cursor:pointer;
}

#audioPlayerAdvanceButton{
	position:relative;
	display:inline;
	margin-left:7px;
	cursor:pointer;
}

#audioPlayerBackButton:hover, #audioPlayerAdvanceButton:hover{
	top:2px;
}

#audioPlayerTrackTitle{
	position:relative;
	margin-top:10px;
	white-space: nowrap;

	color:rgb(204,4,42);
	font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#audioPlayerTrackNumber{
	position:relative;
	margin-top:5px;

	font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: rgb(204,4,42);
    font-size: 10px;
    text-transform: uppercase;
}

#audioPlayerButtonContainer{
	display:block;
	position:absolute;
	width:47px;
	height:47px;
	left:37px;
	top:10px;
	cursor:pointer;
	
	-webkit-transition: opacity 0.5s;/* Safari */
	transition: opacity 0.5s;
}

#audioPlayerButtonContainer:hover{
	opacity:0.7;
	-webkit-transition: opacity 0.1s;/* Safari */
	transition: opacity 0.1s;
}


#audioPlayerPauseButton{
	display:none;
	position:absolute;
	left:17px;
	top:13px;
}

#audioPlayerPlayButton{
	display:block;
	position:absolute;
	left:20px; 
	top:13px;
}

/* MAIN CONTENT */

.content.welcome{
	height:360px;
	margin-bottom:60px;
}

#welcomeVideo{
	position:absolute;
	height:360px;
	width:640px;
	background-color:gray;
}

#welcomeBlurb{
	position:absolute;
	height:360px;
	width:330px;
	right:0px;
}

.content.guidedTour{
	border:0px solid silver;
	width:1040px;
	height:320px;
}

#chosenCategoryContainer{
	border:0px solid silver;
	position:absolute;
	height:45px;
	width:240px;
	left:760px;
	top:-3px;
	background-color:white;
	overflow:hidden;
}

#chosenCategoryArrow{
	border:1px solid silver;
	border-left:0px;
	background-color:#eee;
	position:absolute;
	height:60px;
	width:40px;
	right:0px;
	top:45px;
	cursor:pointer;
}

#chosenCategoryArrow:hover{
	background-color:#ddd;
}

#chosenCategoryText{
	border:1px solid silver;
	border-right:0px;
	position:absolute;
	height:60px;
	width:170px;
	padding-left:30px;
	left:0px;
	top:45px;
	cursor:default;
	
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#888;
	font-size:15px;
	line-height:40px;
	text-transform:uppercase;
	letter-spacing:1px;
	text-align:left;
	
	border-radius: 10px 0px 0px 0px;
	-moz-border-radius: 10px 0px 0px 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
}

#chosenCategoryDropDown{
	border:1px solid silver;
	border-bottom:0px;
	display:none;
	position:absolute;
	height:90px;
	width:238px;
	left:760px;
	top:41px;
	background-color:white;
	z-index:2;
}

.chosenCategoryDropDownItem{
	border-bottom:1px solid silver;
	position:relative;
	height:44px;
	width:208px;
	padding-left:30px;
	
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#888;
	font-size:15px;
	line-height:45px;
	text-transform:uppercase;
	letter-spacing:1px;
	text-align:left;
	cursor:pointer;
}

.chosenCategoryDropDownItem:hover{
	background-color:#eee;
}

#chosenCategory{
	display:none;
}

#fanCategoryDiv,#organizerCategoryDiv,#playerCategoryDiv{
	display:none;
}

.guidedTourDescriptiveCaption{
	position:absolute;
	width:304px;
	top:210px;

	color:#666;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:15px;
	line-height:25px;
	text-transform:uppercase;
	letter-spacing:1px;
}

.standardText.guidedTour{
	color:white;
	position:relative;
	top:70px;
	cursor:pointer;
}

.navBox{
	position:relative;
	display:inline-block;
	vertical-align:top;
	height:200px;
	width:304px;
	margin-right:40px;
	margin-bottom:40px;
	text-align:center;
	background-color:white;
	cursor:pointer;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.navBox.guidedTour{
	background-color:rgba(204,4,42,1);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.navBox.guidedTour:hover{
	background-color:rgb(167,3,29);
}

.content.navigation{
	border:0px solid silver;
	width:1040px;
	height:525px;
}

.navBoxColor{
	position:absolute;
	height:200px;
	width:304px;
	background-color:rgba(251,176,59,0.4);
	cursor:pointer;
	z-index:0;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-transition: background-color 0.2s; /* Safari */
	transition: background-color 0.2s;
}

.navBoxOptions{
	display:none;
	position:absolute;
	height:200px;
	width:304px;
	background-color:rgba(204,4,42,0.8);
	z-index:2;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.navBoxOptionItem{
	display:block;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:white;
	font-size:18px;
	line-height:18px;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:2px;
	border-bottom:1px solid rgba(255,255,255,0.5);
	margin-left:40px;
	margin-right:40px;
	padding-top:12px;
	padding-bottom:12px;
	
	-webkit-transition: background-color 0.7s; /* Safari */
	transition: background-color 0.7s;
}

.navBoxOptionItem:hover{
	background-color:rgba(169,4,42,0.5);
	
	-webkit-transition: background-color 0.1s; /* Safari */
	transition: background-color 0.1s;
}

.navBoxOptionItem.first-of-2{
	margin-top:60px;
}

.navBoxOptionItem.first-of-3{
	margin-top:34px;
}

.navBoxOptionItem.first-of-4{
	margin-top:16px;
}

.navBoxOptionItem.last{
	border-bottom:0px;
}

.navBoxTitle{
	position:relative;
	display:inline-block;
	background-color:rgba(204,4,42,0.9);
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:white;
	font-size:20px;
	line-height:25px;
	text-transform:uppercase;
	letter-spacing:2px;
	padding:5px;
	padding-left:15px;
	padding-right:15px;
	margin-top:80px;
	z-index:1;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-transition: background-color 0.2s; /* Safari */
	transition: background-color 0.2s;
}



/* Here is where we set the background images for the navboxes */
.navBox.category.meetMari{
	background:url(../images/navBoxImage-meetMari.jpg);
}

.navBox.category.tour{
	background:url(../images/navBoxImage-tour.jpg);
}

.navBox.category.music{
	background:url(../images/navBoxImage-music.jpg);
}

.navBox.category.projects{
	background:url(../images/navBoxImage-projects.jpg);
}

.navBox.category.connect{
	background:url(../images/navBoxImage-connect.jpg);
}
/* (End) */

#newsLetterButton{
	display:block;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:60px;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	color:#999;
	font-size:30px;
	line-height:50px;
	text-align:center;
	letter-spacing:2px;
	padding:20px;
	cursor:pointer;
	background-color:#f3f3f3;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-transition: color 0.2s, background-color 0.2s; /* Safari */
	transition: color 0.2s, background-color 0.2s;
}

#newsLetterButton:hover{
	color:#555;
	background-color:#e3e3e3;
}

/*/////////////////////////*/
/* @media RULES for TABLETS*/
/*/////////////////////////*/

@media only screen and (max-width:1024px) and (min-width:721px){
	
	/*GENERAL*/
	
	.mobileVanish{
		display:none;
	}
	
	.mobileAppear{
		display:block;
	}
	
	.tabletAppear{
		display:block;
	}
	
	/*CONTENT PAGES*/
	
	#contentAwardDiv{
		display:none;
	}
	
	/*HOME PAGE*/
	
	#main{
		width:700px;
	}
	
	#quickLinkBox{
		top:60px;
		left:20px;
	}
	
	.quickLinkButton{
		padding:10px;
		padding-right:15px;
		padding-left:15px;
		margin-right:10px;
		font-family: 'Oswald', sans-serif;
		font-weight:300;
		color:white;
		font-size:15px;
		line-height:15px;
	}
	
	#MARIBLACK{
		font-size:50px;
		line-height:50px;
		letter-spacing:2px;
	}
	
	#subTitle{
		font-size:13px;
		line-height:20px;
	}
	
	.content.welcome{
		height:auto;
	}
	
	#welcomeVideo{
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}

	#welcomeBlurb{
		position:relative;
		height:auto;
		width:640px;
		right:auto;
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#welcomeBlurb p{
		font-size:15px;
		line-height:20px;
	}

	.content.guidedTour{
		width:740px;
		height:580px;
	}
	
	.horizontalLine{
		width:700px;
	}
	
	#chosenCategoryContainer{
		border:0px solid silver;
		position:absolute;
		height:45px;
		width:240px;
		left:460px;
		top:-3px;
	}
	
	#chosenCategoryDropDown{
		left:460px;
	}
	
	.content.guidedTour .navBox.category{
		margin-bottom:60px;
	}
	
	.content.navigation{
		width:740px;
		height:750px;
	}
}


/*////////////////////////*/
/* @media RULES for PHONES*/
/*////////////////////////*/

@media only screen and (max-width:720px){
	
	/* GENERAL */
	
	.mobileVanish{
		display:none;
	}
	
	.mobileAppear{
		display:block;
	}
	
	.phoneVanish{
		display:none;
	}
	
	.phoneAppear{
		display:block;
	}
	
	h1{
		font-size:30px;
		line-height:40px;
	}

	h2{
		font-size:25px;
		line-height:30px;
	}
	
	/*CONTENT PAGES*/
	
	#contentAwardDiv{
		display:none;
	}
	
	#rotaQuoteBubbleContainer{
		display:none;
	}
	
	#featurePhotoCredit{
		left:17px;
		font-size:9px;
		line-height:9px;
	}
	
	#container{
		margin-top:20px;
	}

	#container .standardText{
		font-size:15px;
		line-height:22px;
	}
	
	.halfWidth{
		display:block;
		margin-right:0px;
		width:100%;
		min-width:0px;
	}

	.halfWidth.left{
		padding-right:0px;
	}

	.halfWidth.right{
		padding-left:0px;
	}
	
	.textWrapRight,.textWrapLeft{
		/*To allow text to wrap around an element, like a photo*/
		width:100%;
		margin-right:auto;
	}
	
	/* CONTENT NAVIGATION */
	
	#navigationBox{
		height:40px;
		width:100%;
	
		-webkit-transition: height 0.2s, width 0.2s; /* Safari */
		transition: height 0.2s, width 0.2s, border-radius 0.5s;
	
		border-radius: 0px 0px 0px 0px;
		-moz-border-radius: 0px 0px 0px 0px;
		-webkit-border-radius: 0px 0px 0px 0px;
	}
	
	#navItemsDiv{
		display:none;
	}
	
	#featureNavButtonDiv{
		display:none;
	}
	
	#menuIcon{
		display:block;
	}
	
	/* TOP AREA */
	
	#topDiv{
		position:relative;
		width:98%;
		height:99%;
		min-height:500px;
		margin-top:1%;
		margin-left:1%;
		margin-right:1%;
		overflow:hidden;
		background-color:#d4e0e9;
		background-image:url('../images/homePageCoverPhoto-tempEdit.jpg');
		background-repeat:no-repeat;
		background-position:right;
		background-size:cover; /* Note that IE does not support the "cover" value so the background image may be sized strangely on some small screens */
	}

	#socialIconDiv{
		display:block;
		width:168px;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		right:0px;
		top:20px;
	}
	
	#quickLinkBox{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:300px;
		text-align:center;
		top:10px;
		left:0px;
	}
	
	#MARIBLACK{
		font-size:40px;
		line-height:40px;
		letter-spacing:2px;
	}
	
	#subTitle{
		font-size:12px;
		line-height:20px;
		text-align:center;
	}
	
	.quickLinkButton{
		padding:10px;
		padding-right:15px;
		padding-left:15px;
		margin-right:10px;
		font-family: 'Oswald', sans-serif;
		font-weight:300;
		color:white;
		font-size:15px;
		line-height:15px;
	}
	
	#awardDiv{
		position:absolute;
		right:0px;
		bottom:10px;
		text-align:right;
	}

	.award{
		width:100px;
	}
	
	/* WELCOME CONTENT */
	
	#main{
		width:280px;
	}

	.content.welcome{
		width:280px;
		height:auto;
		margin-bottom:0px;
	}
	
	#welcomeVideo{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:280px;
		height:158px;
	}

	#welcomeBlurb{
		position:relative;
		height:auto;
		width:280px;
		right:auto;
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#welcomeBlurb p{
		font-size:15px;
		line-height:22px;
	}
	
	/* GUIDED TOUR */
	
	.content.guidedTour{
		border:0px solid yellow;
		width:280px;
		height:auto;
		margin-bottom:80px;
	}
	
	#tellUsAboutYourself{
		display:block;
		height:70px;
		text-align:center;
	}
	
	.officialTitle{
		display:block;
		text-align:center;
	}
	
	.horizontalLine{
		width:280px;
	}
	
	#chosenCategoryContainer{
		width:280px;
		left:0px;
		top:65px;
	}
	
	#chosenCategoryText{
		width:210px;
	}
	
	#chosenCategoryDropDown{
		top:110px;
		left:0px;
	}
	
	.content.guidedTour .navBox.category{
		margin-bottom:60px;
	}
	
	.guidedTourDescriptiveCaption{
		width:280px;
	}
	
	.navBox{
		height:200px;
		width:280px;
		margin-right:40px;
		margin-bottom:40px;
		float:none;
	}
	
	.navBox.guidedTour{
		height:85px;
		margin-bottom:15px;
	}
	
	.standardText.guidedTour{
		font-size:15px;
		top:15px;
	}
	
	.navBoxColor{
		width:280px;
	}
	
	/* FULL NAVIGATION */
	
	.content.navigation{
		width:280px;
		height:auto;
	}
	
	.navBoxOptions{
		width:280px;
	}
	
	.navBoxOptionItem{
		margin-left:30px;
		margin-right:30px;
	}
	
	/* FOOTER */
	
	footer{
		height:220px;
	}
	
	#footerSocialDiv{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		margin-top:20px;
		left:0px;
		width:188px;
	}
	
	#footerCreditsDiv{
		top:45px;
	}
	
	#signatureDiv{
		position:relative;
		margin-left:auto;
		margin-right:auto;
		top:70px;
		left:0px;
		width:200px;
		height:50px;
	}
	
	#CSLLogo{
		float:none;
		top:0px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#siteByText{
		display:block;
		text-align:center;
		margin-top:5px;
	}
}
	
}