/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

span {display: block;}

span.inline {display:inline;}

a:hover, a:active, a:focus {border: none; outline:none;} /* Removes the dotted grey line around clicked links */

/********************* GENERAL CSS RESET END **********************/

/********************* MAIN CSS **********************/

html {
height: 100%;
width: 100%;
overflow: hidden;
}

body {
height: 100%;
width: 100%;
overflow: hidden;
font-size:62.5%;
}


#grid {										/** This is the grid that overlays the background slideshow **/
background-image: url(../img/grid.png);
height: 105%;
width: 100%;
position: absolute;
z-index: 5;
bottom: 0px;
top: -30px;
}

#loader {									/** This is the loading div that appear on website load **/
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
}

.gifloader {									/** This is the styling for the animated GIF loader within loader div **/
position: absolute;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
}

/********************* CONTENT HOLDERS/WRAPPERS **********************/

#contentbg {
opacity: 0;									/** Hides the content box on load, because it has no content and **/
}											

#content {									/** Main content box stylings, these are what the user see's **/
position: absolute;							/** Centering of the content box is done in the html **/
background-image: url(../img/contentbg.png);				
border: 2px solid #64686f;					
top: 50%;  
left: 50%;
z-index: 6;
padding: 20px;
overflow: hidden;
}

h2 {
font-family: aller-light;
color: #000000;
font-size: 3em;
text-transform: uppercase;
}

/********************* CONTENT HOLDERS/WRAPPERS **********************/

/********************* HEADER - INDEX PAGE **********************/

#header {									/** Header container div **/
	height: 92px;
	width: 100%;
	background: yellow;
	position: center;
	top: 0px;
	z-index: 10;
	border-bottom: 1px solid #505050;
	background-color: #ffea00;
}

#nav a.selected, #galnav a.selected {color: #3ab7d5;}			/** Colors of current page in menu and gallery menus **/

#nav {										/** Nav UL **/
padding-top: 3px;
padding-left: 350px;
position: center;
list-style-type:none;
font-family: veranda - bold;
font-size: 1.5em;
}  

/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
	float:left;
	width:120px;
	position:relative;
	background-color: #ffea00;
}

/* this is the parent menu */
#nav li a {									/** Controls the menu and submenu stylings **/
padding:8px 6px 0 5px;
height:15px;
text-align:center;
color:black;
width:100px;
float:left;
background: ffea00;							/** This must be matched with the background color of #nav to blend **/
border-radius: 2px;
}

/* submenu, it's hidden by default */
#nav ul {
position:absolute;
top: 20px;
padding-top: 13px;
list-style:none;
height: 200px;
}

#nav ul li{
padding-top: 3px;
}

#nav ul a {
height:15px;
padding: 8px 5px;
}


#header ul li a:hover {
color: #3ab7d5;
}

/********************* HEADER **********************/

/********************* LOGO **********************/

#logo {							/** Main logo div **/
position: absolute;
background-color: #ffffff;
height: 5px;
width: 100%;
top: 93px;
overflow: hidden;
text-align: left;
z-index: 10;
}

#logo a img{						/** This is the positioning of the blue dropdown arrow **/
position: relative;
top: 10px;
left: 50px;
}

h1{								/** All the titles are styled with this H1 **/
color: #999999;					/** The colored parts are styled within classed spans below **/
font-family: verdana;
font-size: 3.6em;
letter-spacing: 1px;
line-height: 60px;
text-decoration: none;
}


.h1bold {							/** This is the bold white h1 text  **/
color: white;
font-family: verdana;
display: inline;
}

.ninenine {						/** This is the thin h1 text, styled with its own color  **/
color: #015e59;
font-family: verdana;
display: inline;
}

.pix {
color: #d43019;					/** This is the thin h1 text, styled with its own color  **/
font-family: verdana;
display: inline;
}

.fan {
font-family: verdana;				/** This is the thin h1 text, styled with its own color  **/
color: #ffa800;
display: inline;
}

/********************* LOGO **********************/

/********************* ABOUT PAGE **********************/
	
.aboutimg {						/** Image positioning/sizing **/
height: 302px;
width: 250px;
padding-top: 10px;
float: left;
}

#text {							/** This div contains the text **/
width: 400px;
padding-left: 15px;
padding-top: 6px;
float: right;
}

p {
color: #cac3c3;					/** Paragraph styling **/
font-size: 1.2em;
font-family: 'Inder', veranda;
line-height: 16px;
}

.name {							
color: #84a4b8;
display: inline;
}

.owner {
color: white;
display: inline;
}

/********************* ABOUT PAGE **********************/

/********************* GALLERY 2 COL **********************/

img.hover {
border: 2px solid #9dcddc;	
width: 320px;
height: 200px;
}

#gallery3 img.hover {
width: 210px;
height: 140px;
}

#galwrap {
width: 665px;
overflow: hidden;
}

#gallery {
position: relative;
width: 9010px;
}

#gallery  li {
width: 320px;
list-style-type: none;
float: left;
padding-right: 20px;
}

h3 {
padding-top: 10px;
font-family: verdana;
font-size: 2.3em;
letter-spacing: 1px;
color: white;
}

#gallery p {
line-height: 16px;
color: #8d8989;
font-size: 1.2em;
font-family: 'Inder', veranda;
padding-top: 10px;
}

#galnav, #galnav3 {
overflow: hidden;
width: 150px;
padding-left: 290px;
padding-top: 20px;
}

#galnav li, #galnav3 li {
float: left;
list-style: none;
padding-right: 20px;
color: white;
}


