/*------- Global Styles-------*/



/* Removing deafualt margin and paddings. */
* {
	margin: 0px;
	padding: 0px;
}

/* Setting up the document,
it is important to have a height becase we are using min-height in some child classes. */
html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

/* Setting up our body with a background,
height needed for min-height in children,
setting a permant scrollbar so we dont get center jumping. */
body {
	margin: 0px;
	padding: 0px;
	
	height: 100%;
	min-width: 1000px;
	
 	overflow-y: scroll;
	
	background-color: #444;
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: fixed;
	background-size: cover;

	
	font-family: 'EB Garamond', serif;
}

/*Empty class is used to clear the float*/
.empty {
	clear: both;
}

/* Removing border from images */
img{
	border: none;
}

/* Stlying headers used across the site */
h1{
	font-size: 1.8em;
	font-weight: normal;
	color: #158;
	text-align: left;
}

/* Stlyling headers used across the site */
h2{
	font-size: 1.6em;
	font-weight: normal;
	color: #158;
	text-align: center;
}

/* Styling headers used across the site */
h3{
	font-size: 1.3em;
	font-weight: normal;
	color: #158;
	text-align: left;
}

/* Creats a black line with lots of space below it, used for titling our feeds */
hr{
	color: #000;
	margin: 8px 0px 20px 0px;
}

/* Sets the size of a photo commonly used after our abnners */
.bigPhoto {
	width: 500px;
	height: 281px;
	margin: 20px 0px 10px 0px;
}

/* Styles a link to look like a button */
.btnLink {
	padding: 7px 30px;
	margin-top: 5px;
    color:#fff !important;
	background-color: #158;
	text-decoration: none;
}

/* Creates an indent from the right side */
.indentR{
	margin-right: 60px;
}

/* Creates an indent from the left side */
.indentL{
	margin-left: 60px;
}

/* Creates a small amount of space on the right side */
.bufferR{
	margin-right: 10px;
}

/* Creates a small amount of space on the left side */
.bufferL{
	margin-left: 10px;
}

/* Forces the object to be displaed inline so that it will sit next to other objexts */
.inline{
	display: inline !important;
}





/*------- Site Layout -------*/



/*Creates a center colomn that wolds the pages content.
has a drop shadow on the edges and a gradient background. */
#centerColWrapper {
	margin: auto;
	padding: 0px;
	
	min-height: 100%;
	height: auto !important;
	height: 100%;
	
	margin-bottom: -110px; /* the bottom margin is the negative value of the footer's height */
	width: 1000px;
	
	background-color: #fff;
	
	/* Creating the drop shadow. */
	-webkit-box-shadow:  00px 00px 8px 8px #222;
	box-shadow:  00px 00px 8px 8px #222;	
}


/* Creates a wparrer for our default 2 column layout */
.colWrapper{
	margin-top: 25px;
}

/* Creats the default left column */
.leftCol {
	width: 500px;
	float: left;
	margin-left: 60px;
	margin-bottom: 40px;
}

/* Creats the default right column */
.rightCol {
	width: 320px;
	float: left;
	margin-left: 60px;
	margin-bottom: 40px;
}



/*----- Header -----*/


/* Contains our navigation and a our logo. */
#header {
	height: 215px;
}

/* Holds the content in the left side of our header: logo */
#headerLeft {
	margin: 0;
	padding: 0;
	height: 220px;
	width: 270px;
	
	float: left;
}

/* Holds the content in the right side of our header: navigation, contact buble, and facebook like */
#headerRight {
	margin: 0;
	padding: 0;
	height: 220px;
	width: 730px;
	
	float: left;
}

/* Creats a space for our logo to sit */
#logo {
	height: 210px;
	width: 210px;
	margin-left: 60px;
}

/* Holds our main navigation  in a space above the product navigation */
#mainNav {
	width: 320px;
	padding-top: 120px;
	float: left;
}

/* Creats an area in the top right with a background image to hold our contact info */
#contactBubble{
	height: 155px;
	width: 350px;
	float: left;
	
	background-image: url('../images/contact_bubble.png');
	background-repeat: no-repeat;
}

/* Properly positions our Facebook like button */
#fbLike{
	margin: 20px 0px 0px 47px;
}

/* Creating a list to hold our navigation. */
#header ul {
	margin: 0;
	padding: 0;
	padding-top: 2px;
	
	list-style-type: none;
	
	font-size: 1.2em;
	font-weight: normal;
	
	color: #158;
}

/* Putting all the navigation on one line, and putting space between them. */
#header ul li{
	display: inline;
	margin-left: 20px;
}

/* Setting navigation link color. */
#header a, a:visited{
	color: #158;
	text-decoration: none;
}

/* Setting navigation link hover color. */
#header a:hover, a:active{
	color: #b11;
}

