/*
Theme Name: BadShark Communications
Theme URI: 
Description: BadShark Official Theme.
Version: 2.0
Author: Marco Lisci
Tags: 

Enjoy the theme!

*/

/* STANDARD CSS FILE - BADSHARK COMMUNICATIONS */

/* ---------------------------- */
/* STANDARD HTML TAG RESET  (Thanks to Eric Meyer, Blueprint, 960gs) */
/* ---------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
} 

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* ---------------------------- */
/* STANDARD HTML TAG DEFINITION */
/* ---------------------------- */

body {
	background: #0c2335 url(images/pattern.png) repeat;
	color: #c2c2c2;
 	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif;
 	font-size: 12px;
	line-height: 1.5; 
}

form, input { 
	color: #ffffff; 
 	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif;
 	font-size: 12px;
}

h1 {font-size:60px;} 
h2 {font-size:24px;} 
h3 {font-size:18px;} 
 
a:link, a:visited {color: #ffffff; font-weight: normal; text-decoration: none; outline: none;} 

a:hover {text-decoration: none; outline: none; border-bottom: 1px solid #003f98;}

a:active { text-decoration: none; outline: none;}

ul {list-style: none;}


/* ----------------------------*/ 
/* PAGE ELEMENTS     */ 
/* ----------------------------*/ 

body.home {
	background-color: #0c2335;
}

body.marco {
	background-color: #101d47;
}

body.luisa {
	background-color: #10003d;
}

body.services {
	background-color: #211700;
}

body.portfolioBody {
	background-color: #00171f;
}

body.fun {
	background-color: #001f00;
}

body.news {
	background-color: #191919;
}

.container {
	width: 940px;
	margin: 0px auto;
	padding: 0px 0px;
}
	
	
	/* ---------------------------*/ 
 	/* MAIN    */
	
	#header {
		position: relative;
		z-index: 20;
	}
	
	#navCont {
		width: 700px;
		background: #000000;
		border: 1px solid #2f2f2f;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		height: 30px;
		position: absolute;
		top: -1px;
		left: 0px;
		z-index: 20;
		overflow: hidden;
	}
	
		#nav {
			width: 700px;
			height: 30px;
			position: absolute;
			top: -1px;
			left: 0px;
			z-index: 30;
		}
		
			#nav li {
				float: left;
				height: 30px;
				z-index: 30;
				cursor: pointer;
			}
			
			#nav li:hover, #nav li.current {
				background: url(images/overLight.png) no-repeat top center;
			}
			
				#nav li.current a, #nav li:hover a {
					color:#cccccc;
				}
			
			#nav li.first:hover, #nav li.last:hover {
				background: none;
			}
			
				#nav li a {
					height: 30px;
					line-height: 30px;
					padding: 0px 23px;
					font-size: 13px;
					color: #b3b3b3;
					font-weight: normal;
					font-size: 12px;
				}
				
				#nav li a:hover {
					border: none;
				}
				
				#nav li.first a {
					padding-left: 10px;
					padding-right: 10px;
				}
				
				#nav li.last a {
					padding-left: 2px;
					padding-right: 0px;
				}
				
					#nav li.first ul a {
						padding: 0px;
					}
				
					#nav li a img {
						vertical-align: middle;
						margin-top: -7px;
					}
					
					#nav li ul {
						position: absolute;
						top: 30px;
						left: 0px;
						height: 50px;
						width: 700px;
						line-height: 50px;
						text-align: center;
						font-size: 11px;
						padding-top: 10px;
					}
					
						#nav li ul li {
							position: relative;
							float: none;
							bottom: 0px;
							display: inline;
							cursor: auto;
						}
						
						#nav li ul li:hover {
							background: none;
						}
						
						#nav li ul li img {
							height: 30px;
							vertical-align: top;
						}
						
						#nav li ul li a {
							font-weight: normal;
							font-size: 11px;
							padding: 0px;
							color: #ffffff;
						}
			
			.announce {
				float: right;
				width: 160px;
				height: 45px;
				padding-top: 5px;
				background: #000000;
				border: 1px solid #2f2f2f;
				border-radius: 2px;
				-moz-border-radius: 2px;
				-webkit-border-radius: 2px;
				margin-top: -1px;
				text-align: center;
				font-size: 10px;
				font-weight: normal;
				color: #606060;
			}
			
				.announce h3 {
					width: 124px;
					height: 20px;
					background: url(images/theBadsharker.png) no-repeat;
					text-indent: -9999em;
					margin-left: 18px;
				}
	

	/* ---------------------------*/ 
 	/* MAIN    */
	
	#main {
		
	}
	
		#main .top {
			height: 170px;
			width: 880px;
			position: relative;
			background: url(images/titleLight.png) no-repeat bottom left;
			margin-bottom: -1px;
			margin-left: -60px;
			padding-left: 60px;
			padding-top: 40px;
			line-height: 1;
			z-index: 10;
		}
		
			#main .top img {
				position: absolute;
				top: -76px;
				right: 25px;
				z-index: 10;
			}
			
			body.home #main .top img {
				top: -55px;
				right: -90px;
			}
			
			body.services #main .top img {
				top: 91px;
				right: 50px;
			}
			
			body.portfolioBody #main .top img {
				top: 91px;
				right: 50px;
			}
			
			body.news #main .top img {
				top: 91px;
				right: 50px;
			}
			
			body.fun #main .top img {
				top: 91px;
				right: 50px;
			}
			
			body.home #main .top .first {
				font-size: 48px;
				margin-top: -15px;
			}
			
				body.home #main .top strong {
					color: #cccccc !important;
				}
			
			body.home #main .top .second {
				font-size: 20px;
			}
			
			#main .top .first {
				font-size: 60px;
				font-weight: bold;
				color: #005bdb;
				margin-left: 60px;
				position: relative;
				margin-top: 20px;
			}
			
			#main .top .second {
				font-size: 24px;
				color: #898989;
				margin-left: 60px;
			}
		
		#main .content {
			width: 820px;
			background: #000000;
			border: 1px solid #2f2f2f;
			border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			padding: 60px;
			position: relative;
			z-index: 5;
		}
			
			/* Home */
			#main .content .line {
				font-size: 14px;
				color: #707070;
				line-height: 2;
				font-weight: normal;
				text-align: center;
			}
			
				#main .content .line h2 {
					margin-top: 10px;
				}
			
				a.marco {
					width: 249px;
					height: 70px;
					background: url('images/marcoHome.png') no-repeat top left;
					display: inline-block;
					text-indent: -9999em;
					border-bottom: 1px solid #000000;
				}
				
				a.luisa {
					width: 248px;
					height: 70px;
					background: url('images/luisaHome.png') no-repeat top left;
					display: inline-block;
					text-indent: -9999em;
					border-bottom: 1px solid #000000;
				}
				
				a.luisa:hover, a.marco:hover {
					border-bottom: 1px solid #003f98;
				}
				
				#main .content .line h1 {
					font-size: 14px;
					margin-top: 10px;
				}
				
				#main .content .line strong {
					color: #c2c2c2;
					font-weight: normal;
				}
				
			
			/* Home Gallery */			
			#gallery {
				width: 980px;
				height: 260px;
				background: #191919;
				margin: 60px 0px 60px -80px;
				position: relative;
			}
			
				#gallery .topCorner {
					position: absolute;
					top: -19px;
					left: 0px;
				}
				
				#gallery .bottomCorner {
					position: absolute;
					bottom: -19px;
					right: 0px;
				}
				
				#gallery .topLeft {
					position: absolute;
					top: 0px;
					left: 0px;
					z-index: 200;
				}
				
				#gallery .bottomRight {
					position: absolute;
					bottom: 0px;
					right: 0px;
					z-index: 20;
				}
				
				#slideshow {
					width: 980px;
					height: 260px;
					overflow: hidden;
					position: relative;
				}
				
				#slideNav {
					position: absolute;
					width: 8px;
					left: 490px;
					top: 90px;
					z-index: 200;
				}
				
					#slideNav a {
						display: block;
						width: 8px;
						height: 8px;
						text-indent: -9999em;
						background: url(images/smallDot.png) no-repeat 0px 0px;
						margin-bottom: 10px;
						position: relative;
						z-index: 20;
					}
					
					#slideNav a:hover, #slideNav a.activeSlide {
						background: url(images/smallDot.png) no-repeat 0px -8px;
						border: none;
					}
				
				.slide {
					width: 840px;
					height: 230px;
					padding-left: 140px;
					padding-top: 30px;
					position: relative;
					z-index: 10;
				}
				
						.entry {
							width: 280px;
							height: 180px;
							padding: 10px;
							background: #000000;
							border: 2px solid #c2c2c2;
							border-radius: 10px;
							-moz-border-radius: 10px;
							-webkit-border-radius: 10px;
							float: left;
							margin-right: 100px;
							position: relative;
						}
						
						.entry:hover .overlay {
							display: block;
						}
						
							.entry img {
								width: 280px;
								height: 180px;
							}
							
							.entry .overlay {
								display: none;
								width: 240px;
								height: 140px;
								padding: 20px;
								position: absolute;
								top: 10px;
								left: 10px;
								background: url(images/overlay.png) repeat;
								font-size: 12px;
							}
							
								.entry .overlay h3 {
									font-size: 14px;
									font-weight: bold;
									color: #ffffff;
									line-height: 1;
									margin-bottom: 15px;
								}
								
								.entry .overlay p {
									margin-bottom: 5px;
								}
								
								.entry .overlay a {
									color: #c2c2c2;
									font-weight: normal;
								}
								
								.entry .overlay a:hover {
									border: none;
								}
								
								.entry .overlay a.show {
									display: block;
									width: 100px;
									height: 20px;
									position: absolute;
									text-align: center;
									line-height: 20px;
									border-radius: 3px;
									-moz-border-radius: 3px;
									-webkit-border-radius: 3px;
									bottom: 20px;
									left: 20px;
									background: #003f98;
								}
								
								.entry .overlay a.live {
									display: block;
									width: 100px;
									height: 20px;
									position: absolute;
									text-align: center;
									line-height: 20px;
									border-radius: 3px;
									-moz-border-radius: 3px;
									-webkit-border-radius: 3px;
									bottom: 20px;
									right: 20px;
									background: #c2c2c2;
									color: #003f98;
								}
								
								.entry .overlay a.show:hover, .entry .overlay a.live:hover {
									background: #333333;
									color: #ffffff;
								}
			
			/* Contact Box */					
			#contact {
				width: 380px;
				float: left;
				padding: 30px 40px;
				font-size: 10px;
				margin-right: 40px;
				background: #000000;
			}
			
			#contact.highlight {
				background: #ffe400;
			}
			
				#contact fieldset.first {
					position: relative;
					width: 380px;
					height: 80px;
				}
				
				#name, #email {
					width: 110px;
					padding-left: 10px;
					height: 20px;
					padding-top: 10px;
					border: 0px;
					background: #3b3b3b;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					font-size: 10px;
				}
				
				#name {
					position: absolute;
					top: 0px;
					left: 0px;
				}
				
				#email {
					position: absolute;
					bottom: 0px;
					left: 0px;
				}
				
				#message {
					width: 220px;
					height: 60px;
					position: absolute;
					top: 0px;
					right: 0px;
					border: 0px;
					background: #c2c2c2;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					padding: 10px;
					color: #000000;
				}
				
				#contact fieldset.second {
					width: 380px;
					height: 40px;
					margin-top: 20px;
					position: relative;
				}
				
				#contact fieldset.second p {
					width: 120px;
					float: left;
					padding-top: 5px;
				}
				
				#contact fieldset.second img {
					position: absolute;
					right: 60px;
					top: 15px;
				}
				
				#submit {
					width: 240px;
					height: 40px;
					float: right;
					border: none;
					background: #003f98;
					color: #ffffff;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					text-transform: uppercase;
					cursor: pointer;
				}
			
				#contact input.errorField {
					background-color: #ff0000;
					color: #ffffff;
				}
				
				#contact .messageOut {
					text-align: center;
					font-weight: bold;
					font-size: 18px;
				}
				
			/* Bottom LinkBox */
			.linkBox {
				width: 280px;
				padding-left: 20px;
				margin-top: 30px;
				float: right;
				position: relative;
				border-left: 1px solid #606060;
				color: #6d6d6d;
				height: 142px;
			}
			
				.linkBox h3 {
					width: 22px;
					height: 144px;
					background: url(images/latestTweets.png) no-repeat;
					text-indent: -9999em;
					position: absolute;
					left: -18px;
					top: 0px;
				}
			
				.linkBox a {
					color: #6d6d6d;
				}
				
					.linkBox ul li {
						margin: 20px 0px;
					}
					
					.linkBox ul li small {
						display: block;
						margin-top: 5px;
						color: #555555;
					}
					
					.linkBox ul li.twitter {
						text-transform: uppercase;
						font-size: 9px;
					}
					
						.linkBox ul li.twitter a {
							color: #005bdb;
						}
			
			/* Copyright Note */					
			.copyright {
				position: absolute;
				bottom: 5px;
				left: 15px;
			}
			
			/* Profiles */
			#main .content .mainCol {
				width: 460px;
				float: left;
				margin-bottom: 60px;
			}
			
				#main .content .mainCol .block, #main .content .sideCol .block {
					border-left: 1px solid #6d6d6d;
					padding-left: 10px;
					padding-bottom: 60px;
					position: relative;
					margin-bottom: 60px;
				}
				
				#main .content .mainCol h3, #main .content .sideCol h3 {
					width: 18px;
					position: absolute;
					left: -20px;
					top: 20px;
				}
				
					#main .content .mainCol p span,#main .content .sideCol p span {
						color: #6d6d6d;
					}
					
					#main .content .mainCol a span.back, #main .content .sideCol a span.back {
						margin: 0px;
					}
					#main .content .mainCol a , #main .content .sideCol a {
						text-decoration: none;
						line-height: 4;
					}
			
			#main .content .sideCol {
				width: 280px;
				float: right;
				margin-bottom: 60px;
			}
			
			/* Services */
			#main .content .leftCol {
				width: 400px;
				float: left;
			}
			
			#main .content .rightCol {
				width: 400px;
				float: right;
			}
			
				#main .content .leftCol .block {
					border-right: 1px solid #242424;
					padding-right: 20px;
				}
			
				#main .content .rightCol .block {
					border-left: 1px solid #242424;
					padding-left: 20px;
				}
				
				#main .content .leftCol .block, #main .content .rightCol .block {
					margin-bottom: 60px;
					color: #a5a5a5;
					padding-bottom: 60px;
					position: relative;
				}
				
					h2.webDesign {
						color: #ffffff;
					}
					
					h2.copywriting {
						color: #cce6ff;
					}
					
					h2.development {
						color: #abdd84;
					}
					
					h3.webSecurity {
						color: #fffdcc;
					}
				
					#main .content .leftCol .block span, #main .content .rightCol .block span {
						color: #ffffff;
					}
					
					#main .content .leftCol .block img, #main .content .rightCol .block img {
						vertical-align: bottom;
					}
					
					#main .content .leftCol .block ul, #main .content .rightCol .block ul {
						margin: 10px 0px;
					}
					
						#main .content .leftCol .block ul li, #main .content .rightCol .block ul li {
							margin-bottom: 10px;
						}
					
					#main .content .leftCol .block a.contact, #main .content .leftCol .block a.portfolio, #main .content .rightCol .block a.contact, #main .content .rightCol .block a.portfolio {
						position: absolute;
						width: 100px;
						height: 20px;
						bottom: 0px;
						text-transform: uppercase;
						font-weight: normal;
						display: block;
						line-height: 1;
					}
					
					#main .content .leftCol .block a.contact {
						left: 0px;
					}
					
					#main .content .rightCol .block a.contact {
						left: 20px;
					}
					
					#main .content .leftCol .block a.portfolio {
						right: 0px;
					}
					
					#main .content .rightCol .block a.portfolio {
						right: -20px;
					}
					
					#main .content .leftCol .block a.contact:hover, #main .content .rightCol .block a.contact:hover, #main .content .leftCol .block a.portfolio:hover, #main .content .rightCol .block a.portfolio:hover {
						border: none;
						color: #c2c2c2;
					}
					
						#main .content .leftCol .block a.contact img, #main .content .rightCol .block a.contact img, #main .content .leftCol .block a.portfolio img, #main .content .rightCol .block a.portfolio img {
							vertical-align: -20%;
						}
				
					#main .content .leftCol .block .head, #main .content .rightCol .block .head {
						margin-bottom: 30px;
					}
					
						#main .content .leftCol .block .head img, #main .content .rightCol .block .head img {
							float: left;
							width: 116px;
							height: 65px;
							margin-right: 15px;
						}
						
						#main .content .leftCol .block .head h2, #main .content .rightCol .block .head h2 {
							line-height: 0.9;
							margin-bottom: 0px;
						}
						
						#main .content .leftCol .block .head p, #main .content .rightCol .block .head p {
							font-size: 14px;
							margin: none;
							line-height: 1.2;
						}
						
						#main .content .leftCol .block .head span, #main .content .rightCol .block .head span {
							color: #c2c2c2;
						}
			
			/* Portfolio */
			body.portfolioBody h2.line, body.fun h2.line, body.news h2.line {
				font-size: 18px !important;
			}
			
			body.news h2.line {
				color: #ffffff !important;
				font-size: 24px !important;
				font-weight: bold !important;
			}
			
			body.news h2.line img {
				margin: 0px !important;
				padding: 0px !important;
			}
			
					body.portfolioBody h2.line a img, body.fun h2.line a img, body.news h2.line a img {
						margin: 0px !important;
						padding: 0px !important;
					}
					
			.ribbon {
				width: 820px;
				min-height: 60px;
				background: #191919;
				margin: 30px 0px 60px -80px;
				position: relative;
				padding: 30px 80px;
				line-height: 3;
			}
			
				h2.currentTag {
					font-size: 14px;
					line-height: 1;
					text-align: center;
					margin-left: -80px;
					margin-top: -30px;
					margin-bottom: 60px;
				}
			
				.ribbon .topCorner {
					position: absolute;
					top: -19px;
					left: 0px;
				}

				.ribbon .bottomCorner {
					position: absolute;
					bottom: -19px;
					right: 0px;
				}
				
				.ribbon .topLeft {
					position: absolute;
					left: 0px;
					top: 0px;
				}
				
				.ribbon .bottomRight {
					position: absolute;
					right: 0px;
					bottom: 0px;
				}
				
				.ribbon a {
					margin-right: 10px;
					display: inline-block;
					height: 25px;
					line-height: 25px;
					background: #003f98;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					padding: 0px 10px !important;
					color: #c2c2c2;
				}
				
				.ribbon a:hover {
					border: none;
					color: #ffffff;
				}
				
				.entryArea {
					padding: 30px 0px 0px 55px;
					margin-bottom: 60px;
					margin-right: -45px;
				}
				
					.entryArea .entry {
						margin-right: 100px;
						margin-bottom: 60px;
					}
				
				/* News */
				
						.ribbon a.feed {
							position: absolute;
							right: 0px;
							bottom: 0px;
							background: none;
							display: block;
							width: 71px;
							height: 71px;
							margin: 0px !important;
							padding: 0px !important;
						}
						
						.ribbon a.feed:hover {
							border: 0px !important;
						}
					
					body.news .ribbon {
						width: 700px;
						padding: 30px 140px;
						line-height: 1.5;
					}
					
						body.news .ribbon a {
							background: none;
							padding: 0px !important;
							margin: 0px !important;
							color: #ffffff;
						}
					
						body.news .ribbon a:hover {
							border-bottom: 1px solid #003f98;
						}
						
						body.news .ribbon p {
							font-size: 18px;
						}
						
						body.news .ribbon small {
							display: block;
							text-align: right;
							margin-top: 30px;
							margin-bottom: -20px;
						}
						
							body.news .ribbon small a:hover {
								border: none;
								color: #c2c2c2;
							}
						
						body.news .entryArea {
							padding: 30px 110px 0px 60px;
						}
						
						.newsEntry {
							margin-bottom: 60px;
						}
							
							.newsEntry small {
								display: block;
								text-align: right;
								margin-top: 20px;
							}
							
								.newsEntry small a:hover {
									border: none;
									color: #c2c2c2;
								}
				
	/* ---------------------------*/
	/* FOOTER */ 

	#footer {
		padding: 60px 0px;
	}
	
		#footer .footBox {
			width: 400px;
			float: left;
			margin-left: 60px;
		}
		
			#footer .footBox h3 {
				font-size: 18px;
				color: #606060;
			}
			
			#footer .footBox .logos {
				margin: 20px 0px;
			}
			
				#footer .footBox .logos a {
					margin-right: 30px;
				}
				
				#footer .footBox .logos a:hover {
					border: none;
				}
			
		a#showList {
			font-size: 9px;
			color: #474747;
			text-transform: uppercase;
		}
		
		#clientList {
			margin: 10px 0px;
			color: #474747;
			font-size: 10px;
		}
			
