@charset "utf-8";
*										/*all browsers start with the same settings*/
	{
	margin:0;
	padding:0;
	outline:0;
	font-size:1em;
	font-style:normal;
	font-weight:normal;
	line-height:1;
	vertical-align:baseline;
	text-decoration:none;
	}
html
	{
	background-color:#333;
	}
body
	{
	font-size:100%;						/*entire site fonts are changed using this one setting. IRD in most browsers 100% = 16px.*/
	font-family:Jura;					/*Google Fonts*/
	background-color:#fff;
	}
h1,h2
	{
	font-family:Arizonia;				/*Google Fonts*/
	font-size:2em;						/*using em allows type to scale. IRD 16px = 1em*/
	text-shadow:2px 3px 2px #aaa;
	color:#000;
	}
strong, strong a
	{
	font-weight:bold;
	}
li
	{
	font-weight:bold;
	padding-top:0.8em;
	}
video
	{
	padding:1.5%;
	box-shadow:5px 7px 10px 5px #888;
	width:100%;							/*scales video to fit screen size*/
	}
#venuelistcenterh1
	{
	text-align:center;
	}
.unitblockvideo
	{
	margin-left:auto;					/*centers video on screen*/
	margin-right:auto;					/*centers video on screen*/
	padding:0 3% 1em 0;					/*video not centered without this adjustment*/
	max-width:70%;
	}
.unitblockvideo h1, .unitblockvideo p
	{
	text-align:center;
	padding:1em 0;
	}
.unitblockvenue
	{
	float:left;
	width:50%;
	margin-bottom:5%;
	}
.cityvenue, .privacyp
	{
	padding-top:1em;
	text-align:justify;
	line-height:1.5;
	}
.shellsecondaryvenue
	{
	float:left;					/*stacks each shellsecondaryvenue div on top of each other*/
	text-align:center;
	width:100%;
	padding-top:3%;
	}
.shellsecondaryvenue li
	{
	list-style-type:none;
	}
#bullets ul
	{
	float:left;
	padding:2% 2% 2% 4%;
	border:0.1em dashed #ccc;	
	}
#bullets:after
	{
	content:"";
	display:block;
	clear:both;
	}
.cleardiv:after
	{
	content:"";
	display:table;
	clear:both;
	}
/**************HEADER****************/
#shellheader
	{
	position:fixed;						/*fixed position keeps header pinned to the top of the screen at all times*/
	width:100%;							/*infinite width expansion of header background*/
	top:0;
	left:0;
	right:0;
	background-color:#fff;
	padding-bottom:0.3em;
	border-bottom:0.1em dashed #ccc;
	box-shadow:0 7px 5px 0 #ccc;	/*FIRST px= left or right side** SECOND px= bottom or top** THIRD px= distance from background** FOURTH px= spread */
	}
header
	{
	text-align:center;					/*centers logo/phone for small screens. When the screen size changes to computers, the logo moves from center to the left of the screen*/
	}
header  img/*LOGO*/
	{
	max-width:18em;						/*reduces the size of the logo for the smallest screens*/
	clear:right;
	padding-top:0.3em;
	}
#phone
	{
	font-family:Arizonia;
	font-size:1.4em;
	color:#444;
	text-shadow:2px 2px 2px #ccc;
	}
/*************NAVIGATION*************/
nav a
	{
	display:block;						/*for mobile screens*/
	font-weight:bold;
	background-color:#000;
	border-top:0.1em solid #999;		/*a visible space between links on mobile devices*/
	text-align:center;
	padding:0.2em 0;
	max-height:1em;
	}
nav a:link,nav a:visited,nav a:active		/*keep each state the same color*/
	{
	color:#ccc;
	}
#navhere								/*dynamic php code places this div on current page*/
	{
	background-color:#777;
	}
/* move main nav links one top, two side by side to decrease nav menu footprint for small screens*/
nav a:nth-child(1),nav a:nth-child(3),nav a:nth-child(5)
	{
	float:left;
	width:49.8%;
	}
nav a:nth-child(2),nav a:nth-child(4),nav a:nth-child(6)
	{
	float:right;
	width:49.8%;
	}
/***********MAIN BODY*************/
#shellprimary
	{
	margin-left:5%;						/*h1 and paragraph body copy below fixed header. sides use % for flexibility*/
	margin-right:5%;
	margin-bottom:1em;
	padding-top:11em;					/*moves shellprimary below "fixed" header for mobile devices*/
	}
.h1block
	{
	text-align:center;
	padding-top:5%;
	font-size:130%;
	}
.unitblock
	{
	padding-bottom:3em;					/*space between each unitblock division*/
	clear:left;
	}
.unitblock p a,.unitblockvenue p a, .centerp a, .mappages a, #maphome a
	{
	text-decoration:underline;			/*links stand out with underline*/
	color:#043081;						/*use color to stand out from surrounding text*/
	}
.unitblock p
	{
	line-height:1.3;					/*easier to read text on mobile*/
	text-align:justify;					/*uniform look*/
	}