/* The flowwing two bloacks are used to highlight our header and footer navigation */
/*Highlights the page you are on based off the id of the body */
#home 		#header	.navHome 			{ color: #b11; border-bottom: 4px solid #b11; }
#calendar 	#header	.navCalendar 		{ color: #b11; border-bottom: 4px solid #b11; }
#about 		#header	.navAbout 			{ color: #b11; border-bottom: 4px solid #b11; }
#comics 	#header	.navComics 			{ color: #b11; border-bottom: 4px solid #b11; }
#cards 		#header	.navCards 			{ color: #b11; border-bottom: 4px solid #b11; }
#miniatures #header	.navMiniatures 		{ color: #b11; border-bottom: 4px solid #b11; }
#boardGames #header	.navBoardGames		{ color: #b11; border-bottom: 4px solid #b11; }

/*Highlights the page you are on based off the id of the body */
#home 		#footer	.navHome 			{ color: #fff; border-bottom: 2px solid #fff; }
#calendar 	#footer	.navCalendar 		{ color: #fff; border-bottom: 2px solid #fff; }
#about 		#footer	.navAbout 			{ color: #fff; border-bottom: 2px solid #fff; }
#comics 	#footer	.navComics 			{ color: #fff; border-bottom: 2px solid #fff; }
#cards 		#footer	.navCards 			{ color: #fff; border-bottom: 2px solid #fff; }
#miniatures	#footer	.navMiniatures 		{ color: #fff; border-bottom: 2px solid #fff; }
#boardGames #footer	.navBoardGames		{ color: #fff; border-bottom: 2px solid #fff; }
#login 		#footer	.navAdmin			{ color: #fff; border-bottom: 2px solid #fff; }

/* Styles the text displaying our contact info */
#contactBubble p{
	padding-top: 20px;
	padding-right: 155px;
	
	text-align: right;
	
	font-family: 'EB Garamond', serif;
	font-size: 1.3em;
	
	color: #fff;
}

/* Stlying the contact info links */
#contactBubble a:hover, a:active{
	color: #0ff;
}

/* Styling the contact info links */
#contactBubble a, a:visited{
	color: #fff;
	text-decoration: none;
}



/*----- Content -----*/


/* Creates some space around our content. */
#content{
	height: 100%;	
}

/* Creats a border o top of a div, used for banners */
.borderTop{
	border-top: solid 1px #000;
}



/*----- Footer -----*/


/* Holds the bottom navigation., contact info, and social media links */
#footer {
	height: 100px;
	width: 1000px;
	
	margin: 0 auto;
	padding-top: 10px;
	
	color: #ccc;
	font-size: 1em;
	
	background-color: #158;
	
	-webkit-box-shadow: inset 0 10px 10px -10px #444;
	box-shadow: inset 0 10px 10px -10px #444;
}

/* Creates the extra space to push the footer. to the bottom of the page */
#push{
	height: 110px; /* Should be equal to footers height + vertical margin and padding */
}

/* Creating a list to hold our footer navigation. */
#footer ul {
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	padding-top: 6px;
	
	list-style-type: none;
	
	text-align: center;
}

/* Putting all the navigation on one line, and putting space between them. */
#footer ul li{
	display: inline;
	margin: 0 10px;
}

/* Setting navigation link color. */
#footer a, a:visited{
	color: #ccc;
	text-decoration: none;
}

/* Setting navigation link hover color. */
#footer a:hover, a:active{
	color: #fff;
}

/* Creates an area in the top of the footer to place the navigation */
#footTop {
	height: 45px;
	width: 1000px;
	
	
	float:left;
}

/* Creates a left alingend area in the footer to put location info */
#footLeft {
	height: 45px;
	width: 495px;
	
	margin-left: 15px;
	
	float:left;
}

/* Creats a center alingned area in the footer to put social media links */
#footCenter {
	height: 45px;
	width: 175px;
	
	float:left;
	margin-left: 15px;
	margin-right: 15px;
	
	text-align: left;
}

/* Creats a right alingned area in the footer to put contact info. */
#footRight {
	height: 45px;
	width: 255px;
	
	float:left;
	
	margin: 0 15px;
	
	text-align: right;
}

/* Used to se tthe size of the social media icon images */
.iconSmall{
	height: 17px;
}





/*------- Page Specific CSS -------*/



/*----- Home -----*/


/* Holds our image slider */
.slider-wrapper { 
	width: 1000px; 
	height: 430px;
	margin: 0 auto;
	padding: 0px;
}

/* Styling the overlay that creats a drop shadow above the homes nivo slider */
#home #overlay {
 	pointer-events:none;
	width: 1000px;
	height: 10px;
	
	position: absolute;
	top: 639px;
	left: auto; 
	
	background-image: url('../images/drop.png');
	background-repeat: repeat-x;
	background-position: bottom left;
}


