@charset "UTF-8";

/* CSS Document */


body {
background-image: url(../images/bg-repeat.jpg);
font-family:"Helvetica", "Arial", "sans-serif";
color: #393e47;
}

* {
margin:0;
padding:0;
}

img {border-style:none;}

h1{
font-size: 28px;
padding: 0 0 10px 0;
margin: 0;
}

h2{
font-size: 14px;
color: white;
font-weight: normal;
}

h2 a{
color: #e34782;
padding-right: 15px;
}

p {
font-size: 13px;
line-height: 19px;
padding: 5px 0 2px 4px;
}

p.center{
text-align: center;
}

a{
text-decoration: none;
color: #2381c0;
}

a:hover{
color: black;
}

.float-left{float: left;}
.float-right{float: right;}


.clear{clear: both;}

.right18{padding-right: 18px;} /* used on the services page */
.right10{padding-right: 10px;} /* used on affiliate page */


/* Containers */

#header{
background: url(../images/header.gif) top center;
margin: 0 auto;
width: 888px;
height: 220px;
}

.container-home {
margin:0 auto;
width:790px;
}

.container {
margin:0 auto;
width:900px;
}

/* Navigation START ---------------------------------------------*/

#navigation{
margin: 0 auto;
width: 523px;
}

#navMenu {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 523px;
    height: 36px;
    overflow: hidden;
}

#navMenu li{
display: block;
float: left;
}

#navMenu a {
    display: block;
    background-image: url(../images/navsprites.gif);
    padding-top: 36px; /* same as height of #example-nav */
    text-decoration: none; /* needed for IE8 beta, otherwise it still shows the underlines */
}

#navHome a{
width: 80px;
}
#navHome a:hover {
background-position: 0px -36px;
}
#navHome-active a{
background-position: 0px -36px;
width: 80px;
}

#navPortfolio a{
background-position: -80px 0px;
width: 113px;
} 
#navPortfolio a:hover {
background-position: -80px -36px;
}
#navPortfolio-active a{
background-position: -80px -36px;
width: 113px;
}

#navServices a{
background-position: -193px 0px;
width: 104px;
}
#navServices a:hover {
background-position: -193px -36px;
}
#navServices-active a{
background-position: -193px -36px;
width: 104px;
}

#navBlog a{
background-position: -297px 0px;
width: 74px;
}
#navBlog a:hover {
background-position: -297px -36px;
}
#navBlog-active a{
background-position: -297px -36px;
width: 74px;
}

#navAbout a{
background-position: -371px 0px;
width: 152px;
}
#navAbout a:hover {
background-position: -371px -36px;
}
#navAbout-active a{
background-position: -371px -36px;
width: 152px;
}

/* Navigation END ---------------------------------------------*/

/* Header START ---------------------------------------------*/

#logo{
margin: 0 auto;
width: 360px;
height: 130px;
}

/* Header END ---------------------------------------------*/

/* Footer START ---------------------------------------------*/

#footer-home{
background: url(../images/footer-home-bg.jpg) top center no-repeat;
padding-top: 20px;
margin: 0 auto;
margin-top: 20px;
height: 90px;
width: 790px;
}

#footer{
background: url(../images/footer-bg.jpg) top center no-repeat;
padding-top: 20px;
margin: 0 auto;
margin-top: 20px;
height: 90px;
width: 900px;
}

	#footer-home p,
	#footer p{
	font-size: 11px;
	padding: 3px 0 0 0;
	}

h4{
font-weight: normal;
font-size: 14px;
color: #0f4777;
padding-bottom: 4px;
}

.footer-links{
float: left;
font-size: 11px;
line-height: 18px;
padding: 0 25px 0 2px;
}

.footer-links ul{
list-style: none;
list-style-position: inside;
}

.footer-links a{
color: #393e47;
}

.footer-links a:hover{
color: black;
text-decoration: underline;
}


.social-links{
float: right;
padding-bottom: 23px;
width: 201px;
}

#social {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
width: 201px;
height: 32px;
}

	#social li{
	display: block;
	float: left;
	}

	#social a {
    display: block;
    background-image: url(../images/social-sprites.gif);
    padding-top: 32px; /* same as height of #example-nav */
    text-decoration: none;
	}

#facebook a{
width: 33px;
}
#facebook a:hover {
background-position: 0px -32px;
}

#twitter a{
background-position: -33px 0px;
width: 33px;
} 
#twitter a:hover {
background-position: -33px -32px;
}

#flickr a{
background-position: -66px 0px;
width: 33px;
}
#flickr a:hover {
background-position: -66px -32px;
}

#linkedin a{
background-position: -99px 0px;
width: 33px;
}
#linkedin a:hover {
background-position: -99px -32px;
}

