/*--------------------------------------*/
/* CSS Created by Erika Greco - 2010 ---*/
/* www.erikagreco.com ------------------*/
/*--------------------------------------*/

/*---------------------*/
/* General ------------*/
/*---------------------*/
* {margin: 0;padding: 0;}
body {
	background: #d7f6ff url(../img/tile_body.png) top left repeat-x;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #808080;
}
hr {display: none;}
img, fieldset {border: none;}
a:link, a:visited {color: #45ad2b;}
a:hover, a:active {color: #f28c19;}
.content,
#footer p#copy {
	width: 920px;
	margin: 0 auto;
}
.btn,
#header h1 a,
#header h3 a,
#header ul li a,
#internet li a,
#main #featured h2 a,
#main #latest h2 a,
#main #latest h2,
#tabs a {
	display: block;
	text-indent: -999em;
	overflow: hidden;
}
.btn:hover {background-position: bottom left !important;}
.arrow {
	background: url(../img/icon_arrow.png) center left no-repeat;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 0 0 10px;
}
.arrow:hover {background: url(../img/icon_arrow_hover.png) center left no-repeat;}
/*---------------------*/
/* Header -------------*/
/*---------------------*/
#header {
	background: url(../img/bg_hero.png) top center no-repeat;
	height: 370px;
	overflow: hidden;
}
#header .content {
	width: 940px;
}                  
#header h1 a,
#header h3 a {
	background: url(../img/logo_eg.png) top left no-repeat;
	float: left;
	display: inline;
	width: 183px;
	height: 48px;
	margin: 10px 7px 0 0;
}
#header h3 a {
	background: url(../img/logo_domo.png) top left no-repeat;
	width: 137px;
	height: 34px;      
	margin: 19px 0 0 0;
}
#header p {
	clear: both;
	margin: 0 0 0 10px;
	padding: 40px 0 0 0;
	line-height: 30px;
	font-size: 16px;
	color: #24588a;
	text-shadow: 0 1px 0 #cef1fc;
	letter-spacing: -1px;       
}
#header p span {
	background: url(../img/icon_heart.png) 4px 5px no-repeat;
	color: transparent;
	text-shadow: none;
}
#header p a {
	color: #24588a;	
	text-decoration: none;
}
#header p a:hover {
	color: #45ad2b;	
}                     
#header #btnViewPortfolio,
#header #btnContactMe {
	background: url(../img/btn_view_portfolio.png) top left no-repeat;
	margin: 81px 0 0 11px;
	width: 198px;
	height: 31px;
}
#header #btnContactMe {background: url(../img/btn_contact_me.png) top left no-repeat;}
/*---------------------*/
/* Nav ----------------*/
/*---------------------*/
#header a:hover {
	background-position: bottom left;
}
#header ul {
	float: right;
	display: inline;
	margin: 0 10px 0 0;
}
#header ul li {
	list-style: none;
	list-style-position: outside;
	float: left;
	display: inline;
	margin: 0 3px 0 0;
}
#header ul li a {	
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	display: inline;  
	height: 32px;     
	margin: 19px 0 0 0;
}                              
#header ul li.active a,
#header ul li a:active {
	background-position: top;
}             
#navHome {       
	background-image: url(../img/nav_home.png);
	width: 106px;
}               
#navPortfolio {
	background-image: url(../img/nav_portfolio.png);
	width: 142px;
}                                            
#navBlog {
	background-image: url(../img/nav_blog.png);
	width: 98px;
}                
#navContact {
	background-image: url(../img/nav_contact.png);
	width: 131px;
}
/*---------------------*/
/* Main ---------------*/
/*---------------------*/
#main {
	background: #fff url(../img/tile_main.gif) top left repeat-x;
	padding: 40px 0;
}               
#main .content {
	overflow: hidden;
	width: 920px;
}       
#main #featured h2,
#main #latest h2 {
	height: 35px;
	margin: 0 0 10px 0;
}                     
#main #txtFeaturedWork {
	background: url(../img/txt_featured_work.png) top left no-repeat;
	width: 179px;
}                
#main #txtLatestPost {
	background: url(../img/txt_latest_post.png) top left no-repeat;
	width: 148px;
	margin: 0 0 5px 0;
}                
#main #txtLatestTweets {
	background: url(../img/txt_latest_tweets.png) top left no-repeat;
	width: 166px;
	margin-top: 25px !important;
}
/*---------------------*/
/* Featured -----------*/
/*---------------------*/
#featured {
	float: left;
	display: inline;
	width: 390px;
}        
#featured img {
	display: block;
}                  
#featured .info {
	background: url(../img/bg_featured.png) top left no-repeat;
	width: 370px;
	overflow: hidden;
	height: 28px;        
	padding: 11px 10px 0 10px;
}                   
#featured h3 {
	float: left;
	display: inline;
	font-size: 15px;	   
	text-shadow: 0 1px 0 #fff;
	line-height: 18px;
}              
#featured h3 a {
	color: #333;    
	text-decoration: none;
}
#featured h3 a:hover {
	color: #007ac4;    
	text-decoration: none;
}
#featured #btnViewProject {
	background: url(../img/btn_view_project.png) top left no-repeat;
	float: right;
	display: inline;
	width: 120px;
	height: 21px;
}
/*---------------------*/
/* Latest -------------*/
/*---------------------*/
#latest {
	width: 470px;
	float: right;
	display: inline;       
}
#latest h3 {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 28px;
	letter-spacing: -1px;
	font-weight: normal;
	margin: 0 0 5px 0;
	color: #45ad2b;
}                      
#latest h3 a {
	text-decoration: none;
}                    
#latest p {
	line-height: 20px;
	margin: 0 0 5px 0;
}        
/*---------------------*/
/* Twitter ------------*/
/*---------------------*/
#twitter img {
	float: left;
	display: inline;
	width: 70px;
}
#twitter {
	background: url(../img/bg_twt_mid.png) top right repeat-y;
	width: 470px;
	overflow: hidden;
}                         
#twitter .btm {
	background: url(../img/bg_twt_btm.png) top right no-repeat;
	height: 5px;
	line-height: 0;
	font-size: 0;
	clear: right;
}
#tweets {
	background: url(../img/bg_twt_top.png) top right no-repeat;
	float: right;
	display: inline;
	width: 390px;
}                                        
#tweets ul {
	background: url(../img/bg_twt_grad.png) bottom left repeat-x;	
	padding: 10px 10px 5px 10px;                                                  
	font-size: 11px;
	line-height: 18px;
	margin: 0 1px 0 11px;
	list-style: none;
	list-style-position: outside;
	min-height: 60px;
}
#tweets a {
	text-decoration: none;
}
#tweets a:hover,
#tweets .twitterTime:hover {
	color: #f28c19;
}
#tweets .twitterTime {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	color: #adadad;          
	margin: 5px 0 0 0;
}                                   
/*---------------------*/
/* Footer -------------*/
/*---------------------*/
#footer {
	background: url(../img/tile_footer.gif) top left repeat-x;
	padding: 0 0 40px 0;
}
#footer .content {
	background: url(../img/bg_footer.gif) top left no-repeat;
	padding: 50px 0 0 0;
	overflow: hidden;
}
#footer h3 {
	color: #007ac4;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #fff;
	font-size: 24px;
	margin: 0 0 5px 0;
}
#footer p {
	margin: 0 0 8px 0;
}
#footer ul li {
	list-style: none;
	list-style-position: outside;
	float: left;
	display: inline;
}
#footer ul li a:hover {
	background-position: bottom left !important;
}
#footer p#copy {
	padding: 30px 0 0 0;
	font-size: 11px;
	color: #6bb8e1;
	font-style: italic;
	font-family: Georgia, Times, "Times New Roman", serif;
}
/*---------------------*/
/* Social Media -------*/
/*---------------------*/
#internet {
	float: left;
	display: inline;
	width: 390px;
}
#internet li a {    
	width: 30px;
	height: 41px;
	margin: 0 10px 0 0;
	float: left;
	display: inline;
}
#internet #iconLinkedIn a {background: url(../img/icon_linked_in.png) top left no-repeat;}
#internet #iconTwitter a {background: url(../img/icon_twitter.png) top left no-repeat;}
#internet #iconFacebook a {background: url(../img/icon_facebook.png) top left no-repeat;}
#internet #iconYelp a {background: url(../img/icon_yelp.png) top left no-repeat;}
#internet #iconGiantBomb a {background: url(../img/icon_giant_bomb.png) top left no-repeat;}
/*---------------------*/
/* Contact ------------*/
/*---------------------*/
#contact {
	width: 470px;
	float: right;
	display: inline;       
}
#contact #iconPhone {
	background: url(../img/icon_phone.png) top left no-repeat;
	float: left;
	display: inline;
	font-size: 15px;
	font-weight: bold;
	color: #007ac4;
	text-shadow: 0 1px 0 #fff;	
	line-height: 20px;
	height: 25px;
	padding: 16px 0 0 40px;	                                  
	margin: 0 20px 0 0;
}   
#contact #iconEmail {
	float: left;
	display: inline;
}
#contact #iconEmail a {
	background: url(../img/icon_email.png) top left no-repeat;
	display: block;
	color: #007ac4;	
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	color: #007ac4;
	text-shadow: 0 1px 0 #fff;	
	line-height: 20px;
	height: 25px;
	padding: 16px 0 0 40px;
}
#contact #iconEmail a:hover {color: #45ad2b;}
/*---------------------*/
/* Portfolio Tabs -----*/
/*---------------------*/
#tabs {
	width: 920px;
	overflow: hidden;
	background: url(../img/bg_portfolio_top.png) bottom left no-repeat;
}
#tabs li {
	float: left;
	display: inline;
}
#tabs a {
	background-repeat: no-repeat;
	background-position: center left;
	float: left;
	display: inline;
	height: 45px;
	margin: 0 2px 0 0;
}
#tabs #tabWeb {
	background-image: url(../img/tab_web.png);
	width: 91px;
}
#tabs #tabIcons {
	background-image: url(../img/tab_icons.png);
	width: 104px;
}
#tabs #tabLogos {
	background-image: url(../img/tab_logos.png);
	width: 109px;
}
#tabs #tabPrint {
	background-image: url(../img/tab_print.png);
	width: 101px;
}
#tabs .active a,
#tabs a:active {background-position: top left !important;}
#tabs a:hover {background-position: bottom left;}
/*---------------------*/
/* Portfolio ----------*/
/*---------------------*/
#portfolio {
	width: 914px;
	position: relative;
	background: #f2f2f2;
	border-left: 1px solid #c4c4c4;
	border-right: 1px solid #c4c4c4;
	padding: 20px 0 0 4px;
	overflow: hidden;
}
#portfolio img {
	display: block;
	clear: both;
	width: 910px;                   
}
#portfolio .web img,
#portfolio .print img {
	height: 611px;
}                    
#portfolio .logos img {
	height: 251px;
}                
#portfolio .icons img {
	height: 331px;
}
.portfolioBtm {
	background: url(../img/bg_portfolio_btm.png) top left no-repeat;
	height: 5px;
	font-size: 0;
	line-height: 0;
}
#portfolio .info {   
	width: 910px;
	overflow: hidden;
}
/*---------------------*/
/* Summary ------------*/
/*---------------------*/
#portfolio .summary {
	float: left;
	display: inline;
	width: 470px;
	height: 70px;   
	margin: 0 20px 20px 25px;
}                         
#portfolio .summary h2 {
	font-size: 18px;
	color: #333;
	text-shadow: 0 1px 0 #fff;
	margin: 0 0 5px 0;
}                    
#portfolio .summary p {
	line-height: 20px;
}
/*---------------------*/
/* Services -----------*/
/*---------------------*/
#portfolio .services {
	float: left;
	display: inline;
	width: 200px;
	margin: 0 0 27px 0;
}                     
#portfolio .services h4 {
	color: #333;
	font-size: 12px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #fff;
	margin: 0 0 10px 0;
}           
#portfolio .services li {
	width: 95px;
	float: left;
	display: inline;
	font-size: 10px;
	color: #fff;	                      
	line-height: 14px;
	margin: 0 0 4px 0;
}                      
#portfolio .services li em {
	background: url(../img/bg_tag_left.png) top left no-repeat;	
	font-style: normal;
	padding: 1px 4px 3px 5px;
}
#portfolio .services li strong {
	background: url(../img/bg_tag_right.png) top right no-repeat;
	font-weight: normal;
	padding: 1px 7px 3px 0;
}
/*---------------------*/
/* Pagination ---------*/
/*---------------------*/
#portfolio .pagination {
	background: transparent;
	position: absolute;
	z-index: 100;
	width: 150px;   
	right: 30px;
	overflow: hidden;
}
.pagination #btnPrev,
.pagination #btnNext {
	background: url(../img/btn_prev.png) top left no-repeat;
	width: 36px;
	height: 42px;
	float: left;
	display: inline;
	outline: none;
}
.pagination #btnNext {
	background: url(../img/btn_next.png) top left no-repeat;
	float: right;
}
.paginationNum p {
	background: url(../img/bg_paginate.png) top left repeat-x;
	float: left;
	display: inline;
	width: 78px;
	height: 30px;
	line-height: 18px;
	text-shadow: 0 1px 0 #fff;
	color: #535353;
	font-weight: bold; 
	font-size: 14px; 
	text-align: center;
	padding: 12px 0 0 0;
	margin: 0 0 0 55px;
}
.paginationNum em {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-weight: normal;
}