@charset "utf-8";
/* CSS Document */

/* Copyright John Price */

body {
	background: url(img/bg-body.jpg) bottom center repeat-x fixed; text-align: center;
	margin: 0 auto;
	text-align :center;
	font-family: 'Lato', sans-serif;
	color: #999;
	font-weight: 300;
	font-size: 24px;
	min-height: 800px;
	overflow: hidden;
}

#browserWarning
	{background: #fff; z-index: 5px; width:auto; height: auto; }

/* Fonts */

h1 {
	font-size: 50px;
	font-weight: 300;	
	line-height: 24px;
}

h2 {
	font-size: 22px;
	font-weight: 700;	
	text-align:center;
}

.bullet {
	color: #54a41d;
	padding-left: 5px;
}

.green {
	color: #87bf56;
	font-weight: 400;
}

a:hover { cursor: pointer; cursor: hand; }

/* Body */

#body-container {
	width: 960px;
	height: 100%;
	text-align: center;
	display:inline-block;
	margin-top: 20px;
}

#content {
	width: 100%;
	text-align:center;
	min-height: 225px;
}

#banner { background: url(img/bg-bar-top.png) bottom center no-repeat; width: 100%; height: 150px; position: fixed; top: 0; margin: 0 auto; text-align: center; z-index: 6; }

#banner-grey { background: url(img/bg-bar-top-grey.png) bottom center no-repeat; width: 100%; height: 155px; position: fixed; top: 0; margin: 0 auto; text-align: center; z-index: 4; }

#footer { background: url(img/bg-bar-bottom.png) top center no-repeat; width: 100%; height: 150px; position: fixed; bottom: 0; margin: 0 auto; text-align: center; z-index: 6; }

#footer-grey { background: url(img/bg-bar-bottom-grey.png) top center no-repeat; width: 100%; height: 155px; position: fixed; bottom: 0; margin: 0 auto; text-align: center; z-index: 4; }

#logo { background:url(img/logo.png) center center no-repeat; width: 301px; height: 99px; left: 50%; right: 50%; display:inline-block; padding-top: 40px; z-index: 6; }

#nav {height: 50px; width: 600px; text-align: center; padding-top: 60px; margin: 0 auto; z-index: 5; }

#left-column { float: left; width: 310px; height: 400px; text-align:left; background: rgba(0, 0, 0, .65); border:rgba(255, 255, 255, .75)  solid 1px; color: #fff;  }

#center-column { float: left; width: 310px; height: 400px; text-align:left; background: rgba(0, 0, 0, .65); border:rgba(255, 255, 255, .75)  solid 1px; color: #fff; }  

#right-column { float: left; width: 310px; height: 400px; text-align:left; background: rgba(0, 0, 0, .65); border:rgba(255, 255, 255, .75)  solid 1px; color: #fff; }

#spacer { float: left; width: 12px; height: 500px; }

#clear { clear:both; height: 15px; }

#services {
	width: 960px;
	height: 100%;
}

#round-content {
	background: rgba(255, 255, 255, .9);
	height: 220px;
	width: 700px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin: 0 auto; 
	text-align: center;
	padding: 0 20px;
	position: absolute;
	top: 33%;
	bottom: 50%;
	left: 0;
	right: 0;
	z-index: 2;
	-moz-box-shadow: 0 0 20px 0px #999;
	-webkit-box-shadow: 0 0 20px 0px #999;

}

/* Portfolio */

#close {background:url(img/close.png) center center no-repeat; width: 73px; height: 24px; margin-left: auto; margin-right: auto; }
#close:hover {background:url(img/close2.png) center center no-repeat; width: 73px; height: 24px; margin-left: auto; margin-right: auto; cursor: pointer; cursor: hand; }

#portfolio-container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	z-index: 3;
	position: absolute;
	display: none;
}

#portfolio-01 {
	width: 20%;
	height: 100%;
	float: left;
	background: url(img/beastmode-thumb1.jpg) left center no-repeat;
	z-index: 3;
}

#portfolio-01:hover { background:url(img/beastmode-thumb.jpg) left center no-repeat; cursor: pointer; cursor: hand; }

#portfolio-02 {
	width: 20%;
	height: 100%;
	float: left;
	background: url(img/hungrybard-thumb1.jpg) center center no-repeat;
	z-index: 3;
}

#portfolio-02:hover { background:url(img/hungrybard-thumb.jpg) center center no-repeat; cursor: pointer; cursor: hand; }

#portfolio-03 {
	width: 20%;
	height: 100%;
	float: left;
	background: url(img/winestsite-thumb1.jpg) center center no-repeat;
	z-index: 3;
}

#portfolio-03:hover { background:url(img/winestsite-thumb.jpg) center center no-repeat; cursor: pointer; cursor: hand; }

#portfolio-04 {
	width: 20%;
	height: 100%;
	float: left;
	background: url(img/kublakai-thumb1.jpg) center center no-repeat;
	z-index: 3;
}

