/* Slider on portfolio page */
#slider{}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:570px;
	height:300px;
	overflow:hidden; 
	}	
#prevBtn, #nextBtn{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	}	
#nextBtn{ 
	left:570px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:30px;
	height:77px;
	background:url(http://templatica.com/images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a{ 
	background:url(http://templatica.com/images/btn_next.gif) no-repeat 0 0;	
	}
#portfolio {
	margin-left: 100px;
	position: relative;
	padding-top: 1em;
	width: 900px;
	padding-bottom: 1px;
	}
/* Portfolio Page */	
/*#portfolio {
	position: relative;
	padding-top: 1em;
	width: 900px;
	padding-bottom: 1px;
}
#portfolio img{
	margin:0 .4em .4em 0;
	padding: .4em;
	border: 1px solid #7d7671;
	background:#7d7671;
	display:inline;
}
.large-image {
	float:left;
}

#copy {
	float:left;
	margin:10px;
	width:253px;
}
#copy ul{
	border-top:1px dashed #b2b2b2;
}

#copy li{
	padding:3px 3px 3px 20px;
	color:#ffffff;
	font-size:110%;
	border-bottom:1px dashed #b2b2b2;
}
#copy li:hover {
	background:#7f7671;
}

.thumbnails {
	margin:10px 0 10px 0;
	display:inline;
	clear:both;
}
.thumbnails img{
	margin:0 .4em .4em 0;
	padding: .4em;
	border: 1px solid #7d7671;
	background:#7d7671;
	display:inline;
}
.thumbnails img:hover{
	border: 1px solid #d3dd9d;
	background:#d3dd9d;
	display:inline;
} */
#caption{
	float:right;
	width:360px;
	color:#fff;
	margin:0 10px 0 10px;
	font-size:110%;
}
#caption img{
	border:solid 5px #918982;}

#caption p{
	font-size: 10px; color: #dcd9da; width:360px; margin-top:3px; padding-left:5px;
}
#caption p strong{
	font-size: 12px; color:#fff; text-align:center; padding:0; margin: 0;
}

#caption li {
	padding:15px 5px 15px 5px;
	border-bottom:1px dashed #b2b2b2;
}
#caption li:hover {
	background:#7f7671;
}
#caption li a{
	color:#e4aa90;
	text-decoration:underline;
}
#caption li a:hover{
	color:#6b635d;
	background:#f9dca2;
	text-decoration:none;
}
#twitter-link {
	margin-top:10px;
	color:#f9dca2;
	text-decoration:underline;
	}
#twitter-link:hover {
	text-decoration:none;
	}
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; font-size: 12px; color:#000;}
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(../images/overlay.png);}

/*
* html #overlay {
	background-color: #333;
	background-color: transparent;
	background-image: url(../images/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/overlay.png", sizingMethod="scale");
	}
	*/
#mywork {
	position: relative;
	padding-top: 10px;
	width: 900px;
	padding-bottom: 1px;
}

#mywork ul.thumbs{ list-style: none; margin:0; padding: 0; clear:both; }
#mywork ul.thumbs li{ float: left; padding: 0; margin: 5px 10px 5px 0;}
#mywork ul.thumbs li h3{ float: left; margin:0; padding:0;}
#mywork ul.thumbs li strong { font-size: 11px; color:#d3dd9d; padding:0;}
#mywork ul.thumbs li strong a{ font-size: 11px; text-decoration:none; color:#d3dd9d; padding:0;}
#mywork ul.thumbs li strong a:hover{ font-size: 11px; background-color:#57504b; color:#d3dd9d; padding:0;}
#mywork ul.thumbs li p{font-size: 10px; letter-spacing:.7px; margin:0 0 0 3px; padding:0; width:160px;}
#mywork ul.thumbs li a img{ padding: 3px; margin: 3px; background-color: #fff; border: 1px solid #312d2a;}
#mywork ul.thumbs li a:hover img{ padding: 3px; margin: 3px; background-color: #d3dd9d; border: 1px solid #312d2a;}
#mywork ul.thumbs li img.new {display: block; position: absolute; top: -3px; right: -3px; z-index: 1; border: none; }

 /*------CLEARING-----------*/
.clearall{clear:both;}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}
.clear {
	clear: both;
	height: 1px;
	line-height: 1px;
	font-size: 1px;
	padding: 0px;
	overflow: hidden;
	margin-bottom: -1px;
}
/*----------------------------------*/
.box {background: url(../images/bg-box.gif) repeat-y;}
.box-top {
	background: url(../images/bg-box-top.gif) no-repeat;
	width: 100%;
	overflow: hidden;
}
.box-bottom {
	background: url(../images/bg-box-bottom.gif) no-repeat 0 100%;
	width: 150%;
	overflow: hidden;
}
.sub-box {
	width:870px;
	float:left;
	padding: 15px 22px 25px 22px;
}
.sub-box h3 {
	height: 50px;
	width: 100%;
	margin-bottom: 15px;
}

.sub-box h4 {
	height: 116px;
	width: 100%;
	margin: 100px 100px 100px 253px;
}
.sub-box h3.txt-behind-the-scenes {background: url(../images/txt-behind-the-scenes.jpg) no-repeat;}
.sub-box h3.txt-pushin-pixels {background: url(../images/txt-pushin-pixels.jpg) no-repeat;}
.sub-box h3.txt-get-in-touch {background: url(../images/txt-get-in-touch.jpg) no-repeat;}
.sub-box h4.txt-thanks {background: url(../images/txt-thanks.jpg) no-repeat;}

.sub-box p {
	font-size: 120%;
	margin-bottom: 10px;
	text-align: left;
}
.sub-box a {
	color: #d3dd9d;
	text-decoration: underline;
}
.sub-box a:hover {
	color: #d3dd9d;
	text-decoration: none;
}
/*jQuery Hidden ID's*/
h2 {
	font-size: 140%;
	font-weight: bold;
	color: #c4714c;
	text-decoration: none;
}
#extra-text {
	margin: 0;
	padding: 0;
}
.x-marks-the-spot {
	float:right;
	margin: 0;
	padding: 0;
}
#web-design, #web-development, #graphic-design, #cms, #seo {
	margin: 20px;
	padding: 0;
	display:none;
}
#web-design p, #web-development p, #graphic-design p, #cms p, #seo p {
	color: #fff;
	font-size: 120%;
	margin-top: 15px;
	text-align: left;
}
#web-design a, #web-development a, #graphic-design a, #cms a, #seo a {
	color: #d3dd9d;
	text-decoration: underline;
}
#web-design a:hover, #web-development a:hover, #graphic-design a:hover, #cms a:hover, #seo a:hover {
	color: #d3dd9d;
	text-decoration: none;
}
/*content-list*/
.content-list {
	font-size: 120%;
	color: #dcd9da;
}
.content-list li {
	background: url(../images/img-arrow-bullet.gif) no-repeat 0 6px;
	padding-left: 27px;
	margin-left: 15px;
	margin-bottom: 8px;
}
.content-list a {color: #d3dd9d;}
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
    
#easyTooltip {
	font-size: small; 
	line-height: normal; 
	padding:2px 6px; 
	color: #FAFAFA; 
	border:1px solid #000; 
	background:#303030; 
	opacity:0.85; 
	border-radius:6px; 
	-webkit-border-radius:6px; 
	-moz-border-radius:6px;
}