/* ----------------------------*/
/* CUSTOM CLASSES     */
/* ----------------------------*/

/* Page Navi */
.wp-pagenavi {
	clear: both;
	text-align: center;
	margin-bottom: 60px;
}

	.wp-pagenavi .pages {
		display: none;
	}
	
	.wp-pagenavi a {
		display: inline-block !important;
		width: 8px !important;
		height: 8px;
		text-indent: -9999em !important;
		background: url(images/smallDot.png) no-repeat 0px 0px !important;
		background-color: none !important;
		border: 0px !important;
		padding: 0px !important;
		margin: 0px 10px !important;
	}
	
	.wp-pagenavi a:hover, .wp-pagenavi .current {
		display: inline-block !important;
		width: 8px !important;
		height: 8px;
		text-indent: -9999em !important;
		background: url(images/smallDot.png) no-repeat 0px -8px !important;
		background-color: none !important;
		border: 0px !important;
		padding: 0px !important;
		margin: 0px 10px !important;
	}

/* ColorBox */
#cboxContent{
	background:#000;
	margin-top:20px;
}

span.back {
	background: #003f98;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2px 7px;
	margin: 0px 3px;
}

/* jGrowl */
div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
	background-color: 		#000000 !important;
	border:					1px solid #2f2f2f;
	color: 					#b3b3b3 !important;
	opacity: 				.50;
	filter: 				alpha(opacity = 50);
	zoom: 					1;
	width: 					235px;
	padding: 				10px;
	margin-top: 			5px;
	margin-bottom: 			5px;
	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
	font-size: 				12px;
	text-align: 			left;
	display: 				none;
	-moz-border-radius: 	5px;
	-webkit-border-radius:	5px;
}

.red {
	color: #ff0000;
}

.white {
	color: #ffffff;
}

.leftAlign {float:left;}

.rightAlign {float:right;}

.clear {clear: both; height: 0px;}

.hide {display: none;}

em {font-style: italic;}