/*

Sun-N-Sand CSS by Gary Weyandt Quality Cavalry LLC

Author: Gary Weyandt

Date: 6/15/2018
*/
/* Universal Selector*/
* { box-sizing: border-box; }
/* Body format */
body {
	background-color : #FFFFFF; /*white*/
	background-image: url(background.jpg); /*Blue stripe gives background color*/
	color : #666666; /*Gray40*/
	font-family : Verbena;
}
/* Main format */
main {
	background-color: #FFFFFF; /*white*/
	margin-left : 210px;
	padding: 1px 0px 1px 10px;
}
/* heading 1 format */
h1 {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	left: 210px;
	height: 25px;
	padding-left : 20px;
	color : #FFFFFF; /*white*/
	font-family : Georgia;
	line-height : 100%;
	margin-bottom : 0;
	text-align: center;
	margin-left: 210px;
	margin: 0;
	font-size: 2em;
	}
/* heading 2 format */
h2 {
	color : #3399CC; /* blue for heading */
	font-family : Georgia;
}
/* heading 3 format */
h3 {
	color : #000033; /*very dark blue*/
}
nav { float : left;
	top: 0px;
	width : 190px;
	padding : 10px 5px 0px 10px;
	font-weight: bold;
	position: sticky;
	z-index: 1;     /*position the navigation button on top of other page content*/
}
#wedologo {
	background-color : #000033; /*very dark blue text*/
	height: 75px;
	padding-top: 5px;
	padding-left : 5px;
	margin-bottom : 0;
	width: 190px;
	position: sticky;
}
nav a {text-decoration: none;
	font-weight : bold;
	white-space: pre-line;
}
nav a:link {color: #000033; } /*very dark blue*/
nav a:visited {color: #344873; }
nav a:hover {color: #FFFFFF; } /*white*/
/* Dropdown Button*/
/* The width is the nav column and must accommodate the widest text on one line*/
/* The widest text is About Sun-N-Sand*/
.dropbtn {
    float : left;
	width : 200px;
	padding : 5px 5px 0px 5px;
	font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
/* Dropdown Content (Hidden by Default) Opens on Mouse Over */
/* The width must accommodate the widest text on one line*/
/* The widest text is * Membership Information*/
/* The left margin must position to the right of the upper level menu but not leave a gap*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
	margin-left: 200px;
    min-width: 200px;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #000000}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.controls {
	float: right;
}
/* footer format */
footer {
	margin-left: 210px;
	margin-right: auto;
	padding : 10px;
	font-size : .80em;
	font-style : italic;
	text-align : center;
	background-color: #FFFFFF;/*white*/
}
/* table format*/
table {
	width: 90%;
	border: 1px solid #3399cc;
	border-collapse: collapse;
}
td, th {
	border: 1px solid #3399cc;
	padding: 5px;
}
td {
	text-align: center;
}
text {
	text-align: left;	/*This overrides the td left align*/
}
label  {		/*label*/
	float: left;
	display: block;
	width: 8em;
	padding-right: 1em;
}
input {			/*input for form*/
	display: block;
	margin-bottom: 1em;
}
textarea {			/*textarea */
	display: block;
	margin-bottom: 1em;
}
.mySubmit {margin-left: 10em; }
.altrow:nth-of-type(odd) { background-color: #F5FAFC; }
/*  style rule for wrapper */
#wrapper {
	width : 90%;
	margin-left: auto;
	margin-right: auto;
	background-color : #90C7E3; /*nav area blue*/
	min-width : 700px;
	max-width : 1024px;
	box-shadow: 5px 5px 5px #3399CC;
}
#wedohed1 {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	height: 45px;
	padding-top: 5px;
	padding-left : 20px;
	font-family : Georgia;
	line-height : 100%;

	margin-bottom : 0;
	text-align: center;
	font-size: 2em;
	color : #FFFFFF; /*white*/
}
#wedohed2 {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	height: 65px;
	padding-left : 20px;
	font-family : Georgia;
	line-height : 100%;
	margin-bottom : 0;
	text-align: center;
	font-size: 1.5em;
	color : #FFFFFF; /*white*/
}

/* navigation */
.logo {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	height: 75px;
	padding-top: 5px;
	padding-left : 5px;
	font-family : Georgia;
	margin-bottom : 0;
	width: 190px;
	color : #FFFFFF; /*white*/
}
.office {
	color : #000033; /* Almost black */
	font-size : 1.2em;
}
.office2 {
	color : #000033; /* Almost black */
	font-size : 1.2em;
	white-space: pre-line;
}
.wedo {
	color : #FFFFFF; /*white*/
	font-size: .8em;
}
/* style rules for homehero */
#snshomehero {
	height : 175px;
	margin-left: 210px;
	background-image: url(snsnewtemppan.png);
	background-position : left;
	background-size : contain;
	background-repeat : no-repeat;
}

#mobile { display: none; }
#desktop { display: inline; }
#mysubmit {margin-left: 10em}
/* Provide compatibility to older browsers*/
header, nav, main, footer { display: block; }

/*For Slide Show*/
.sns-center {text-align:center}
.sns-content{max-width:980px;margin:auto}
.sns-display-container{position:relative}
.sns-black hover{color:#fff!important;background-color:#000!important}
/*Use left and rigth if you want the buttons in the middle of the pictures*/
.sns-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%)}
.sns-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%)}

/*media queries*/
/*******************MEDIA QUERY MAX 1024**************/
@media only screen and (max-width: 1024px){
	body {
		margin: 0;
		padding: 0;
		background-image: none;
	}
	#wrapper {
		width: auto;
		min-width: 0;
		margin: 0;
		box-shadow: none;
	}
	#wedohed1 {
		background-color : #000033; /*very dark blue text*/
		background-position : right;
		height: 40px;
		padding-left : 0px;
		font-family : Georgia;
		line-height : 100%;
		margin-bottom : 0;
		text-align: center;
		font-size: 1.75em;
		color : #FFFFFF; /*white*/
	}
#wedohed2 {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	height: 55px;
	padding-left : 20px;
	font-family : Georgia;
	line-height : 100%;
	margin-bottom : 0;
	text-align: center;
	font-size: 1.25em;
	color : #FFFFFF; /*white*/
}
	nav  {
/*Float none was removed to put image beside navigation buttons.*/
		width: auto;
		padding:0.5em;
		position: relative;
	}
	nav a {
		padding: 1em;
	}
	main {
		padding: 1em;
		margin-left: 210px;
		font-size: 90%;
	}
	footer {
		margin: 0;
	}
	#snshomehero {
		margin-left: 210px;
	}
	#mobile { display: inline; }
	#desktop { display: none; }
}
/*******************MEDIA QUERY MAX 768**************/
@media only all and (max-width: 768px){
.snslogo {
	display: none;
}
#wedohed1 {
	background-color : #000033; /*very dark blue text*/
	background-position : right;
	height: 100%;
	padding-left : 0px;
	font-family : Georgia;
	line-height : 100%;
	margin-bottom : 0;
	text-align: center;
	font-size: 1em;
	color : #FFFFFF; /*white*/
}
	nav  {
/*Float none puts h2 below the nav*/
		float: none;
		padding: 0;
	}
	nav a {
		padding: 0.2em;
		font-size: 1em;
		border-color: #315000;
		border-bottom: 1px;
	}
	main {
		margin-left: 0;
		padding: 0.1em 0.6em 0.1em 0.4em;
	}
.leftvideo {display: none;}
	footer {
		padding: 0;
	}
#snshomehero {
	display: none;
}
#mobile { display: inline; }
#desktop { display: none; }
}