.unitblock img
	{
	margin-right:1em;
	float:left;							/*allows text to flow around img*/
	padding:1.5%;						/*white border arround images*/
	max-width:30%;						/*maximum percentage of img size calculated by the img container. the img stays no more than 20% of its container*/
	box-shadow:5px 7px 10px 5px #888;	/*shadow under img for depth*/
	border:0.1em dashed #ccc;			/*nice border around img*/
	height:auto;
	}
/***********FLEET MOBILE SCREENS*************/
#shellprimaryfleet
	{
	text-align:center;
	padding-top:9em;					/*moves shellprimaryfleet below fixed header*/
	padding-bottom:2%;					/*space between footer and shellprimary*/
	}
.unitblockfleet
	{
	padding-top:5%;
	padding-bottom:5%;
	border-bottom:0.1em dashed #ccc;
	}
.unitblockfleet:last-child
	{
	border-bottom:none;
	}
.unitblockfleet p
	{
	font-weight:bold;
	padding:1% 0;
	}
.caption
	{
	font-style:italic;
	font-weight:normal;
	}
.interiorimage
	{
	margin-top:1em;
	}
.unitblockfleet img
	{
	padding:2%;							/*picture frame around img*/
	max-width:50%;						/*image size % of parent container*/
	height:auto;						/*makes image constrain while reducing in size*/
	border:0.1em dashed #ccc;			/*nice border around img*/
	box-shadow:5px 7px 10px 5px #888;	/*shadow under img for depth*/
	}
/*********SITE MAP************/
#maphome
	{
	margin:4%;
	}
#maphome h1
	{
	padding-bottom:3%;
	}
#maphome, .mappages
	{
	text-align:center;
	}
.mappages
	{
	margin-bottom:3em;
	}
.mappages a
	{
	margin:2%;
	}
/************FOOTER***********/
footer
	{
	text-align:center;	
	background-color:#333;
	box-shadow:0 -5px 7px 0 #999;		/*FIRST px= left or right side** SECOND px= bottom or top** THIRD px= distance from background** FOURTH px= spread */
	clear:both;
	}
footer a
	{
	display:block;						/*small sceen size requires block display for touch activation*/
	padding:0.2em 0;					/*vertical expansion of block links allows for finger touch*/
	border-bottom:0.1em solid #555;		/*makes block links stand out from each other*/
	}
footer a:first-child
	{
	border-top:0.1em dashed #999;		/*top link element needs a border to separate shellprimary from footer*/
	}
footer a:link,footer a:visited,footer a:active
	{
	color:#bbb;							/*link text color remains the same for the states listed above*/
	}
footer img
	{
	padding-top:1em;
	}
footer p									/*copyright text position, color and size*/
	{
	padding:1em 1em;
	text-align:center;
	font-size:.9em;
	padding-bottom:1em;
	color:#777;
	}
#facebook
	{
	padding:0.1em 0.1em 0 0.5em;
	background-color:#617aac;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	border: 0.5px solid black;
	border-radius:0.2em;
	box-shadow:0 1px 7px 0 #999;
	}
/*************FORM*************/
fieldset
	{
	border:dotted 0.1em #2a3333;
	padding:2%;
	font-weight:bold;
	width:95%;
	min-width:14em;
	}
legend
	{
	font-weight:bold;
	background-color:#fff;
	padding:0 .5em;
	}
label
	{
	display:block;
	font-size:.8em;
	}
textarea
	{
	min-width:50%;
	max-width:75%;
	height:8em;
margin-bottom:2em;
	}
#shellprimary fieldset img
	{
	float:none;
	margin:0;
	max-width:100%;
	box-shadow:none;
	}
#shellprimary fieldset p
	{
	margin-left:0;
	}
