/*
Theme Name: Vampa Design
Theme URI: http://vampa.org
Description: Our imagination at your fingertips
Version: 3.0
Author: Alex Stomp
Author URI: http://www.vampa.org
*/


/*** RESET STYLES ***/

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 14px;
	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

ul{list-style: none;}
span.hidden{visibility: hidden;}
.displayNone{display: none;}
span.indent p{padding-left: 20px; float: left;clear: none;}

/*** WRAPS ***/

html{background: #eae9e9 url('./img/bg.png') fixed center top no-repeat;position: relative;}
body{float: center;text-align: center;}
.wrapper{margin: 70px auto;text-align: left;width: 1000px;}

/*** HEADER ***/

#header-wrap{float: left;width: 1000px;}
#head-nav{text-align: left;float: left;clear: both;padding-top: 13px;}
#head-nav li{float: left;padding-right: 30px;}
#head-nav li a{color: #707070;text-shadow: 0 2px 2px #b1b1b1;}
#head-nav li a:hover{color: #505050;}
a#head-logo{float: right;}

/*** SIDEBAR ***/

#side-links-wrap{position: absolute;right: 0;top: 135px;}
.side-button{margin-top: ;margin-bottom: 10px;float: right; clear: right;}
.side-box{
	background-color: #ffffff;
	border-top: 1px solid #c2c2c2;
	border-left: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;
	position: absolute; right: 0px;top: -0px;
	padding: 25px;
	width: 300px;
	z-index: 100;
	display: none;
	text-align: left;}
.side-box h2{font-size: 18px;color: #313131;}
.side-box p{padding-top: 5px; line-height: 20px;color: #505050;}
.side-box p a{color: #505050;font-weight: bold;}
.side-box p a:hover{color: #f46404;}
.requestQuoteSide a{font-size: 25px;float: left;clear: both;padding-top: 15px;text-shadow: 0px 2px 3px #a0a0a0;}
#twitter-follow{float: right;margin: 25px 0 10px 0; text-align: center;width: 148px;}
#twitter-follow a{padding: 7px 15px;background: #edecec; border: 1px solid #d4d4d4;color: #777777;}
#twitter-follow a:hover{background: #f2f2f2; border: 1px solid #d1d1d1;color: #575757;}
#quote-box{top: 85px;} 

/*****************/
/**** CONTENT ****/
/*****************/

/*** HOME ***/

/*Slideshow*/

.slideshow{width: 1000px;float: left; margin-top: 25px;clear: both;}
#home-slideshow{width: 1000px; height: 375px; position: relative;clear: both;}
#home-slideshow .slideshow img{width: 1000px; height: 375px;}

/*arrows*/

div#slidenav-prev{position: absolute; left: -25px;top: 190px;}
div#slidenav-next{position: absolute; right: -25px; top: 190px;}

.substatement{float: center; color: #505050;width: 1000px; text-align: center; clear: both; margin-top: 50px;}
.substatement a{color: #353535;}
.substatement a:hover{color: #141414;}

/*** SERVICES ***/

/*Slideshow*/

.services-wrap{background-color: #f7f7f7; padding: 25px 25px 0 25px;float: left; clear: both;margin-top: 25px;border: 1px solid #e1e1e1;}

#slideshow .slides2 {overflow: hidden;width: 1000px;height: 428px;}
#slideshow .slides2 li{width: 1000px; float: left; text-align: left;height: 428px;}
#slideshow .slides2 ul {width: 4000px;}

.services-slide{text-align: left;}
.services-slide h2{font-size: 25px;color: #505050;padding: 0px 0 0px 0;}
.services-slide p{float: left; clear: both;padding-top: 15px;line-height: 25px; font-size: 14px;color: #808080;}
.slide-text{width: 500px;float: left;}
img.computer{float: right; width: 425px;height: 376px;margin-left: 25px;}

.tab-nav-wrap{float: left; text-align: left;margin-top: 25px;padding: 25px 0;border-top:1px solid #e7e7e7;width: 950px;}
.slides-nav li{float: left;text-align: center;border-right: 1px solid #cccccc;width: 236px;}
.slides-nav > li:last-child {border: none;}
.slides-nav li a{color: #505050;font-weight: bold;font-size: 20px;}
.slides-nav li a:hover{color: #212121;}
.slides-nav li.on a{color: #272727;}
.slides-nav li p{padding-top: 5px;color: #a0a0a0;}
.slides-nav li.on p{color: #707070;}


/*** PORTFOLIO ***/

/*Slideshow*/

#port-slideshow{width: 1000px;float: left; margin-top: 25px;clear: both;position: relative;}
#port-slidesContainer{width: 1000px;}
.portslide{float: left;width: 1000px;}


div.portPost {float: left; clear: none;display: block;width: 445px;padding: 20px;height: 390px;position: relative;}
div.portPost2{float: left; clear: none;display: block;width: 445px;padding: 20px;margin-left: 30px;height: 390px;position: relative;}
div.portPost:hover, div.portPost2:hover{background: white;}
img.portImage{background-color: black;position: relative;z-index: 1;width: 445px; height: 200px;}
span.overlay{background: url('./img/imageOverlayBg.png') repeat;width: 445px; height: 200px;float: left; clear: both;margin-top: -200px;position: relative;z-index: 2;display: none;}
.portBelowImage{text-align: left; float: left;clear: both;width: 445px;}
.portBelowImage h2{font-size: 24px; color: #414141;padding-top: 15px;}
.portBelowImage p{line-height: 25px; color: #707070;padding-top: 5px;}
a.portLink{position: absolute; bottom: 20px;text-align: right;float: left;padding-top: 10px;color: #619b75; width: 445px;}
div.portslide > div.portPost:last-child a.portLink{bottom: 25px;}
a.portLink:hover{color: green;}
a#overlay-preview{background: url('./img/glass-view.png') no-repeat; width: 51px; height: 72px; display: block;margin-top: 65px;float: left;border-right: 1px dashed #404040;margin-left: 150px;padding-right: 20px;}
a#overlay-more{margin-left: 20px;background: url('./img/arrow-more.png') no-repeat; width: 50px; height: 72px; display: block;margin-top: 65px;float: left;}

/*arrows*/

div#port-slidenav-prev{position: absolute; left: -30px;top: 350px;}
div#port-slidenav-next{position: absolute; right: -30px; top: 350px;}

/*** SHOP ***/

#temp-shop{clear: both; float: left; margin-top: 25px; width: 948px; padding: 25px; background: white; border: 1px solid #e1e1e1;}
.shop-text{width: 600px; text-align: left;float: left;}
.shop-text h2{font-size: 25px;color: #505050;padding: 0 0 15px 0;}
.shop-text p{color: #808080;line-height: 30px;}
#temp-shop img{float: right;margin-top: 25px;margin-right: 75px;}

/*** PAGES ***/

.page-text{background: white; border: #e1e1e1; padding: 25px; margin-top: 25px; clear: left; float: left; text-align: left; width: 950px;}
.page-text h1{font-size: 25px; color: #505050; padding: 0 0 15px 0;}
.page-text h2{font-size: 18px; color: #656565; padding: 10px 0 10px 0;}
.page-text p{color: #808080; line-height: 30px;}

/*** FOOTER ***/

#footer-wrap{margin: 20px auto; clear: both; float: right;}
#footer-wrap p{color: #a0a0a0;margin-top: 50px;}