/*
    Website: 3D eye-deas
    Webstie URL: 3deye-deas.com
    Author:  Chris Burris
    Author URL: 3deye-deas.com

	File Name: style.css
	
	NOTES: Basic Styles for the site
	
	Created: Feb 25, 2011
	Last Updated:Feb 26, 2011
*/


/*font-family: 'Rock Salt', cursive;
  font-family:Arial, Helvetica, sans-serif;*/

/*Site Colors:
	Pale-blue: #f3f7fa rgba(243,247,250,1)
	Light-blue: #7bb9e2 rgba(123, 185, 226, 1)
	Mid-blue: #55aae2  rgba(85,170,22, 1) 
	Blue: #2184c5 rgba(33,132,197, 1) 
	Muted-blue: #386f94 rgba(56,111,148,1)
	Dark-blue: #0b5280 rgba(11,82,128,1) 
	Gray-blue: #e8f0f6 rgba(232,240,246,1)*/
		
/* ================== THE BASICS ================== */
/* These apply to all elements */
*{	margin:0;
  	padding:0;
  	
  	/* border-box property measures from inside border */
  	box-sizing: border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
  	-ms-box-sizing: border-box;
}


html, body {
	min-height: 100%; /*incase of gradient backgrounds, to stretch the length of the page*/
	padding:0; 
	margin:0;
}

html {
}

body {
	position: relative;
	font-family:Arial, Helvetica, sans-serif;
	background:url('../imgs/bg-concrete.png');
}

h1, h2, h3{
	font-family: 'Rock Salt', cursive;
}

header,main,section,article,aside,nav,footer,figure,figcaption{
	display:block; /* Default for HTML5 structural elements */
}


a{ 
	color:#55aae2;
	text-decoration:none;
}

a:hover {
	border-bottom:2px solid #55aae2;
}

video , iframe{
	padding:10px;
}

/* ================== CLASSES ================== */
.txtCenter{
	text-align:center;
}

.contact{
	list-style-type:none;
	padding:10px;
}

/* Ribbon (Page Title) */
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. */

 width: 95%;
    
 position: relative;
 background: #2184c5;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #386f94;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #0b5280 transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}


/* ================== HEADER (logo & nav) ================== */
header{
	padding: 24px 0; 
	margin-bottom:24px;
	border-bottom: 1px dotted #0B5280;
}

/* hgroup (logo) */

hgroup h1{
	color: #2185C5
}

hgroup h4{
	font-family: 'Rock Salt', cursive;
	font-size:1em;
	margin:6px 0 0 24px;
	color:#55aae2;
}

/* Navigation */

nav {
	margin: 0;
	padding: 0 0 20px 10px;
	
	text-align:right;
	}

nav ul{
	list-style-type:none;
	margin-top:24px; /*pushes down a line*/
}


nav li {
	margin:0 20px;
	padding: 0;
	display: inline;
	list-style-type: none;
	font-family: 'Rock Salt', cursive;
	}
	
nav a:link, nav a:visited {

	margin: 0 10px 4px 10px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #0B5280;
	}

nav a.active:link, nav a.active:visited, nav a:hover {
	border-bottom: 4px solid #2185C5;
	padding-bottom: 2px;
	color: #2185C5;
	}

nav a.current{
	color:#7BB9E2;
	border-bottom: 4px solid #7BB9E2;
}


hgroup h3{
	margin-top:0;
}

/* ================== POLAROIDS ================== */

/***Now style the containing div that we gave the id 'polaroid'***/
#polaroid{
	width:95%; /*set a width so we can center the content*/
	margin:0 auto; /*only after the width is set can we use margin auto, to center content*/
	/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
	overflow:hidden;
	font-family: 'Rock Salt', cursive;
}

/***Position the figures containing the imgs and captions***/
#polaroid figure{
	float:left; /*places the imgs in a horizontal line*/
	position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
	margin:10px 20px; /*space between the imgs*/
	text-align: center;
}

#polaroid figure{
	padding: 6px 8px 10px 8px; /*size of the frame*/
	
	/*give the frame's background colour a gradient*/
	background: #e8f0f6; /*fallback colour for browsers that don't support gradients*/
	background: -webkit-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: -o-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: -ms-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	
	/*give the Polaroids a small drop shadow*/
	-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
}

/***Rotate the imgs 1 degrees anti-clockwise***/
#polaroid figure{
	-webkit-transform:rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
	-webkit-backface-visibility:hidden; /*prevent rotated text in the caption being jagged in Chrome and Safari*/
}