#portfolio-04:hover { background:url(img/kublakai-thumb.jpg) center center no-repeat; cursor: pointer; cursor: hand; }

#portfolio-05 {
	width: 20%;
	height: 100%;
	float: left;
	background: url(img/winest-thumb1.jpg) center center no-repeat;
	z-index: 3;
}

#portfolio-05:hover { background:url(img/winest-thumb.jpg) center center no-repeat; cursor: pointer; cursor: hand; }

#featured-container1 { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#featured-container2 { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#featured-container3 { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#featured-container4 { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#featured-container5 { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#featured { width: 960px; height: 100%; color: #fff; z-index: 4; margin: 0 auto; text-align: center; margin-top: 250px;  }

#contact { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

#about { background:url(img/broken_noise.png) repeat; width: 100%; height: 100%; position:absolute; z-index: 4; margin: 0 auto; text-align: center; margin-left: auto; margin-right: auto;}

.img { border:solid 1px #bababa; }

/* Bokeh */

#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align :center;
	display: table;
	overflow: hidden;
	vertical-align: middle;
}

#bokeh-contain {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align :center;
	display: table;
	overflow: hidden;
	vertical-align: middle;
	z-index: 0;
}

#bokeh1 {
	height: 586px; 
	width: 594px; 
	top: 0;
	left: 0;
	position: absolute;
	z-index: -5;
}

#bokeh2 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	top: 40%;
	left: 20%;
	position: absolute;
	z-index: -5;
}
#bokeh3 {
	height: 786px; 
	width: 844px; 
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -5;
}
#bokeh4 {
	background-size: 400px 400px;
	height: 400px; 
	width: 400px; 
	right: 600px;
	bottom: 400px;
	position: absolute;
	z-index: -5;
}
#bokeh5 {
	background-size: 400px 400px;
	height: 400px; 
	width: 400px; 
	right: 600px;
	bottom: 400px;
	position: absolute;
	z-index: -5;
}
#bokeh6 {
	background-size: 450px 450px;
	height: 450px; 
	width: 450px; 
	left:  10%;
	bottom: 20%;
	position: absolute;
	z-index: -5;
}
#bokeh7 {
	background-size: 800px 700px;
	height: 700px; 
	width: 800px; 
	left:  5%;
	bottom: 0;
	position: absolute;
	z-index: -5;
}
#bokeh8 {
	background-size: 700px 600px;
	height: 600px; 
	width: 700px; 
	left:  30%;
	bottom: 0;
	position: absolute;
	z-index: -5;
}
#bokeh9 {
	background-size: 700px 600px;
	height: 600px; 
	width: 700px; 
	right:  0;
	top: 0;
	position: absolute;
	z-index: -5;
}
#bokeh10 {
	background-size: 300px 296px;
	height: 296px; 
	width: 300px; 
	right:  0;
	bottom: 0;
	position: absolute;
	z-index: -5;
}
#bokeh11 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	top: 20%;
	left: 60%;
	position: absolute;
	z-index: -5;
}
#bokeh12 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	top: 30%;
	left: 55%;
	position: absolute;
	z-index: -5;
}
#bokeh13 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	bottom: 20%;
	right: 10%;
	position: absolute;
	z-index: -5;
}
#bokeh14 {
	background-size: 80px 80px;
	height: 80px; 
	width: 80px; 
	top: 20%;
	left: 30%;
	position: absolute;
	z-index: -5;
}
#bokeh15 {
	background-size: 100px 100px;
	height: 100px; 
	width: 100px; 
	bottom: 40%;
	right: 25%;
	position: absolute;
	z-index: -5;
}
#bokeh15 {
	background:url(bigbokeh.png) no-repeat center center;
	background-size: 200px 200px;
	height: 200px; 
	width: 200px; 
	bottom: 20%;
	left: 35%;
	position: absolute;
	z-index: -5;
}
#bokeh16 {
	background-size: 40px 40px;
	height: 40px; 
	width: 40px; 
	top: 10%;
	left: 40%;
	position: absolute;
	z-index: -5;
}
#bokeh17 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	bottom: 10%;
	right: 30%;
	position: absolute;
	z-index: -5;
}
#bokeh18 {
	background-size: 50px 50px;
	height: 50px; 
	width: 50px; 
	bottom: 10%;
	left: 25%;
	position: absolute;
	z-index: -5;
}
#bokeh19 {
	background-size: 40px 40px;
	height: 40px; 
	width: 40px; 
	bottom: 35%;
	right: 25%;
	position: absolute;
	z-index: -5;
}
#bokeh20 {
	background-size: 40px 40px;
	height: 40px; 
	width: 40px; 
	top: 15%;
	right: 35%;
	position: absolute;
	z-index: -5;
}
#bokeh21 {
	background-size: 300px 300px;
	height: 300px; 
	width: 300px; 
	left: 5%;
	bottom: 10%;
	position: absolute;
	z-index: -5;
}

/* PRELOAD */
div#preload { display: none; }