/* --- Home Tabs --- */

/* Contains all of our tabs  */
#home #tabContainer {
	width:1000px;
	margin-top: 50px;
}

/* Holds the acutal tabs you click on */
#home .tabs{
	height:70px;
	width: 1000px;
	border-bottom: solid 1px black;
}

/* Styles the list holdng the tabs */
#home .tabs > ul{
	font-size: 1em;
	list-style:none;
	padding: 0px 75px;
}

/* Styles each tab */
#home .tabs > ul > li{
	width: 210px;
	height: 50px;
	
	margin:0;
	padding-top: 20px;
	
	font-size: 1.2em;
	text-align: center;
	
	display:block;
	float:left;
	
	color:#fff;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	
	background: #444; 
	
	border-bottom: solid 1px #ddd;
	border-left: solid 1px #fff; 
}

/* Sets the hover state of a tab */
#home .tabs > ul > li:hover{
	background: #ddd;
	cursor:pointer;
	color: #158;
}

/* Styles how the tab we are on currently looks */
#home .tabs > ul > li.tabActiveHeader{
	background: #ddd; 
	cursor:pointer;
	color: #158;
	text-decoration: underline;
}

/*  Styles how the content in the tabs looks*/
#home .tabscontent {
	padding: 30px 130px;
	margin-bottom: 40px;
	
	background: #ddd;
	
	color:#333;
	
	-webkit-box-shadow: inset 0px -20px 20px -20px #000000;
	box-shadow: inset 0px -20px 20px -20px #000000;
}

/* Creats a space to place a photo in the tabs bar with a frame as a background */
.frame{
	height: 146px;
	width: 176px;
	
	background-image: url('../images/frame.png');
	
	float: left;
	
	margin-right: 30px;
}

/* Sets the image placed in a frames size and position. */
.frame img{
	height: 124px;
	width: 168px;
	
	margin: 4px;
}

/* --- Home Socal Plugins --- */


/* Styles the div that will hold a socal plugin to apper to have a drop shadow */
.dropBox{
	width: 390px;
	float: left;
	margin-left:60px;

	margin-bottom: 40px;

	padding: 10px;

	-webkit-box-shadow:  4px 4px 4px 3px #888;

	        box-shadow:  4px 4px 4px 3px #888;
	
}

/* Styles the div that will hold a socal plugin to apper to have a drop shadow and take up the full width of a screen */
.dropBoxFull{
	width: 860px;
	margin-left:60px;

	margin-bottom: 40px;

	padding: 10px;

	-webkit-box-shadow:  4px 4px 4px 3px #888;

	        box-shadow:  4px 4px 4px 3px #888;
	
}

/* Styles the titels of our socal media plugins */
.dropBox h2{
	height: 36px;
	display: block;
	font-size: 1.6em;
	font-weight: normal;
	color: #158;
	text-align: center;
}

/* Sets how our facebook wall will display */
.faceWall {
	width: 390px;
	height: 550px;
	overflow-y: none;
}

/* Stles the wrapper that hold our twitter frame */
#twitterFrame {
	height: 550px;
}

/* styles the twitter widget to fill the warpers entire width */
#twitter-widget-0{
	width: 100%;
}

/* Styles the iframe that loads our Facebook comments */
#fbCommentsIframe {
	border: none;
	width: 390px;
	height: 350px;
}



/*----- About -----*/


/* Stlying the overlay that creats a show above the about pages banner */
#about #overlay {
 	pointer-events:none;
	width: 1000px;
	height: 315px;
	
	position: absolute;
	top: 221px;
	left: auto; 
	
	
	background-image: url('../images/drop.png');
	background-repeat: repeat-x;
	background-position: bottom left;

}

/* --- About Tabs --- */

/* Contains all of our tabs  */
#about #tabContainer {
	width:300px;
	margin-top: 0px;
}

/* Holds the acutal tabs you click on */
#about .tabs{
	height:40px;
	width: 300px;
}

/* Styles the list holdng the tabs */
#about .tabs > ul{
	font-size: 1em;
	list-style:none;
}

/* Styles each tab */
#about .tabs > ul > li{
	width: 135px;
	height: 32px;
	
	margin:0;
	padding-top: 5px;
	margin-left: 10px;
	
	font-size: 1.2em;
	text-align: center;
	
	display:block;
	float:left;
	
	color:#158;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: #ddd;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-box-shadow: inset 0px -10px 20px -10px #000;
	box-shadow: inset 0px -10px 20px -10px #000;
	border: 1px solid #444;
}

/* Sets the hover state of a tab */
#about .tabs > ul > li:hover{
	background: #158;
	cursor:pointer;
	color: #fff;
			border: 1px solid #888;
}

