/*
Theme Name: Union Digital Media
Description: Wordpress theme for Union Digital Media
Version: 1.0
Author: Union Digital Media
Author URI: http://www.uniondigitalmedia.com/

Last Update: 07/16/09
*/

html, body {
	margin: 0;
	font: 13px/20px helvetica;
	color: #FFFFFF;
	}

#home html, #home body, #portfolioPage html, #portfolioPage body {
	background: #24b6e2 url('images/body_bkg.jpg') no-repeat top center;
	}

#wrap {
	width: 1062px;
	margin: 0 auto;
	position: relative;
	}

#showcase {
	background: url('images/showcase_bkg.png') no-repeat 0 0;
	width: 693px; height: 493px;
	float: right; margin: 65px 27px 0 0;
	display: block;
	}

#project {
	background: url('images/blank.gif') no-repeat 0 0;
	width: 673px; height: 473px;
	position: relative;
	}

#projectInfo {
	position: absolute;
	bottom: 0;
	width: 100%; height: 52px;
	background: url('images/black_bkg.png') 0 0;
	}

.projectTitle {
	width: 354px; float: left; padding:16px 0 0 16px; }

#bottom {
	height: 237px;
	background: url('images/bottom_bkg.png') no-repeat 0 0;
	padding: 18px 0 0 30px;
	color: #333333;
	font-size: 12px;
	}

#boxWrap {
	height: 188px;
	width: 1008px;
	position: relative;
	} 

#postWrap { width: 680px; margin: 0 auto; }

.socBox {
	position: absolute;
	bottom: 8px; left: 8px;
	}

.goinggreen, .digmarketing, .contactinfo, .payonline { 
	float: left; width: 230px; padding: 18px 10px 0 11px; }

.goinggreen { }
.digmarketing { }
.contactinfo { font: 11px/20px helvetica; }
.payonline { }

.contactinfo a { color: #333333; text-decoration: none; }

.goinggreen p, .digmarketing p, .contactinfo p, .payonline p { 
	margin:0 0 12px; }

.goinggreen p { margin-left: 10px; }

.goinggreen h2, .digmarketing h2, .contactinfo h2, .payonline h2, .clientftp { 
		margin: 0; padding: 0; height: 30px; display: block; }

.goinggreen h2 { background: url('images/h2_green.png') no-repeat 0 0; margin-left: 62px; }
h2.clientftp { background: url('images/h2_clientftp.png') no-repeat 0 0; margin: 8px 0 0; width: 75px; height:20px; }
.digmarketing h2 { background: url('images/h2_digmarketing.png') no-repeat 0 0; }
.contactinfo h2 { background: url('images/h2_contact.png') no-repeat 0 0; }
.payonline h2 { background: url('images/h2_payonline.png') no-repeat 0 0; }

.goinggreen span, .digmarketing span, .payonline span { 
	margin: 0; padding: 0; height: 20px; display: block; }

.ftptxt { background: url('images/span_ftptxt.png') no-repeat left 50%; float: left; width: 120px; height: 28px }
.goinggreen span { background: url('images/span_green.png') no-repeat 0 0; margin-left: 40px; }
.digmarketing span { background: url('images/span_digmarketing.png') no-repeat 0 0; }
.contactinfo span { background: url('images/span_contact.png') no-repeat 0 0; }
.payonline span { background: url('images/span_payonline.png') no-repeat 0 0; }

.hrfpt { background: url('images/hr_ftpbottom.jpg') no-repeat 0 0; height: 2px; width: 240px; margin-top: 2px; }


a { outline: none; }
.clear { clear: both; }
.noTxt { text-indent: -9999px; font-size: 0; line-height: 0; }
.blue, .blue a { color: #0ca3d0; text-decoration: none; }
.green { color: #72a43c; }



/************** BUTTON STYLES */

a.previewBtn { 
	background: url('images/btn_preview.png') no-repeat 0 0;
	width: 135px;
	}

a.portfolioBtn { 
	background: url('images/btn_portfolio.png') no-repeat 0 0;
	width: 166px;
	}

a.previewBtn, a.portfolioBtn { height: 40px; display: block; float: left; margin-top:6px; } 
a:hover.previewBtn, a:hover.portfolioBtn { background-position: bottom; } 

a.learnSBtn { 
	background: url('images/btn_learnmoreSmall.png') no-repeat 0 0;
	width: 109px; float: right !important;
	}
	
a.browseSBtn { 
	background: url('images/btn_browseFiles.png') no-repeat 0 0;
	width: 109px; float: right !important;
	}

a.portfolioSBtn { 
	background: url('images/btn_portfolioSmall.png') no-repeat 0 0;
	width: 112px;
	}

a.emailSBtn { 
	background: url('images/btn_emailSmall.png') no-repeat 0 0;
	width: 111px;
	}

a.quoteSBtn { 
	background: url('images/btn_quoteSmall.png') no-repeat 0 0;
	width: 110px; margin-left: 8px;
	}

a.learnSBtn, a.portfolioSBtn, a.emailSBtn, a.quoteSBtn, a.browseSBtn {
	height: 26px; display: block; float: left; } 
	
a:hover.learnSBtn, a:hover.portfolioSBtn, a:hover.emailSBtn, a:hover.quoteSBtn, a:hover.browseSBtn {

	background-position: bottom; } 
	
/************** PAYPAL STYLES */

#payPalForm input { border: none; outline: none; float: left; }

#item_name { 
	background: url('images/ppdescription_bkg.jpg') no-repeat 0 0;
	width: 224px; height: 20px;
	padding: 4px 0 0 6px;
	margin-bottom: 9px;
	display: block; 
	}

#amount { 
	background: url('images/ppamount_bkg.jpg') no-repeat 0 0; 
	width: 80px; height: 18px;
	padding: 6px 0 0 20px;
	display: block; 
	}	

#payPalSubmit { 
	background: url('images/btn_sendSmall.png') no-repeat 0 0; 
	width: 123px; height: 26px;
	display: block; float: left;
	margin: -1px 0 0 7px;
	cursor: pointer;
	}