/*FIRST BREAKPOINT((((((((((((((((((MEDIA))))))))))))))))))*/
/*convert px to em for users who have already zoomed in a few levels. 500px divby 16px = 31.25em*/
@media only screen and (min-width:31.25em){
header  img
	{
	max-width:22em;						/*1st size increase for logo. makes it stay the same size regardless of screen width*/
	}
.unitblock p
	{
	line-height:1.7;					/*increase line height to make text easier to read*/
	}
}
/*SECOND BREAKPOINT(((((((((((((((((((MEDIA)))))))))))))))))))*/
/*convert px to em for users who have already zoomed in a few levels. 740px divby 16px = 46.25em*/
/*^^^^^^^Laptop and Desktop Computers^^^^^^^^*/
@media only screen and (min-width:46.25em){
nav										/*underlying bar for nav a elements*/
	{
	padding:0.2em 0;
	text-align:center;					/*centers a elements in bar*/
	background-color:#000;
	box-shadow:0 7px 5px 0 #aaa;
	}
nav a									/*navigation switches to inline for computer viewing*/
	{
	display:inline;
	padding:0.15em 1em;
	margin:0 -0.12em;
	font-size:1.1em;					/*IRD 18px divby 16px = 1.1em*/
	font-weight:bold;
	background-color:#000;
	border-right:0.1em solid #555;		/*color between each button*/
	border-top:none;					/*remove top border used for mobile devices*/	
	/* bring background-color back to original color after hover*/
	-webkit-transition: background-color 700ms;
	-moz-transition: background-color 700ms;
	-o-transition: background-color 700ms;
	-ms-transition: background-color 700ms;
	transition: background-color 700ms;
	}
nav a:first-child
	{
	border-left:0.1em solid #555;
	}
nav a:hover								/*hover state brought in for use with mouse pointer*/
	{
	background-color:#555;	
	/*make background-color transition from rest state to hover state*/
	-webkit-transition: background-color 700ms;
	-moz-transition: background-color 700ms;
	-o-transition: background-color 700ms;
	-ms-transition: background-color 700ms;
	transition: background-color 700ms;
	}
nav a:nth-child(1),nav a:nth-child(2),nav a:nth-child(3),nav a:nth-child(4),nav a:nth-child(5),nav a:nth-child(6)
	{
	float:none;							/*changes mobile float to none on computer screens*/
	}
header
	{
	display:inline;						/*move logo from small screen center to left for computer size screens*/
	}
header img
	{
	margin:1em 0 0 5%;					/*keep top margin the same distance as mobile but expand distance from the left side by 5%*/
	max-width:100%;						/*contain logo to 100% of parent container*/
	}
#phone
	{
	float:right;						/*from centered text on mobile to right of screen for computer screens*/
	margin:2em 5% 0 0;					/*fixed distance down from top and stay % away from right side as window expands or contracts*/
	}
#shellprimary
	{
	padding-top:9em;					/*move shellprimary below "fixed" shellheader on larger screens*/
	}
#shellprimaryfleet
	{
	padding-top:6em;					/*moves shellprimaryfleet up from mobile layout of fixed header*/
	}
.unitblock ul
	{
	line-height:1.9;					/*improve readability for larger screens from previous setting*/
	}
.unitblock img
	{
	max-width:50%;						/*image size % of parent container*/
	border:0.1em dashed #ccc;			/*dashed border around images*/
	}
	/************FOOTER***********/
footer
	{
	padding:1.5em 0 0 0;				/*increase height of footer above a elements*/
	border-top:0.1em dashed #999;		/*footer a:first-child in mobile design is removed in this breakpoint, so it must be brought back in as a top footer border here*/
	}
footer a
	{
	display:inline;						/*match inline nav bar format for larger screens*/
	margin:0 2em;						/*space between each a element*/
	border:none;						/*remove border of primary mobile design*/
	}
footer a:first-child
	{
	border:none;						/*remove border of primary mobile design*/
	}
footer a:hover
	{
	color:#fff;							/*introduce hover state for computer pointer devices*/
	}
}
/*THIRD BREAKPOINT(((((((((((((((((((MEDIA)))))))))))))))))))*/
/*convert px to em for users who have already zoomed in a few levels. 920px divby 16px = 57.5em*/
@media only screen and (min-width:57.5em){
header img
	{
	margin-left:8%;						/*align left side of logo with shellprimary img*/
	}
#phone
	{
	margin-right:8%;					/*align right side of phone number with shellprimary paragraph text*/
	}
#shellprimary
	{
	padding-left:3%;
	padding-right:3%;					/*align shellprimary left edge of img with left edge of logo*/
	border-left:0.1em dashed #ccc;		/*introduce dashed border for computer screen design*/
	border-right:0.1em dashed #ccc;
	}
#shellprimaryfleet
	{
	margin-left:5%;
	margin-right:5%;					/*align shellprimary left edge of img with left edge of logo*/
	border-left:0.1em dashed #ccc;		/*introduce dashed border for computer screen design*/
	border-right:0.1em dashed #ccc;
	}
}
/*FOURTH BREAKPOINT(((((((((((((((((((MEDIA)))))))))))))))))))*/
/*convert px to em for users who have already zoomed in a few levels. 1200px divby 16px = 75em*/
@media only screen and (min-width:75em){
}
/*FIFTH BREAKPOINT(((((((((((((((((((MEDIA)))))))))))))))))))*/
/*convert px to em for users who have already zoomed in a few levels. 1398px divby 16px = 83.375em*/
@media only screen and (min-width:83.375em){
/*the nav and footer a elements need to transition from center align because as the page widens the center of the page moves too far from the left side of the window*/
/*this can be achieved by using the left side of the screen as our starting point of contact then using % to push the nav out from the wall. % works better here than em because it still moves, but just a lot slower*/
nav
	{
	text-align:left;					/*transition from center text to align left text as page width moves too far from left side. this will slow the transition*/
	padding-left:31%;					/*the begining point now is the left side of the screen. by using % nav a moves to the right side much slower now*/
	}
#footernav
	{
	text-align:left;					/*same explanation as nav above me*/
	padding-left:31%;					/*same explanation as nav above me*/
	}
footer p
	{
	text-align:left;					/*same explanation as nav above me*/
	padding-left:37%;					/*same explanation as nav above me*/
	}
#phone
	{
	position:absolute;					/*the method used just above me won't work as well because I'm too far from the left starting edge and my percentage becomes too large.*/
	top:0.9em;
	left:39.5em;
	}
#shellprimary,#shellprimaryfleet
	{
	max-width:74em;						/*slow the transition speed so these div won't get too far from the left side of the screen*/
	}
}