@import url("reset.css");
@import url("typography.css");

/*
--------------------------------------------------------------------------------------------------------------------------
= ACKNOWLEDGEMENT
--------------------------------------------------------------------------------------------------------------------------
*/

/*
Author:		Christopher Taylor, Stephen Dupree, Tim Parmee
Date:		Copyright December 2008
*/

/*
--------------------------------------------------------------------------------------------------------------------------
= BASE ELEMENTS
--------------------------------------------------------------------------------------------------------------------------
*/

/* Colors
Vibrants: 	#47B0DD #e11e73 #48b0dd #fcf8f4
Greys: 		#333333 #c8c8c8 #e9e9e9
*/

html { background : url('../images/background_repeat2.png') repeat-x; }	
body { background : #fcf8f4 url('../images/bg.png') no-repeat center top; margin:0px auto; }
body#social { background : #fcf8f4 url('../images/bg_reduced.png') no-repeat center top; }

/*
--------------------------------------------------------------------------------------------------------------------------
= MAIN LAYOUT ELEMENTS
--------------------------------------------------------------------------------------------------------------------------
*/

h1#logo 			{ text-indent:-9999px; }

div#wrapper 		{ width:800px; margin:0 auto; }
.container 			{ width:800px; margin:0 auto; clear: both; }
.containerContent	{ width:800px; margin:0 auto; clear: both; background: #FFFFFF url(../images/bg_content.png) top left no-repeat; padding-bottom: 30px; }
body#social .containerContent { background: #FFFFFF url(../images/bg_contentSocial.png) top left no-repeat; }

div#mast 			{ width:800px; height:205px; /* background : url('../images/mast/mast3.jpg') no-repeat; */ }
div#mastReduced 	{ width:800px; height:60px; /* background : url('../images/mast/mast3.jpg') no-repeat; */ }
div#primary_nav 	{ width:800px; height:51px; }

/* page columns */
div#column1 		{ width:530px; float: left; display:inline; overflow:hidden; }
div#column2			{ width:270px; float: right; display:inline; overflow:hidden; padding:7px 0 120px 0; background:#c8c8c8 url(../images/sidebar_btm.png) bottom left no-repeat; }
div#columnFull 		{ width:800px; float:left; display:inline; clear:both; padding:0; margin:0; }

/* block + grid elements */
.col1Block { padding:20px 30px 0px 30px; } /* Column 1 content = 470px width */
.col2Block { padding:0px 18px 0px 18px; } /* Column 2 content = 234px width */
.col3Block { padding:30px 30px 30px 30px; } /* full width content = 740px width */
.col4Block { padding:30px 15px 0px 15px; } /* Social Marketing Slider - full width content = 740px width */

.subCol1, .subCol2 { float: left; display: inline; width: 225px; }
.subCol1 { margin-right: 20px; }
.subCol2 { }

.block_container { position:relative; border:1px solid #dbdbdb; margin-bottom:1.5em; }
.block_inside { display:block; border:1px solid #ffffff; background: #ffffff url(../images/background_block_slice.jpg) repeat-x; padding:1.5em; overflow:auto; }
.box { padding: 1.5em; margin-bottom: 1.5em; background:#f5f5f5; border:1px solid #dbdbdb; }


/*
--------------------------------------------------------------------------------------------------------------------------
= CLEAR FLOATED ELEMENTS
--------------------------------------------------------------------------------------------------------------------------
*/

/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0;}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*
--------------------------------------------------------------------------------------------------------------------------
= COLUMN 1 (Main Content) ELEMENTS
--------------------------------------------------------------------------------------------------------------------------
*/

#flashMediaPlayer { margin:0 0 1.5em 0; }

/*
--------------------------------------------------------------------------------------------------------------------------
= COLUMN 1 (Main Content) HOME PAGE
--------------------------------------------------------------------------------------------------------------------------
*/

/* Home page */
div#intro { height:251px; width:530px; float:left; display:block; margin:0; background:url(../images/bg_intro.png); }
div#introBlock { width: 310px; margin: 30px 0 0 30px; }
.col1BlockCampaigns	{ background:url(../images/bg_mainCol.png) top no-repeat; padding:20px 30px 0px 30px; }
.col1BlockHot	 	{ background:url(../images/bg_mainColHot.png) top no-repeat; padding:20px 30px 0px 30px; }

/* Hot Topic Carousel */
.HotCarousel				{ position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 470px; /*Width of Carousel Viewer itself*/ height: 140px;  }
.HotCarousel .belt			{ position: absolute; /*leave this value alone*/ left: 0; top: 0; }
.HotCarousel .panel			{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/  width: 470px; }
.HotCarousel div img.left 	{ float: left; margin: 0 1.5em 0 0; } /* Image within a text block */


/*
--------------------------------------------------------------------------------------------------------------------------
= COLUMN 2 (Sidebar) ELEMENTS
--------------------------------------------------------------------------------------------------------------------------
*/

/* Column 2 Sidebar Menu  */
.sidemenu ul {  border-top: 2px solid #ebebeb; margin:0; font-size:1em; }
.sidemenu ul li { list-style: none; background: url(../images/dots.gif) repeat-x left bottom; padding: 7px 5px; margin: 0;	}
* html body .sidemenu ul li { height: 1%; }
.sidemenu ul li a, .sidemenu ul li a:visited { background-image: none; background-color: transparent; border: none; color:#47B0DD; padding-left: 0; text-decoration:none; font-size: 1.1em; }
.sidemenu ul li a span { color: #9F9F9F; font-style: normal; }
.sidemenu ul li a:hover { color: #000;	}

.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { background: none; }

/* Column 2 sidebar list block */
.sideListBlock { width: 234px; background: url(../images/lists/list_sidebarBtm.png) no-repeat bottom left; list-style: none; }
.sideListBlock ul {  margin: 0; padding: 0px 20px 14px 20px; list-style-type: none; list-style-image: none; }
.sideListBlock ul li { margin: 0 0 4px; padding: 0; }
.sideListBlock img { border:solid thin #CCCCCC; margin:0 0 0.5em 0;padding: 0; }

.sideListBlock h3.listValues { width: 234px; height: 69px; background:url(../images/lists/h3_list_values.png) no-repeat;  text-indent: -9999px; margin: 0; }
.sideListBlock h3.listClients { width: 234px; height: 69px; background:url(../images/lists/h3_list_clients.png) no-repeat;  text-indent: -9999px; margin: 0; }
.sideListBlock h3.listHotTopic { width: 234px; height: 69px; background:url(../images/lists/h3_list_hotTopic.png) no-repeat;  text-indent: -9999px; margin: 0; }
.sideListBlock h3.listDivalicious { width: 234px; height: 69px; background:url(../images/lists/h3_list_divalicious.png) no-repeat;  text-indent: -9999px; margin: 0; }
.sideListBlock h3.listMap { width: 234px; height: 69px; background:url(../images/lists/h3_list_map.png) no-repeat;  text-indent: -9999px; margin: 0; }

/* home page hot topic list */
#listHotImage { margin:0px auto; width:192px; height:88px; overflow:hidden; margin-bottom:1em; }
ul#listHot li { margin-bottom:0.5em; padding-bottom:0.5em; }
ul#listHot li a, ul#listHot li a:link, ul#listHot li a:visited { color:#79b22d; }
ul#listHot li a:hover { color:#000000; }
ul#listHot li { list-style: none; background: url(../images/dots.gif) repeat-x left bottom; padding: 7px 5px; margin: 0;	}
* html body ul#listHot li { height: 1%; }

/*
--------------------------------------------------------------------------------------------------------------------------
= MAST / HEADER IMAGES
--------------------------------------------------------------------------------------------------------------------------
*/

body#home #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#awards #mast { background:url('../images/mast/mast_toy_car.jpg') no-repeat; }
body#aboutdiva #mast { background:url('../images/mast/mast_toy_car.jpg') no-repeat; }
body#campaigns #mast { background : url('../images/mast/mast_shell.jpg') no-repeat; }
body#consultancy #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#contact #mast { background : url('../images/mast/mast_shoes.jpg') no-repeat; }
body#design #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#divanews #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#divavalues #mast { background : url('../images/mast/mast_bee.jpg') no-repeat; }
body#divaliciousArchive #mast { background:url(../images/mast/mast_divalicious.jpg); }
body#eventMgmt #mast { background : url('../images/mast/mast_windmill.jpg') no-repeat; }
body#hotNews #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#ourClients #mast { background : url('../images/mast/mast_shoes.jpg') no-repeat; }
body#mailList #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#photography #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#portfolio #mast { background : url('../images/mast/mast_spectrum.jpg') no-repeat; }
body#pr #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#quoteForm #mast { background : url('../images/mast/mast_seed.jpg') no-repeat; }
body#services #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#sitemap #mast { background:url('../images/mast/mast_home.png') no-repeat; }
body#social #mastReduced { background : url('../images/mast/mast_socialMarketing.png') no-repeat; }
body#testimonials #mast { background : url('../images/mast/mast_shell.jpg') no-repeat; }

/*
--------------------------------------------------------------------------------------------------------------------------
= NAVIGATION
--------------------------------------------------------------------------------------------------------------------------
*/

/* =main navigation */
div#primary_nav ul 		{ position:relative; left:70px; float:left; height:28px; margin: 12px 0px 5px 0px; padding:0; } /* margin: 12px 30px 5px 0px; */
div#primary_nav li 		{ float:left; display: inline; height:28px; color:#FFFFFF; margin:0px 5px 0px 0px; padding:0px; text-indent:-99999px; }
div#primary_nav li a 	{ display: block; height: 100%; overflow: hidden; width: 100%; }

#nav_home 		{ width:46px; }
#nav_portfolio 	{ width:70px; }
#nav_services 	{ width:65px; }
#nav_divaNews 	{ width:70px; }
#nav_contact 	{ width:62px; }
#nav_sitemap 	{ width:60px; }
#nav_campaigns 	{ width:74px; }
#nav_social 	{ width:113px; }

#nav_home a, #nav_portfolio a, #nav_services a, #nav_divaNews a, #nav_contact a, #nav_sitemap a, #nav_campaigns a, #nav_social a { background:url(../images/primaryNav_btns.png); }

#nav_home a 			{ background-position: 0px 28px; }
#nav_home a:hover 		{ background-position: 0px 0px; }

#nav_portfolio a 		{ background-position: -50px 28px; }
#nav_portfolio a:hover 	{ background-position: -50px 0px; }

#nav_services a 		{ background-position: -123px 28px; }
#nav_services a:hover 	{ background-position: -123px 0px; }

#nav_divaNews a 		{ background-position: -256px 28px; }
#nav_divaNews a:hover 	{ background-position: -256px 0px; }

#nav_contact a 			{ background-position: -331px 28px; }
#nav_contact a:hover 	{ background-position: -331px 0px; }

#nav_sitemap a 			{ background-position: -397px 28px; }
#nav_sitemap a:hover 	{ background-position: -397px 0px; }

#nav_campaigns a 		{ background-position: -459px 28px; }
#nav_campaigns a:hover 	{ background-position: -459px 0px; }

#nav_social a 			{ background-position: -534px 28px; }
#nav_social a:hover 	{ background-position: -534px 0px; }

/*
--------------------------------------------------------------------------------------------------------------------------
= IMAGES
--------------------------------------------------------------------------------------------------------------------------
*/

img { border:solid thin #CCCCCC; padding: 3px; }
.imgBorderNone 			{ border:none; }


/* Portfolio Layout */
div#web, div#print, div#print, div#photo { position:relative; width:100%; } /* Containers */
div#case_print, div#case_web, div#case_photo, div#case_film { float:right; width:320px; height:100px; } /* case studies floated right */

#portfolio_left { width:100%; float: left; z-index: 6; position:relative; padding-left:10px; }
#portfolio_right { width : 220px; float: left; z-index: 6; position:relative; left: 10px; background-color:#FFFFFF; }

div.thumbnails { width:460px; border:solid 0px #000000; margin-left: 15px; } /* thumbs Containers */

/* Standard Thumbnails  */
p.thumbsMain 			{ padding: 5px 0 0 5px; }
.thumbsMain img 		{ position: relative; padding: 8px; margin: 5px; background: #fafafa; border: 1px solid #ddd; }
.thumbsMain img:hover	{ border: 1px solid #D2D2D2; background: #DDD;	}
.thumbsMain a:hover 	{ background-color: transparent; border: none }


/* Portfolio Thumbnails  */
p.thumbsMain 			{ padding: 0 0 0 0; }
.thumbsMain img 		{ position: relative; padding: 6px; margin:1px; background: #fafafa; border: 1px solid #ddd; }
.thumbsMain img:hover	{ border: 1px solid #D2D2D2; background: #DDD;	}
.thumbsMain a:hover 	{ background-color: transparent; border: none }

/*
--------------------------------------------------------------------------------------------------------------------------
= MISC
--------------------------------------------------------------------------------------------------------------------------
*/

/* Spacing */
.prefix { margin-top: 1.5em;}
.suffix { margin-bottom: 1.5em;}
.lastElement { margin-bottom:0px; }

/* postmeta */
.postmeta {	padding: 5px; 	border: 1px solid #EBEBEB; background: #f8f8f8;	}
.postmeta a { background: transparent; }
.postmeta a:hover { border: none; }
.postmeta a.comments { margin: 0 10px 0 5px; }
.postmeta a.readmore { margin: 0 10px 0 5px; }
.postmeta .date{ margin: 0 10px 0 5px;	}

/* Use this to create a horizontal ruler across a column. */
hr { background: url(../images/dots.gif) repeat-x left bottom; color: #000; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; }
hr.space { background: #fff; color: #fff; }

/* Form elements */
input, textarea, select { color: #303030; font: 11px Arial, Helvetica, sans-serif; }

/*
--------------------------------------------------------------------------------------------------------------------------
= FOOTER
--------------------------------------------------------------------------------------------------------------------------
*/

div#wrapperFooter { background:url(../images/bg_footer.png) center top no-repeat;  }
div#footer { width: 800px; height:271px; }

div#contactDetails { float: left; padding: 33px 0 0 30px; }
div#standardLinks { float: right; padding: 33px 30px 0 0; }
div#contactDetails h4 { margin: 0 0 0.5em 0; width: 82px; height: 26px; background: url(../images/logo_footer.png) no-repeat; text-indent: -9999px; }
div#contactDetails p { color: #d09990; font-weight: bold; }
.footerBold { color: #fff; font-weight: bold; font-size: 1.2em; }

/*
--------------------------------------------------------------------------------------------------------------------------
= SOCIAL MARKETING PAGE + SLIDER
--------------------------------------------------------------------------------------------------------------------------
*/

#slider { width: 710px; margin: 0 auto; position: relative; }

.scroll {
    height: 428px;
    width: 710px;
    overflow: auto;
    /*overflow-x: hidden;*/
    position: relative;
    clear: left;
    /*background:  #FFFFFF  url(../images/socialMarketing/content_pane-gradient.gif) repeat-x scroll left bottom; */
}

.scrollContainer div.panel { padding: 20px; height: 388px; width: 670px; }

.scroll h3 { color:#7b3560; }
.sliderCol  { width:240px; }
.sliderCol2 { width:450px; }
.scrollContainer ul { font-size:1.1em; }

#shade { background: #EDEDEC url(../images/socialMarketing/shade.png) no-repeat 0 0; height: 65px; }

ul.navigation { list-style: none; margin: 0; padding: 0; padding-bottom: 9px; }
ul.navigation li { display: inline; margin-right: 10px; }
ul.navigation a { padding: 10px; color: #000; text-decoration: none; }
ul.navigation a:hover { background-color: #f6f6f6; }
ul.navigation a.selected { background-color: #fff; }
ul.navigation a:focus { outline: none; }

.scrollButtons { position: absolute; top: 110px; cursor: pointer; }
.scrollButtons.left { left: -30px; }
.scrollButtons.right { right: -29px; }
#slider img  { border:none; }
.hide { display: none; }

.scrollContainer div#panel1 { background:url(../images/socialMarketing/bg_panel1.png) top left no-repeat; }
.scrollContainer div#panel3 { background:url(../images/socialMarketing/bg_panel3.png) top left no-repeat; }
.scrollContainer div#panel4 { background:url(../images/socialMarketing/bg_panel4.png) top left no-repeat; }
.scrollContainer div#panel5 { background:url(../images/socialMarketing/bg_panel5.png) top left no-repeat; }
.scrollContainer div#panel8 { background:url(../images/socialMarketing/bg_panel8.png) top left no-repeat; }
.scrollContainer div#panel9 { background:url(../images/socialMarketing/bg_panel9.png) top left no-repeat; }
.scrollContainer div#panel10 { background:url(../images/socialMarketing/bg_panel10.png) top left no-repeat; }
.scrollContainer div#panel2, .scrollContainer div#panel6, .scrollContainer div#panel7  
{ background: url(../images/socialMarketing/bg_normal.png) top left no-repeat; }

/*Social marketing page column adjusts */
body#social div#column2 { background:none; padding:0px; }	
body#social div.col1Block { padding-top:0; }	
body#social div.col1Block { padding-top:0; }
body#social h3.theories { margin-left:15px; }

/*
--------------------------------------------------------------------------------------------------------------------------
= BUTTONS
--------------------------------------------------------------------------------------------------------------------------
*/

div#btn_eventmgmt { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_eventmgmt a { display: block; background:url(../images/btns/btns_eventmgmt.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewPortfolio { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewPortfolio a { display: block; background:url(../images/btns/btns_viewportfolio.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewDivalicious { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewDivalicious a { display: block; background:url(../images/btns/btns_divalicious.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewHot { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewHot a { display: block; background:url(../images/btns/btns_hot.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewValues { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewValues a { display: block; background:url(../images/btns/btns_values.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewJobs { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewJobs a { display: block; background:url(../images/btns/btns_jobs.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewJobs2 { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewJobs2 a { display: block; background:url(../images/btns/btns_jobsLarge.png) no-repeat; width: 234px; height: 120px; }

div#btn_divafresh { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_divafresh a { display: block; background:url(../images/btns/btns_divafresh.png) no-repeat; width: 234px; height: 120px; }

div#btn_viewAwards { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewAwards a { display: block; background:url(../images/btns/btns_awards.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewLinks { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewLinks a { display: block; background:url(../images/btns/btns_links.png) no-repeat; width: 234px; height: 54px; }

div#btn_aboutDiva { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_aboutDiva a { display: block; background:url(../images/btns/btns_aboutdiva.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewCampaigns { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewCampaigns a { display: block; background:url(../images/btns/btns_campaigns.png) no-repeat; width: 234px; height: 120px; }

div#btn_viewSocial { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewSocial a { display: block; background:url(../images/btns/btns_socialm.png) no-repeat; width: 234px; height: 120px; }

div#btn_viewNews { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewNews a { display: block; background:url(../images/btns/btns_divaNews.png) no-repeat; width: 234px; height: 120px; }

div#btn_viewServices { width: 234px; height: 54px; text-indent: -9999px; }
div#btn_viewServices a { display: block; background:url(../images/btns/btns_services.png) no-repeat; width: 234px; height: 54px; }

div#btn_viewWAD { width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewWAD a { display: block; background:url(../images/btns/btns_wad.png) no-repeat; width: 234px; height: 120px; }

div#btn_viewAwards2 	{ width: 234px; height: 120px; text-indent: -9999px; }
div#btn_viewAwards2 a 	{ display: block; background:url(../images/btns/btns_awards2.png) no-repeat; width: 234px; height: 120px; }

/* Home page intro - About us */
div#btn_aboutUs { width: 94px; height: 25px; text-indent: -9999px; margin: 0 0 0 30px; float: left; display: inline;}
div#btn_aboutUs a { display: block; background:url(../images/btns/btns_home_aboutDiva.png) no-repeat; width: 94px; height: 25px; }

/* Home page intro - Social marketing */
div#btn_socialM { width: 129px; height: 25px; text-indent: -9999px; margin: 0 0 0 5px;float: left; display: inline; }
div#btn_socialM a { display: block; background:url(../images/btns/btns_home_socialm.png) no-repeat; width: 129px; height: 25px; }

.btn_readMore { width: 86px; height: 22px; text-indent: -9999px; }
.btn_readMore a { display: block; background:url(../images/btns/btns_readMore.png) no-repeat; width: 86px; height: 22px; }

.btn_previousHot 	{ width: 88px; height: 22px; text-indent: -9999px; float: left; }
.btn_previousHot a 	{ display: block; background:url(../images/btns/btn_previousHot.png) no-repeat; width: 88px; height: 22px; }

.btn_nextHot 	{ width: 71px; height: 22px; text-indent: -9999px; float: left; }
.btn_nextHot a 	{ display: block; background:url(../images/btns/btn_nextHot.png) no-repeat; width: 71px; height: 22px; }

div#btn_backtotop { height:25px; clear: both; text-indent: -9999px; padding: 0 0 0 4px; margin: 0; }
div#btn_backtotop a { display: block; background:url(../images/btns/btns_backtotop.png) no-repeat; width:100%; height: 25px; }

div#btn_xhtml { width: 57px; height: 13px; text-indent: -9999px; margin-bottom: 2px; }
div#btn_xhtml a { display: block; background:url(../images/btns/btns_xhtml.png) no-repeat; width: 57px; height: 13px; }

div#btn_css { width: 57px; height: 13px; text-indent: -9999px; }
div#btn_css a { display: block; background:url(../images/btns/btns_css.png) no-repeat; width: 57px; height: 13px; }

/*
--------------------------------------------------------------------------------------------------------------------------
= FORM
--------------------------------------------------------------------------------------------------------------------------
*/