/* ================================================

CSS styles for The Design Loft website

Code junkies: This code was written by The Design Loft Ltd for the thedesignloft.co.uk website by Mark Asquith.
    
All code, design and content herein is, unless expressly specified, copyright 2008 The Design Loft.
No permission is granted to anyone to use or recycle this code for their own use, either personal or corporate. It may be analysed for educational purposes.  

http://www.thedesignloft.co.uk

================================================*/

/* =============
Reset browser settings
===============*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0;} 
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
abbr,acronym { border:0; }
img {border: none;}

/*===============
Reusables
===============*/

.left {float: left;}
.right {float: right;}
.left img { border:1px solid #808080; margin: 0 10px 0 0;}
.right img { border:1px solid #808080; margin: 0 0 0 10px;}
.right .noborder {border: none;}
b, strong{font-weight: bold;}
.u {text-decoration: underline;}
.cb {clear: both;}
.reverse {direction: rtl;}
i, em {font-style: italic;}


a:link
{
    color: #52656b;
    text-decoration: none;
}

a:visited
{
    color: #52656b;
    text-decoration: none;
}

a:hover
{
	color: #181f21;
}

a:active
{
	color: #52656b;
}

.pageTitles /* PAGE TITLES */
{
    font-size: 1.4em;
    font-weight: bold;
    padding: 5px 0;
    margin: 2px 0 10px 0;
    line-height: normal; /* stops the bottom of the text being cut off in IE 6 & 7 */
}

h1
{
    margin-bottom: 5px;   
}

h3, .innerPageTitles, legend, .referralTitle /* INNER PAGE TITLES */
{
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 0;
    margin: 5px 0 5px 0;
    color: #808080;
}

h2, #content h4 /* HOME PAGE PRODUCT TITLES */
{
    font-weight: bold;
    font-size: 1.4em;
    margin: 0 0 3px 0;
    color: inherit;
}

h4 /* BLOG FOOTER ONLY */
{
    font-size: 1.6em;
    color: #8cc63e;
    letter-spacing: 0.2px; 
    margin: 0 0 10px 0;
}

h5 /* CONTACT FOOTER ONLY */
{
  font-size: 1.4em;
  font-weight: bold;  
}

h6
{
   font-weight: bold;
   color: #8cc63e;
   font-size: 1.8em;
   margin: 0 0 20px 0;
}

/*===============
Set font size to 10px
set line spacing and
sort percentages out
================*/

html {font-size: 62.5%; line-height: 1.4em; font-family: Verdana, Arial, Sans-Serif; height: 100%; width: 100%; color: White;}

body 
{
    width: 100%;
    height: 100%; /* OK FOR FOOTER? */
    background: White url("images/bodyBg.gif") repeat-x;
}

#mainContainer
{
    width: 900px;
    margin: 0 auto 0 auto;
}

#ceiling
{
    width: 100%;
    height: 20px;
    padding: 3px 0;      
}

#headerLeft
{
    width: 400px;
    float: left;
    padding: 3px 0;   
}

#headerRight
{
    width: 500px;
    float: left;
    height: 59px; /* this is controlling the banner's vertical position */
    text-align: right;
    font-weight: normal;
    color: #808080;
    line-height: 1.5em;
    letter-spacing: 0.2px;
    font-size: 1.8em;
    padding: 30px 0 55px 0;
}

#headerRight span
{
    color: #8cc63e;
    font-weight: bold;
}

#headerChat
{
    width: 100px;
    height: 37px;
    padding: 25px 0;
    float: left;
	margin-right: 5px;
}

.banner
{
    font-size: 1.1em;
    line-height: 1.5em;
    margin: 0 0 3px 0;
}

.banner span
{
    font-weight: bold;
    font-size: 1.3em;
}

#bannerLeft
{
    width: 310px;
    float: left;
    padding: 6px 0 0 0px;
    height: 274px;
    margin: 0 0 -3px 0;
}

#bannerRight
{
    float: right;
    color: White;
    width: 580px;
    height: 270px;
    text-align: right;
}

#bannerRight p
{
    margin: 30px 0;   
}

#bannerRight img
{
    border: none;
    margin: 0;
    float: right;
}

#horizNav
{
    clear: both;
    width: 100%;
    height: 19px;
    margin: 0 0 10px 0;
    padding: 6px 0;
    text-align: center;
    color:#808080;
}

#mainNavList ul
{
    list-style: none;
}

#mainNavList li
{
    display: inline;
    font-size: 1.2em;
}

#mainNavList li a
{
    padding: 0 10px 0 10px;
    text-decoration: underline; 
}

#mainNavList li a:hover
{
    text-decoration: none;
    color: #52656b;
}

.superscript
{
    color: Red;
    vertical-align:super;
    font-size: 0.4em;
    color: #850000;
    font-weight: bold;
}

.breadcrumb
{
    padding: 6px 0 5px 0;
    border-bottom: dashed 1px #dcdcdc;
    text-align: right;
    margin: 0 0 10px 0;
}

#leftNav
{
    width: 180px;
    margin: 0 0 10px 0;
    color: #808080;   
}

#leftNav img
{
    border: none;
}

#leftNav span
{
    width: 100%;
    display: block;
    padding: 0 0 5px 0;
    border-bottom: dashed 1px #808080;
    font-weight: bold;
    font-size: 1.3em;
    margin: 10px 0;
}

#leftNav ul li a, .bottomNavList a
{
    font-size: 1.1em;
    display: block;
    width: 170px;
    padding: 5px;
    background: #e5e5e5;
    margin: 0 0 2px 0;
}

#leftNav ul li a:hover,  .bottomNavList a:hover
{
    background: #8cc63e;
    color: white; 
}

#content
{
    width: 700px;
    color: #808080;
    margin: 0 0 10px 0;
    line-height: 1.6em;
    font-size: 1.1em;
}

#content a
{
    color: #f78f1e;
}

#content a:hover
{
   color: #8cc63e;
}

.note
{
    font-size: 0.8em;
}

#blogFooter
{
    clear: both;
    width: 100%;
    color: #808080;
}

#blogLeft
{
    width: 650px;
    margin: 10px 0 10px 0;
}

.blogTitle
{
    font-size: 1.2em;
    color: #808080;
    margin: 10px 0;
}

#blogLeft a
{
     
}

#blogLeft img
{
    border: none;
    margin: 5px 5px 0 0;
}

.blogHolder
{
    width: 700px;
    padding: 10px;
    background: #ffe6ca;
    margin: 0 0 5px 0;   
}

.blogSpacer
{
    height: 1px;
    width: 100%;
    clear: both;
}

#twitterHeader
{
    color: #2BA9E4;
    font-size: 1.2em;
    margin: 10px 0 5px 0px;
    font-weight: bold;
}

#twitterContent
{
    width: 180px;
}

#twitterContent p
{
    margin: 0 0 5px 0;
}

#twitterContent span
{
    border: none;
    font-size: inherit;
    color: #2BA9E4;
    padding: none;
    margin: none;
    font-weight: normal;
    text-align: right;
    width: 100%;
    display: inline;
}

#blogRight
{
    width: 170px;
    margin: 10px 0 10px 0;
    text-align: right;
}

#blogRight a
{
    width: 100%;
}

#footerContainer, .externalFooter
{
    clear: both;
    width: 100%;
    height: 408px;
    margin: 10px 0 0 0;
    background: white url("images/footerBg.gif") repeat-x;   
}

.externalFooter
{
    background: #444;
    margin: 0px;
    height: auto;
    padding: 20px 0;
}

.externalFooter > div
{
    width: 900px;
    margin: 0 auto 0 auto;
}

.externalFooter .pr
{
    padding-right: 20px;
    width: 430px !important;
}

.externalFooter a {color: #8cc63e;}
.externalFooter a:hover {text-decoration: underline;}

#footerInner
{
    width: 900px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin: 0 auto 0 auto;
}

.footerContent
{
    width: 450px;
    font-size: 1.1em;   
}

#footerContainer a
{
    color: #8cc63e;
}

#footerContainer a:hover
{
    color: #f78f1e;
}

#footerLeft
{
    padding: 0 20px 0 0;
    width: 430px;
}

.contactItem
{
    width: 250px;
    font-family: Verdana, Arial, Sans-Serif;
}

.contactDD
{
    width: 252px;
}

.commentBox
{
    font-size: 12px;
    height: 40px;
}

.commentStyleFix
{
    margin: 10px 0;
}

/*================================
HOMEPAGE LAYOUT
================================*/

.product, #webPerfRev
{
    padding: 15px 10px 0px 10px; 
}

.homeitem a
{
    color: white;   
}

.product, #webPerfRev
{
    color: White;   
}

#seo a, #ppc a, #emailMarketing a, #webDev a, #webPerfRev a, #seo a
{
    color: White;
    text-decoration: underline; 
    clear: both;  
}

#seo a:hover, #ppc a:hover, #emailMarketing a:hover, #webDev a:hover, #webPerfRev a:hover
{
    color: White;
    text-decoration: none;   
}

#healthcheck, #consultation
{
    margin-right: 8px; /* can't be 10px due to the decimals carried over from the 700px divide */
}

.product
{
    width: 320px;
    height: 235px;
    margin-bottom: 10px;
}

#seo
{
    background: url("../../commonImages/seoBg.jpg");
    margin-right: 20px; 
}

#ppc
{
    background: url("../../commonImages/ppcBg.jpg");
}

#emailMarketing
{
    background: url("../../commonImages/emailMarketingBg.jpg");
    margin-right: 20px; 
}

#webDev
{
    background: url("../../commonImages/webDevBg.jpg");
}

#webPerfRev
{
    width: 680px;
    height: 235px;
    background: url("../../commonImages/healthcheckBg.jpg");
    margin-bottom: 10px; 
    text-align: right;
}

.bold
{
    font-weight: bold;   
}

ol
{
    list-style: decimal;
    margin: 0 0 0 50px;   
}

ol li
{
    margin: 20px 0;   
}

#content ul
{
    list-style: square;
    margin: 0 0 0 50px;
}

#content ul li
{
    margin: 10px 0;   
}

.dashedp
{
    width: 100%;
    padding: 0 0 10px 0;
    border-bottom: dashed 1px #dcdcdc;
    display: block;
}

.nextStep
{
    font-size: 1.2em;
    font-weight: bold;
}

.productBenefits
{
    width: 150px;
    padding: 10px;
    margin: 0 0 10px 10px;
    background: #8cc63e;
    color: White;
    font-size: 1.2em;
    clear: both;
}

.productBenefits img
{
    border: none;
    margin: 0 10px 0 0;
}

.productBenefits ul
{
    margin: 0 0 0 20px ! important;
}

.productBenefits ul li
{
    margin: 0;
}

.productBenefits a
{
    color: White ! important;
    text-decoration: underline;
}

.productBenefits a:hover
{
    text-decoration: none;
    color: White;
}

.smDownloadBox
{
    width: 150px;
    padding: 10px;
    margin: 0 0 10px 10px;
    color: #808080;
    background: #e7e7e7;
    font-size: 1.2em;
    text-align: center;
}

.registerInterest
{
    width: 150px;
    clear: both;
    padding: 10px;
    margin: 0 0 10px 10px;
    color: #808080;
    background: #e7e7e7;
    font-size: 1.2em;
}

.promoTag
{
    font-weight: bold;
}

.promoboxSmallColumn
{
    width: 210px;
}

#webPerfRev p
{
    width: 445px;
    float: right;
    clear: both;
}

#hometestimonial
{
    background: #e5e5e5;
    padding: 10px;
    margin: 10px 0;
    width: 680px;
}

/*==== General download table ====*/

.downloadTable
{
    border-collapse: collapse;
    width: 700px;
}

.downloadTable td
{
    text-align: center;
    width: 348px;
    padding: 10px;
    background: #ffe6ca;
}

.downloadTable .padder
{
    width: 4px;
    padding: 0;
    background: White;
}

.downloadTable img
{
    border: none;
}

/*==== newsletter ====*/

#newsletterImage
{
    margin: 8px 0 0 0;
}

/*==== free articles download table ====*/

.articlesTable
{
    width: 100%;
    border-collapse: collapse;
}

.tableTitles
{
    font-weight: bold;
    
}

.articlesTitle
{
    width: 200px;
}

.articlesAbout
{
    width: 400px
}

.articlesCheck
{
    width: 100px;
    text-align: center;
}

.articlesTable tr
{
    border-bottom: solid 1px #808080;
}

.articlesTable td
{
    padding: 5px 0 5px 0;
}

/*==== request forms ====*/

.requestFormDiv
{
    width: 330px;
    margin: 0 0 10px 0;
    background: #ffe6ca;
    padding: 10px;
}

.requestFormItem
{
    width: 95%;
    color: #808080;
    font-family: Verdana, Arial, Sans-Serif;
}

/*==== download Auth ====

#downloadAuth a
{
    font-size: 1.2em;
    font-weight: bold;
}

#downloadAuth a:hover
{
    color: #f78f1e;
}
*/

/*====== Referral form ======*/

#referalTable
{
    border-collapse: collapse;
}

#referralTable tr, #referralThankYou
{
    background: #ffe6ca;
}

#referralThankYou
{
    padding: 5px;
}

#referralTable .splitterRow
{
    background: white;
    height: 5px;
}

#referralTable .splitterRow td
{
    padding: 0;
}

#referralTable td
{
    padding: 10px;
    width: 330px;
}

.referralInput
{
    width: 100%;
    font-family: Verdana, Arial, Sans-Serif;
    color: #808080;
}

/*======= sitemap page =======*/

.sitemapTree td
{
    border: none;
    padding: 2px 0 2px 0;
}

.sitemapTree img
{
    border: none;
}

/*==== portfolio ====*/

.portfolioEntry
{
    width: 680px;
    height: 230px;
    margin: 0 0 20px 0;
    padding: 10px;
}

#unison
{
    background: url("../../App_Themes/default/images/portfolio/unison.jpg") no-repeat;
}

#partydream
{
    background: url("../../App_Themes/default/images/portfolio/partydream.jpg") no-repeat;
}

#ukwf
{
    background: url("../../App_Themes/default/images/portfolio/ukwf.jpg") no-repeat;
}

#dale
{
    background: url("../../App_Themes/default/images/portfolio/dale.jpg") no-repeat;
}

#adl
{
    background: url("../../App_Themes/default/images/portfolio/adl.jpg") no-repeat;
}

#russrich
{
    background: url("../../App_Themes/default/images/portfolio/russrich.jpg") no-repeat;
}

#swift
{
    background: url("../../App_Themes/default/images/portfolio/swift.jpg") no-repeat;
}

#findley2
{
    background: url("../../App_Themes/default/images/portfolio/findley2.jpg") no-repeat;
}

#bodyandfaceworks
{
    background: url("../../App_Themes/default/images/portfolio/bodyandfaceworks.jpg") no-repeat;
}

#sushisushi
{
    background: url("../../App_Themes/default/images/portfolio/sushisushi.jpg") no-repeat;
}

#allinone
{
    background: url("../../App_Themes/default/images/portfolio/allinone.jpg") no-repeat;
}

#emofficial
{
    background: url("../../App_Themes/default/images/portfolio/emofficial.jpg") no-repeat;
}

#wilkesgreen
{
    background: url("../../App_Themes/default/images/portfolio/wilkesgreen.jpg") no-repeat;
}

#avs
{
    background: url("../../App_Themes/default/images/portfolio/avs.jpg") no-repeat;
}

#root4music
{
    background: url("../../App_Themes/default/images/portfolio/root4music.jpg") no-repeat;
}

#integral
{
    background: url("../../App_Themes/default/images/portfolio/integral.jpg") no-repeat;
}

#srg
{
    background: url("../../App_Themes/default/images/portfolio/srg.jpg") no-repeat;
}

#pa
{
    background: url("../../App_Themes/default/images/portfolio/pa.jpg") no-repeat;
}

#sr
{
    background: url("../../App_Themes/default/images/portfolio/sr.jpg") no-repeat;
}

#tuthe
{
    background: url("../../App_Themes/default/images/portfolio/tuthe.jpg") no-repeat;
}

#prestige
{
    background: url("../../App_Themes/default/images/portfolio/prestige.jpg") no-repeat;
}

#ladywood
{
    background: url("../../App_Themes/default/images/portfolio/ladywood.jpg") no-repeat;
}

#denby
{
    background: url("../../App_Themes/default/images/portfolio/denby.jpg") no-repeat;
}

#findley
{
    background: url("../../App_Themes/default/images/portfolio/findley.jpg") no-repeat;
}

#gbf
{
    background: url("../../App_Themes/default/images/portfolio/gbf.jpg") no-repeat;
}

#s1
{
    background: url("../../App_Themes/default/images/portfolio/s1.jpg") no-repeat;
}

#therapie
{
    background: url("../../App_Themes/default/images/portfolio/therapie.jpg") no-repeat;
}

.portfolioEntry p
{
    width: 300px;
}

.portfolioTitle
{
    font-size: 1.4em;
    margin: 0 0 10px 0;
    font-weight: bold;
}

/* ==== Matrices ====*/

.matrixTable
{
    width: 100%;
    border-collapse: collapse;
}

.matrixTable td
{
    padding: 5px;
}

.matrixInfoCol
{
    width: 50%;
    background: #e5e5e5;
    border: solid 1px #808080;
}

.matrixHeader
{
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
}

.matrixCol2, .matrixCol3
{
    width: 25%;
    border: solid 1px #808080;
    text-align: center;
}

.matrixYes
{
    background:  url("../../commonImages/tick.jpg") center no-repeat;
}

.matrixNo
{
    background:  url("../../commonImages/cross.jpg") center no-repeat;
}

.matrixPrice
{
    background: #8cc63e;
    border: solid 1px #808080;
    color: White;
    font-weight: bold;
    font-size: 1.2em;
}

/*==== special offers ====*/

.offerDiv
{
    width: 690px;
    padding: 5px;
    border: solid 1px #e5e5e5;
    margin: 0 0 10px 0;
}

/*==== flash ====*/

.flash
{
    margin: 0px 0px 0px 20px;
}

/*==== Updates April 2010 ====*/

.twitDiv
{
    margin: 10px 0;   
}

.twtr-join-conv
{
    font-size: 0.8em;
    font-weight: normal;
}

#horizNav p
{
 
    color: #808080;
    
} 
.leftNavList li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 181px;
		margin-top : -2.6em;
		width: auto;
}

.leftNavList li:hover ul, .leftNavList li li:hover ul, .leftNavList li li li:hover ul, .leftNavList li.sfhover ul, .leftNavList li li.sfhover ul, .leftNavList li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
}



/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../../commonImages/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

.requestFormContainer
{
    margin: 10px 0 10px 0;
    border-top: solid 1px #8cc63e;
    border-bottom: solid 1px #8cc63e;   
}

.registerInterestCallBack
{
    width: 150px;
    height: 142px;
    clear: both;
    padding: 75px 10px 10px 10px;
    margin: 0 0 10px 10px;
    background: url('../../App_Themes/default/images/request-call-back.jpg') no-repeat;
    font-size: 1.2em;
}

img.greenBorder {border: solid 2px #8cc63e;}

img.trainingBanner {margin: 0 0 10px 0;}

a.dm2Link {display: block; width: 180px; height: 220px; background: url('../../commonImages/dm2-logo-v5-180.jpg') no-repeat 0 32px;}