@import "css/contact-style.css";
@import "css/messages.css";

* {
	margin: 0;
	padding: 0;
	
}

h1 {
	font-family: Helvetica, Arial, sans-serif;
	color: gray;
	}

html, body {
	font-size: 85%;
	font-family: Helvetica, Arial, sans-serif;
	background: white;
	height: 100%;
	}
		
a img {border: none;}

a {
	border: none; 
	outline: none;
	color: black;
	text-decoration: underline;
	}
	
a:hover {
	border: none;
	outline: none;
	color: black;
	text-decoration: none;
	}

.clear {clear: both;}

#page-wrap {
	width: 900px;
	margin: 0 auto -3em;
	height: 100%;
	min-height: 100%;
	height: auto !important;
	min-width: 900px;
	overflow: auto;
	}
	
ul#logo {
	list-style: none;
	width: 576px;
	}
	
.bklyn-logo {
	width: 567px;
	height: 160px;
	background: url(images/logo_02.png) no-repeat;
	text-indent: -9999px;
	float: left;
	top: 0;
	}
	
ul#nav {
	list-style: none;
	width: 100%;
	}
	ul#nav li {
		display: inline;
		}
	ul#nav li a {
		text-indent: -9999px;
		display: block;
		height: 92px;
		float: left;
		}
		ul#nav li a.video {
			height: 92px;
			background: url(images/video_nav.png) no-repeat bottom center;
			width: 216px;
			}
		ul#nav li a.web {
			height: 92px;
			background: url(images/web_nav.png) no-repeat bottom center;
			width: 236px;
			}
		ul#nav li a.about {
			height: 92px;
			background: url(images/about_nav.png) no-repeat bottom center;
			width: 219px;
			}
		ul#nav li a.contact {
			height: 92px;
			background: url(images/contact_nav.png) no-repeat bottom center;
			width: 229px;
			}
			ul#nav li a.video:hover, ul#nav li a.video:active,
			ul#nav li a.web:hover, ul#nav li a.web:active,
			ul#nav li a.about:hover, ul#nav li a.about:active,
			ul#nav li a.contact:hover, ul#nav li a.contact:active {
				background-position: top center;
				}
				
			body#video ul#nav li a.video {
				background-position: top center;
			}
			
			body#web ul#nav li a.web {
				background-position: top center;
			}
			
			body#about ul#nav li a.about {
				background-position: top center;
			}
			
			body#contact ul#nav li a.contact {
				background-position: top center;
			}
	
#video-reel {
	margin: 0 auto;
	padding-top: 20px;
	width: 800px;
	height: 415px;
	padding-bottom: 20px;
	}
				
#web-content {
	width: 782px;
	margin: 0 auto;
	margin-top: 20px;
	}
	
.web-row {
	height: 182px;
	width: 782px;
	margin: 0 auto;
	border-bottom: 1px solid black;
	padding-top: 20px;
	}
	
.vezo-web-row {
	height: 470px;
	width: 782px;
	margin: 0 auto;
	border-bottom: 1px solid black;
	padding-top: 20px;
	padding-bottom: 35px;
	}

	
.iphone-web {
	width: 600px;
	height: 320px;
	margin: 0 auto;
	padding-top: 10px;
	}
	
.web-row-last {
	height: 182px;
	width: 782px;
	margin: 0 auto;
	padding-top: 25px;
	}

	
.web-title-header {
	float: left;
	font-weight: 200;
	margin-left: 10px;
	font-size: 2.5em;
	color: black;
	text-decoration: none;
	}
	
.web-title-header:hover {
	float: left;
	margin-left: 10px;
	font-size: 2.5em;
	color: black;
	text-decoration: underline;
	}
	
.web-text {
	width: 413px;
	float: left;
	margin-top: 20px;
	margin-left: 10px;
	line-height: 1.3em;
	font-size: 1.1em;
	}
		
.web-image {
	width: 297px;
	height: 157px;
	float: right;
	margin-right: 10px;
	-moz-border-radius-bottomleft:17px;
	-moz-border-radius-bottomright:17px;
	-moz-border-radius-topleft:17px;
	-moz-border-radius-topright:17px;
	-webkit-border-radius: 17px;
	box-shadow: 5px 5px 5px #ccc;
  	-moz-box-shadow: 5px 5px 5px #ccc;
  	-webkit-box-shadow: 5px 5px 5px #ccc;
	}
	
.web-image:hover {
	width: 297px;
	height: 157px;
	float: right;
	margin-right: 10px;
	-moz-border-radius-bottomleft:17px;
	-moz-border-radius-bottomright:17px;
	-moz-border-radius-topleft:17px;
	-moz-border-radius-topright:17px;
	-webkit-border-radius: 17px;
	}	

.web-link {
	text-indent: -9999px;
	background: url(images/web_design.png) no-repeat;
	width: 269px;
	height: 39px;
	float: right;
	margin-right: 10px;
	margin-bottom: 20px;
	}
	
.web-link:hover {
	border-bottom: 1px solid black;
	cursor: pointer;
	}
	
.shadow {
  box-shadow: 5px 5px 5px #ccc;
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
	}	

	
/** About Me Section **/

.about-me-image {
	width: 275px;
	height: 320px;
	text-indent: -9999px;
	background: url(images/about_me.jpg) no-repeat;
	border: 4px solid #3b3838;
	margin-left: 100px;
	margin-top: 25px;
	float: left;
	box-shadow: 5px 5px 5px #ccc;
  	-moz-box-shadow: 5px 5px 5px #ccc;
  	-webkit-box-shadow: 5px 5px 5px #ccc;
	}
	
.about-me-title {
	text-align: left;
	font-weight: 300;
	color: black;
	line-height: 1.8em;
	font-family: Helvetica, arial, sans-serif;
	}

	
.about-me-text {
	text-align: left;
	float: right;
	width: 456px;
	margin-top: 35px;
	line-height: 1.9em;
	font-family: Helvetica, arial, sans-serif;
	}

.footer, .push {
	height: 3em;
	}
	
.footer-text {
	text-align: center;
	background: #FFFFFF;
	font-size: 93%;
	}
	
/** Homepage **/

#slideshow {
	margin: 0 auto;
	margin-top: 10px;
	width: 900px;
	height: 425px;
	}
	
/** Contact **/

.contact-text {
	text-align: left;
	font-weight: 300;
	color: black;
	margin-left: 115px;
	line-height: 1.8em;
	font-family: Helvetica, arial, sans-serif;
	}