/* Styles how the tab we are on currently looks */
#about .tabs > ul > li.tabActiveHeader{
	background: #158; 
	cursor:pointer;
	color: #fff;
	text-decoration: underline;
	border: 1px solid #888;
}

/*  Styles how the content in the tabs looks*/
#about .tabscontent {
	padding-top: 15px;
}

#about .facewall {
	text-align: left;
}

/* --- About Socal Plugins --- */


/* Styles the right column that will hold socail media plugins */
#about .rightCol {
	width: 320px;
	float: left;
	margin-left: 0px;
	
	text-align: right;
}
/* Styles the div that will hold a socal plugin to apper to have a drop shadow */
#about .dropBox{
	width: 300px;

	margin-bottom: 40px;
	padding: 10px;

	-webkit-box-shadow:  4px 4px 4px 3px #888;
	box-shadow:  4px 4px 4px 3px #888;
}

/* Sets how our facebook wall will display */
#about .faceWall {
	width: 300px;
	height: 550px;
	overflow-y: scroll;
}

/* Stles the wrapper that hold our twitter frame */
#about #twitterFrame {
	height: 550px;
}

/* styles the twitter widget to fill the warpers entire width */
#about #twitter-widget-0{
	width: 100%;
}



/*----- Calendar -----*/


/* Styling the iframe sthat loads our google calendar */
#calendarIframe {
	border: none;
	width: 1000px;
	height: 600px;
	overflow: scroll;
}



/*----- Products Pages -----*/


/* Creates a coulmn to hold a gallery of photos */
.product .rightCol {
	width: 320px;
	float: left;
	margin-left: 60px;
	
	text-align: right;
}

/* Stlyes a drop shdow to sit over our banner */
.product #overlay {
 	pointer-events:none;
	width: 1000px;
	height: 200px;
	
	position: absolute;
	top: 221px;
	left: auto; 
	
	background-image: url('../images/drop.png');
	background-repeat: repeat-x;
	background-position: bottom left;
}



/*----- Feature -----*/


/* Stlying feature titles */
#feature h1{
	font-size: 1.8em;
	font-weight: normal;
	color: #158;
	text-align: left;
}

/* Styling feature dates */
#feature h2{
	font-size: 1.6em;
	font-weight: normal;
	color: #158;
	text-align: left;
}

/* Styling feature brefings */
#feature h3{
	font-size: 1.3em;
	font-weight: normal;
	color: #158;
	text-align: left;
}

/* Styling a drop shdow to apper over a featers banner */
#feature #overlay {
 	pointer-events:none;
	width: 1000px;
	height: 200px;
	
	position: absolute;
	top: 221px;
	left: auto; 
	
	background-image: url('../images/drop.png');
	background-repeat: repeat-x;
	background-position: bottom left;
}



/*----- Login -----*/


/* Styles the forms on our loging page used to acesss our adminastration tools */
#login form{
	text-align: center;
	color: #158;
}

/* Styles the hedings on our loging page used to title forms */
#login form h2{
	display: inline;
}

/* Stlyes the labes for our input fields */
#login label{
	font-size: 1.3em;
}

/* Changing the default styling of buttons to match our site better */
input[type=button], input[type=submit] { 
	padding:0px 20px;
	font-size: 1em;
	
	background-color: hsl(193, 32%, 49%) !important; 
	background-repeat: repeat-x; 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4"); 
	background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4)); 
	background-image: -moz-linear-gradient(top, #b8d3da, #5493a4); 
	background-image: -ms-linear-gradient(top, #b8d3da, #5493a4); 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4)); 
	background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4); 
	background-image: -o-linear-gradient(top, #b8d3da, #5493a4);
	background-image: linear-gradient(#b8d3da, #5493a4); 
	border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%); 
	
	color: #333 !important; 
	
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49); 
	-webkit-font-smoothing: antialiased; 
	
	-webkit-border-radius: 7px;
 	border-radius: 7px;
}

/* Styles the input fields our user uses to enter data */
input[type=text], input[type=password]{
	font-size: 0.8em;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	padding:4px;
	background-color: #b8d3da;
}

/* Set up the divs we use to display message to the user atempting to log in */
#message, #passwordMessage{
	padding-top: 20px;
	padding-bottom: 10px;
	
	text-align: center;
	font-size: 1.3em;
}

/* Changes the color of text in divs we use for error messages */
#message .error, #passwordMessage .error{
	color: #ba2020;
}

/* Changed the coor of the text we use for sucess messages */
#passwordMessage .success{
	color: #7adfa4;
}

/* Hides the forms for logging out and changing password by default, logging in changes this to display: block */
#loggedIn{
	display: none;
}