/********************* GALLERY 2 COL **********************/

.loader {font-size: 12px; position: relative; bottom: 3px;}

/********************* GALLERY 3 COL **********************/

#gal3wrap {
width: 675px;
overflow: hidden;
}

#gallery3 {
position: relative;
width: 9010px;
}

#gallery3  li {
width: 210px;
list-style-type: none;
float: left;
padding-right: 20px;
}

#gallery3 p {
line-height: 16px;
color: #8d8989;
font-size: 1.2em;
font-family: 'Inder', veranda;
padding-top: 10px;
}

/********************* GALLERY 3 COL **********************/

/********************* BLOG **********************/

#bloglist {
width: 100%;
height: 100%
}

#bloglist li {
list-style-type: none;
background: black;
border: 2px solid #9dcddc;
width: 100%;
height: 32px;
margin-bottom: 10px;
}

#bloglist li a{
color: #cac3c3;
text-decoration: none;
font-size: 1.2em;
font-family: 'Inder', veranda;
padding-top: 10px;
float: left;
}

.date{
color: #838080;
font-size: 1.2em;
font-family: 'Inder', veranda;
padding-left: 50px;
padding-right: 50px;
float: left;
}

/********************* BLOGPOST**********************/

#postdate{
position: relative;
color: #838080;
font-size: 1.4em;
font-family: 'Inder', veranda;
padding-top: 5px;
}

#blogpostheader {
border-bottom: 1px solid #2f2f2f;
width: 100%;
height: 18px;
color: white;
overflow: hidden;
}

#blogpostheader p.left{
float: left;
font-size: 1.2em;
font-family: verdana;
color: white;
}

.right a {color: #878787;}
.right a:hover {color: #3ab7d5;}

#blogpostheader p.right{
float: right;
font-size: 1.2em;
font-family: 'Inder', veranda;
letter-spacing: 1px;
}

.postimg {
padding-top: 10px;
}

.blogtext {
float: right;
width: 370px;
padding-top: 10px;
color: #6f6f6f;
font-family: 'Inder', veranda;
}

.blogtextnormal {
padding-top: 15px;
color: #6f6f6f;
font-family: 'Inder', veranda;
}

.pagenum {
color: #3ab7d5;
display: inline;
}

/********************* BLOGPOST **********************/

/********************* BLOG **********************/

/********************* CONTACT *********************/

#contact {
float: left;
width: 188px;
font-family: 'Inder', veranda;
}

#contact h2 {
font-size: 2.3em;
}

#contact p {
width: 250px;
line-height: 20px;
color: #5c5a5a;
padding-top: 20px;
}

#contact p.contactname {
color: #959595;
padding-top: 20px;
}

/********************* FORM *********************/

.hide {display: none;}

#form {
	width: 380px;
	float: right;
	padding-right: 10px;
	padding-top: 50px;
	padding-left: 50px;
}


#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 100%;
	font-family: 'Inder', veranda;
	font-size: 1.15em;
	margin: 0px 0px 10px 0px;
	border: 1px solid #2f2f2f;
	background: black;
	color: #938d8d;
}

#contact-area textarea {
	height: 95px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #2f2f2f;
	background: #1f1f1f;
}

#contact-area input.submit-button {
	height: 20px;
	width: 20px;
	float: right;
	border: none;
	background: none;
}

#contact-area label {
position: relative;
left: -10px;
top: 15px;
}


.input-prompt {
  position: absolute;
  font-family: 'Inder', veranda;
  font-size: 1.1em;
  color: #938d8d;
  padding-top: 5px;
  padding-left: 5px;
  letter-spacing: 0.5px;
}

/********************* CONTACT *********************/

/********************* VIDEO GALLERY CSS **********************/

a.stopbg {
font-family: 'Inder', veranda;
padding-top: 16px;
float: right;
color: #8d8989;
font-size: 1.2em;
}

a.stopbg img{
padding-left: 10px;
}

#video {
position: relative;
}

/********************* VIDEO GALLERY CSS **********************/

/********************* FOOTER **********************/

#footer {
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background: black;
color: white;
opacity: 0.6;
}

#footer p{
padding-left: 70px;
padding-top: 1.5px;
font-family: 'Inder', veranda;
font-size: 1.2em;
letter-spacing: 1px;
}

#footer span {
color: #3ab7d5;
}

/********************* FOOTER **********************/

#lightbox {
position: absolute;
border: 2px solid #353535;
z-index: 16;
top: 100%;
left: 50%;
opacity: 0;
border-radius: 3px;
}

#lightboxdim {
position: absolute;
height: 100%;
width: 100%;
background: black;
opacity: 0.8;
z-index: 15;
}

#close {
position: absolute;
top: -10px;
right: -10px;
height: 25px;
width: 25px;
}

#imageloader {							
background: none;
}

#pageload {
position: absolute;
z-index: 20;
height: 35px;
width: 20px;
top: 0px;
left: 380px;
}

#pageload img{
position: absolute;
top: 50%;
margin-top: -5.5px;
}

/********************* CUSTOM FONT FACES **********************/

@font-face {
	font-family: aller;
	src: url(../fonts/Aller_Rg.ttf);
}

@font-face {
	font-family: aller-bold;
	src: url(../fonts/Aller_Bd.ttf);
}

@font-face {
	font-family: aller-light;
	src: url(../fonts/Aller_Lt.ttf);
}

@font-face {
	font-family: bignoodle;
	src: url(../fonts/big_noodle_titling.ttf);
}