/***Rotate each even numbered image 2 degrees clockwise***/
#polaroid figure:nth-child(even) { /*see support section below for more info on nth-child*/
	-webkit-transform:rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	
	/*because the image is rotated the opposite way, the drop-shadow needs moving to the other side of the image*/
	-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}

#polaroid a ,  #polaroid a img{
	color:#333;
	border:none;
}

#polaroid a:hover{
	color: #2185C5;
	text-decoration:underline;
}

/* ================== PROJECT GALLERY ================== */
/* Parent container of gallery, could be section, article or div */
    #Gallery-4{ 
    text-align:center; 
	
	/*give the frame's background colour a gradient*/
	background: #e8f0f6; /*fallback colour for browsers that don't support gradients*/

	
	/*give the Polaroids a small drop shadow*/
	-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
	
 }



/* Image container */
#images {
	width: 550px;
	height: 520px;
	overflow: hidden;
	position: relative;
	margin: 10px auto;
	list-style-type:none;
	}

/* Images inside the image container */
#images li {
	width: 550px;
	height: 520px;
	position: absolute;
	top: -550px;
	left: 0 px;
	z-index: 1;
	
	/*give the frame's background colour a gradient*/
	background: #e8f0f6; /*fallback colour for browsers that don't support gradients*/
	background: -webkit-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: -o-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: -ms-linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	background: linear-gradient(top, #e8f0f6 0%, #f3f7fa 24%, #f3f7fa 51%, #f3f7fa 75%, #e8f0f6 100%);
	}

/* The target image inside the image container */
#images li:target {
	left: 0;
	top:0;
	z-index: 9;
	opacity: 1;
	margin:auto;
	
	}

/* The first instance of an image in the image container */
#images li:first-child {
	left: 0;
	top:0;
	opacity: 1;
	}

#images li img, #images li video , #images li iframe  {
	max-width:100%;
	max-height:100%;
	overflow:hidden;
}

#Gallery-4 #slider{
	padding-bottom:20px;
}

/* The link inside the slider container */
#Gallery-4 #slider a {
	text-decoration: none;
	background: #e8f0f6;
	border: 1px solid #2184c5;
	padding: 4px 6px;
	color: #2184c5;
	}

/* The hover of the link in the slider container */
#Gallery-4 #slider a:hover {
	background: #2184c5;
	border: 1px solid #0B5280;
	color:#fff;
}

/* ================== PROJECT SLIDER DESCRIPTION  ================== */
#desc{
}

#desc h4{
	border-bottom: 2px solid #0b5280;
	color:#0b5280;
	padding-bottom:8px;
}

#desc nav {
	text-align:center;
	margin-top:48px;
}

#desc nav a{
	font-family:Arial, Helvetica, sans-serif;
	color:#2185C5;
	text-transform:uppercase;
	font-weight:600;
}

#desc nav a.previous:before{
		content:url('../imgs/left-arrow.png');
}

#desc nav a.next:after{
		content:url('../imgs/right-arrow.png');
}


/* form 3 */

	#contact{
		margin:1em auto;
		background:url(../imgs/contact/form_bg.jpg) no-repeat 0 0;
		width:542px;
		height:364px; /* fixed size (envelope graphic) */
		overflow:hidden;

		}
	#contact h3{display:none;}	
	#contact fieldset{
		margin:0;
		padding:0;
		border:none;	
		float:left;
		display:inline;
		width:200px;
		margin-left:34px;
		padding-top:80px;
		}	
	#contact fieldset.last{
		width:254px;
		margin-left:17px;
		}				
	#contact legend{display:none;}	
	#contact p{margin:.5em 0;}	
	#contact label{display:block;}	
	#contact input, #contact textarea{		
		width:192px;
		border:1px solid #ddd;
		background:#fff url(../imgs/contact/form_input.gif) repeat-x;
		padding:3px;
		}		
	#contact textarea{
		width:246px;
		height:200px;
		overflow:auto;
		}					
	#contact p.submit{
		margin:0 34px;
		clear:both;
		position:relative;
		}	
	#contact button{
		padding:0;
		position:absolute;
		left:0;
		top:-3.5em;
		width:95px;
		height:36px;
		text-indent:-8000px;
		overflow:hidden;
		border:none;
		background:url(../imgs/contact/form_button.gif) no-repeat 0 0;
		color:#fff;
		cursor:pointer;
		}				

/* // form 3 */

/* ================== FOOTER (logo & nav) ================== */
footer{
	margin-top:30px;
	border-top: 1px dotted #2185C5;
}

/* Navigation */

footer nav {
	font-size:.8em;
	}