/*
	  New Perspectives on HTML and CSS
      Module 7
	  Multimedia Assignment	
      Author: Robert Petry Jr
      Date: May 27, 2016

	  This file is for the styles for all of the html files
      Filename: style.css
      Supporting files: 
*/


/* Body Styles */
body{
	background:url(../multimedia/SumLake.jpg) no-repeat;
	width: 90%;
	height: auto;
	font-family: Tahoma, Times New Roman, sans-serif; 
	font-weight: normal;
	font-size: 15px;
	margin: auto;
	position: relative;
}

/* Header Styles */
header{
	width: 100%;
	background:url(../multimedia/woodTexture.png);
	color: white;
	font-weight: bold;
	
}

header h1{
	font-size: 3.0em;
	font-family: "Copperplate Gothic Light", sans-serif;
	font-weight: bold;
	color: white;
	letter-spacing: 15px;
	text-align: center;
	margin-top: -5%;
}

header h2{
	font-size: 3.0em;
	font-family: "Copperplate Gothic Light", sans-serif;
	font-weight: bold;
	color: white;
	letter-spacing: 15px;
	text-align: center;
	margin-top: -2%;
}

header nav{
	text-align: center;
	margin: 10px;
}

header nav li{
	display: inline;
	width: 14%;
	margin-left: 15px;
	margin-right: 4%;
	margin-bottom: 5px;
	text-align: center;
}

header nav li a{
	display: inline;
	text-align: center;
	color: white;
	font-size: 1.0em;
	font-weight: bold;
	text-decoration: none;
	
}

/* Middle Section Styles */
section.middle {
   width:  30%;
   float: left;
   margin-left: 175px;
}

section article {
   background: url(../multimedia/woodTexture2.png);
   border: 1px  solid black;
   color: white;

   -moz-border-radius:  30px;
   -webkit-border-radius:  30px;
   border-radius: 30px;

   margin-bottom: 20px;
}

section article p {
   font-size: 0.9em;
   margin: 15px;
}

footer{
	border-top: 2px solid red;
	text-align: right;
	padding-top: 25px;
	clear: both;
	color: white;
}

/* Media Player */
#player{
	padding-top: 10px;
	width: 100%;
}
/* Anchor Styles */
a{
	text-decoration: none;
	color:white;
}

a:hover{
	text-decoration: underline;
	font-weight: bold;
	
}


/*familyCampgrounds Table style*/

table.friendlyCampgrounds{
	color: white;
	border: 1px solid black;
	font-size: 16px;
	margin-bottom: 20px;
	margin-right: 20px;
	float: right;
	border-collapse: collapse;
	background-size: 108%;
}

/*td style*/
td{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
	width: 50px;
}

/*familyCampgrounds caption style*/
table.friendlyCampgrounds caption{
	font-size: 18px;
	letter-spacing: 5px;
	margin-bottom: 10px;
	width: auto;
	caption-side: top;
}

table.friendlyCampgrounds{
	color: white;
	font-weight: bold;
}

/*familyCampgrounds table head style*/
table.friendlyCampgrounds thead{
	background-repeat: repeat;
		
}

table.friendlyCampgrounds caption{
	background: black;
}

table.friendlyCampgrounds thead tr{
	height: 40px;
}

table.friendlyCampgrounds thead tr th{
	background: #957ADF;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 50px;
	letter-spacing: 2px;
}

th{
	text-align: center;
}
/*familyCampgrounds table body style*/
table.friendlyCampgrounds tbody tr{
	height: 50px;
	border-bottom: 1px dotted gray;
}

table.friendlyCampgrounds tbody tr td{
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 0px;
	letter-spacing: 2px;

}


table.friendlyCampgrounds tbody tr:nth-of-type(even){
	background: #186DC3;
	opacity: .90;
}

table.friendlyCampgrounds tbody tr:nth-of-type(odd){
	background: #627C97;
	opacity: .90;
}

#clock, #dateBox{
	font-family: monospace; 
	font-size: 20px; 
	color: #822A2B; 
	font-weight: bold; 
	padding: 10px;
}

/* Vertical Navigation Styles */
nav.vertical {
   float: left;
   width: 15%;
   margin-top: -15px;

   -op-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
}

nav.vertical ul {
   background: url("../multimedia/clearTexture.png");
   margin-left: 10px;
}

nav.vertical li.lTitle {
   font-size: 1.2em;
   margin-top: 30px;
   margin-bottom: 12px;
   color: #A87705;
   font-weight: bold;
}

nav.vertical li {
   display: block;
   margin-bottom: 3px;
}

nav.vertical li a {
   display:block;
   width: 100%;
   font-size: 1.0em;
   margin-left: 15px;
   color: #A87705;
}

nav.vertical li a:hover {
   color: rgb(162, 112, 41);
}