/***********************/
/* Spunk Marketing CSS */
/***********************/
/**************************************************** SITE STYLING ****************************************************/
html, body { height:100%; margin:0; padding:0; }
html { background:url('/images/html_bg.jpg') repeat-x; }
body { color:#30546c; font:normal 12px Arial; }
a { color:#30546c; text-decoration:none; }
a:hover { color:#83a3b8; }
form { margin:0; padding:0; }
img { border:none; }
h1 { font-size:16px; margin:0 0 15px 0; padding:0; }
h2 { font-size:14px; margin:0; padding:0; }
hr { margin:0; padding:0; }
p { margin:0 0 15px 0; padding:0; text-align:justify; }
textarea { border:1px solid #dddddd; }

#container { margin:0 auto; width:900px; }
#header { float:left; width:100%; }
#header img { float:left; }
#header .nav { float:left; overflow:hidden; width:101%; }
#header .nav a { float:left; /*opacity:.0; filter:alpha(opacity=0); -moz-opacity:0.0;*/ }
#header .nav a:hover,#header .nav .selected { opacity:1.0; filter:alpha(opacity=100); -moz-opacity:1.0; }
#content { background:white; float:left; padding:30px; width:840px; }
#content #main { float:left; width:62%; }
#content #sidebar { float:right; text-align:center; width:296px; }
#footer { float:left; text-align:center; width:100%; }
#footer a { line-height:20px; margin:10px; }
#footer img { float:left; margin-bottom:8px; }

/* contact form */
#contact_form { background:url('/images/contact_form_bg.jpg'); height:275px; padding:20px 0 0 20px; text-align:left; width:276px; }
#contact_form div { height:30px; text-align:right; width:250px; }
#contact_form div * { vertical-align:middle; }
#contact_form span { float:left; height:30px; line-height:25px; }
#contact_form div input { border:1px solid #dddddd; width:190px; }
#contact_form span.center { display:block; text-align:center; padding-top:8px; width:90%; }
#contact_form span.center input { margin-bottom:10px; }
#contact_form textarea { height:60px; width:250px; }

/* quick nav */
#quick_nav { background:url('/images/contact_form_bg.jpg'); height:275px; padding:20px 0 0 20px; text-align:left; width:276px; }

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

.fifty { width:49%; }
.hundred { width:100%; }

.rollover { float:left; opacity:.0; filter:alpha(opacity=0); -moz-opacity:0.0; }
.rollover:hover { opacity:1.0; filter:alpha(opacity=100); -moz-opacity:1.0; }

/***************************************************** HOME PAGE ******************************************************/
#main.home h2 img { margin-right:5px; }
#home_nav { float:left; margin-bottom:8px; width:100%; }
#home_nav div { float:left; height:130px; margin-right:8px; width:160px; }
.fd_butt { background:url('/images/fd_butt.jpg'); }
.portfolio_butt { background:url('/images/portfolio_butt.jpg'); }
.services_butt { background:url('/images/services_butt.jpg'); }
.testimonials_butt { background:url('/images/testimonials_butt.jpg'); }
.contact_butt { background:url('/images/contact_butt.jpg'); }
.spunk_news_butt { background:url('/images/spunk_news_butt.jpg'); height:71px; width:296px; }
.facebook_butt { background:url('/images/facebook_butt_white.jpg'); height:71px; width:296px; }
.myspace_butt { background:url('/images/myspace_butt.jpg'); height:71px; width:296px; }
.blu_zeus_butt { background:url('/images/blu_zeus_butt.jpg'); height:71px; width:296px; }

/***************************************************** SERVICES *******************************************************/
#services { float:left; width:100%; }
#services img { margin-bottom:8px; }
#services .column1 { float:left; width:48%; }
#services .column2 { float:right; width:48%; }
#service_details { float:left; text-align:right; width:100%; }
#service_details span { clear:left; float:left; }
#service_details span i { font-size:11px; }

/**************************************************** PORTFOLIO *******************************************************/
.portfolio_piece { background:url('/images/portfolio_piece.jpg'); float:left; height:125px; width:125px; }
.portfolio_piece img { margin:12px 0 0 12px; }

/*************************************************** TESTIMONIALS *****************************************************/
.testimonial { border-top:1px solid #dddddd; float:left; padding:10px 0 10px 0; width:100%; }
.testimonial img { float:left; }
.testimonial .info { float:right; width:68%; }

/**************************************************** SPUNK NEWS ******************************************************/
.news { border-top:1px solid #dddddd; float:left; padding:10px 0 10px 0; width:100%; }
.news img { float:left; }
.news .info { float:right; width:68%; }