#payPalSubmit:hover { background-position: bottom; }


/************** SOCIAL MEDIA STYLES */

a.twitter {
	background: url('images/soc_twitter.jpg') no-repeat 0 0;
	width: 21px;
	}

a.facebook {
	background: url('images/soc_facebook.jpg') no-repeat 0 0;
	width: 21px;
	}

a.rss {
	background: url('images/soc_rss.jpg') no-repeat 0 0;
	width: 21px;
	}
	
a.twitter, a.facebook, a.rss { height: 21px; display: block; float: left; margin-right: 2px; } 
a:hover.twitter, a:hover.facebook, a:hover.rss { background-position: bottom; } 	

#default html, #default body { color: #333333; margin: 0; }

/************** CONTACT TEMPLATE */
#contactPage html, #contactPage body, #getQuotePage html, #getQuotePage body { 
	background-image: none;
	margin: 0; color: #000000;  
	}
	
#contactSec { width: 415px; height: 530px; display: block; background: #FFFFFF url('images/form_bkg.jpg') no-repeat bottom left; }
#contactForm input { 
	background: #FFFFFF; 
	border: 1px solid #CCCCCC; 
	padding: 4px;
	color: #333333;
	width: 250px;
	}
	
#contactForm select { 
	background: #FFFFFF; 
	border: 1px solid #CCCCCC; 
	padding: 4px;
	color: #333333;
	width: 260px;
	}	
	
#long { width:374px !important; }
	
#contactForm textarea { 
	background: #FFFFFF; 
	border: 1px solid #CCCCCC; 
	padding: 4px;
	color: #333333;
	font: 12px/16px helvetica;
	width: 98%;
	}		

#contactForm .right { text-align: right; width:120px; }

#contactForm #submitBTN { 
	background: url('images/btn_sendSmall.png') no-repeat 0 0; 
	width: 123px; height: 26px;
	display: block;
	margin: 0; padding: 0;
	cursor: pointer; border: none;
	float: right;
	}

#contactForm #submitBTN:hover { background-position: bottom; }	

#contactForm { padding-top: 90px; }	
#contactPage #contactForm { background: url('images/contact_bkg.jpg') no-repeat 0 0; }	
#getQuotePage #contactForm { background: url('images/quote_bkg.jpg') no-repeat 0 0; }	
	
	
/************** PORTFOLIO TEMPLATE */
#portfolioPage html, #portfolioPage body { color: #333333; }

#portfolioWrap { width: 650px; }	
#portfolioPage h3 { color: #333333; text-transform: lowercase; margin-left: 10px; }
#portfolioPage #project { overflow: auto; margin: 10px; background: #f1f1f1 url('images/projectWrap_bkg.jpg') repeat-x bottom left; }

.portBox { width: 150px; min-height: 130px; float: left; margin: 6px; font: 12px/16px helvetica; position: relative; }
.portBox strong { color: #0d84a7; }	
#thumb { width: 150px; height: 50px; display: block; border: 3px solid #e0e0e0; margin-bottom:4px; }	
	
div.hr { background: url('images/hr_bkg.jpg') repeat-x 0 0; height: 2px; clear: both; margin:20px 8px; }
div.hr hr { display: none; }


a.smPreview {
	background: url('images/sm_preview_btn.png') no-repeat 0 0;
	width: 65px;
	left: 0;
	}
	
a.smDetails {
	background: url('images/sm_details_btn.png') no-repeat 0 0;
	width: 66px;
	left: 70px;
	}	
	
a.smPreview, a.smDetails { height: 19px; display: block; float: left; position: absolute; bottom: 0; } 
a:hover.smPreview, a:hover.smDetails { background-position: bottom; } 
	
/************** PORTFOLIO TEMPLATE */	
#content { background: white; color: #333333; padding: 20px; width: 960px; margin: 0 auto 20px auto; }
#content a { color: #333333; }
	
	
/* Featured Post Carousel */  
/* FEATURED CONTENT SLIDER STYLES */
.stepcarousel {
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 673px; /*Width of Carousel Viewer itself*/
height: 473px; /*Height should enough to fit largest content's height*/
margin: 10px;
}

.stepcarousel .belt {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 673px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


#watchourvid {
width: 250px;
height: 220px;
position: absolute;
bottom: 196px;
left: 52px;
}

a#gohome {
width: 150px;
height: 210px;
display: block;
position: absolute;
bottom: 450px;
left: 110px;
}

#topNav {
background: url('images/topnav_bkg.jpg') no-repeat 0 0;
height: 28px; width: 874px;
display: block; position: absolute;
top: 20px; right: -58px;
}