#gowalla a{
background-position: -132px 0px;
width: 33px;
}
#gowalla a:hover {
background-position: -132px -32px;
}

#dribbble a{
background-position: -165px 0px;
width: 35px;
}
#dribbble a:hover {
background-position: -165px -32px;
}

/* Footer END ---------------------------------------------*/

/* Home START----------------------------------- */

#featured{
margin: 0 auto;
padding-left: 10px;
width: 800px;
}

#example {
	margin: 0 auto;
	width:760px;
	height:350px;
	position:relative;
}

#ribbon {
	position:absolute;
	top:-3px;
	left:-24px;
	z-index:500;
}

#frame {
	position:absolute;
	z-index:0;
	width:909px;
	height:351px;
	top:-3px;
	left:-80px;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:-6px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:760px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:760px;
	height:280px;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:775px;
}

/*
	Pagination
*/

.pagination {
	margin:26px auto 0;
	width:90px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../images/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
	Caption
*/

.caption {
	z-index:500;
	position:absolute;
	bottom:-35px;
	left:0;
	height:30px;
	padding:5px 20px 0 20px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:760px;
	font-size:1.3em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
}

	.caption p{padding: 3px 0 0 0;}

#introduction{
padding: 23px 0 0 0;
}

	h1.intro{float:left; font-weight: normal;}

	p.intro{
	font-size: 17px;
	line-height: 25px;
	}

.view-portfolio{
float: right;
margin-top: 3px;
height: 40px;
}

.view-portfolio a{
background: url(../images/btn-viewportfolio.jpg) no-repeat;
background-position: 0px 0px;
padding: 8px 11px 3px 11px;
width: 144px;
}
 
.view-portfolio a:hover {
background-position: 0px -28px;
}

/* Home END----------------------------------------- */

/* Portfolio START----------------------------------- */

.header{
clear: both;
background: url(../images/longheader.gif);
padding: 10px 0 0 13px;
width: 887px;
height: 34px;
}

.row{
padding: 12px 0 0px 6px;
width: 894px;
height: 273px;
}

p.project-title{
font-size: 13px;
padding: 5px 0 0 4px;
}

.portfolio{
text-shadow: 0px 1px 1px #fff;
}

.portfolio-item{
float: left;
background-image: url(../images/portfolio-background.png);
padding: 10px 5px 5px 12px;
width: 279px;
height: 249px;
}

/* Portfolio END-------------------------------------- */

/* Services START----------------------------------- */

.service{
float: left;
width: 440px;
padding-bottom: 30px;
}

.short-header{
background: url(../images/shortheader.gif);
padding: 10px 0 0 13px;
width: 427px;
height: 34px;
}

.service-left{
float: left;
width: 160px;
}

.service-right{
float: left;
width: 275px;
}

/* Services END-------------------------------------- */

/* Lightbox START-------------------------------------*/

#lightbox{	
position: absolute;	
left: 0; 
z-index: 100; 
text-align: center; 
line-height: 0;
width: 100%; 
}

	#lightbox img{ 
	width: auto; 
	height: auto;
	}

	#lightbox a img{ 
	border: none; 
	}

#outerImageContainer{ 
position: relative; 
background-color: #fff; 
margin: 0 auto; 
width: 250px; 
height: 250px; 
}

#imageContainer{ 
padding: 10px; 
}

#loading{ 
position: absolute; 
top: 40%; 
left: 0%; 
text-align: center; 
line-height: 0; 
width: 100%;
height: 25%; 
}

#hoverNav{ 
position: absolute; 
top: 0; 
left: 0;  
z-index: 10; 
width: 100%; 
height: 100%;
}

#imageContainer>#hoverNav{ 
left: 0;
}

#hoverNav a{ 
outline: none;
}

#prevLink, #nextLink{ 
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ 
display: block; 
width: 49%; 
height: 100%;
}

#prevLink { 
float: left;
left: 0; 
}

#nextLink { 
float: right;
right: 0; 
}

#prevLink:hover, #prevLink:visited:hover { 
background: url(../images/prevlabel.gif) left 15% no-repeat; 
}

#nextLink:hover, #nextLink:visited:hover { 
background: url(../images/nextlabel.gif) right 15% no-repeat; 
}

#imageDataContainer{ 
font: 10px Helvetica, sans-serif; 
background-color: #fff; 
margin: 0 auto; 
line-height: 1.4em; 
overflow: auto; 
width: 100%	; 
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ 
background-color: #000;
position: absolute; 
top: 0; 
left: 0; 
z-index: 90; 
width: 100%; 
height: 500px; 
}

/* Lightbox END-------------------------------------------*/


/* Affiliate Marketing Page START----------------------------------- */

.affiliate-item{
float: left;
width: 168px;
}

.small-text{
float: left;
width: 250px;
}