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

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;}
.bold {font-weight: bold;}


a:link
{
    color: #5273a5;
    text-decoration: none;
}

a:visited
{
    color: #5273a5;
    text-decoration: none;
}

a:hover
{
	color: #136ef7;
}

a:active
{
	color: #136ef7;
}

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

h2, h3, legend, .referralTitle 
{
    font-size: 1.1em;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

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

h5 
{
  font-size: 1.4em;
  font-weight: bold;  
}

/*===============
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: #153B73 /*#845fa8*/;}

body 
{
    width: 100%;
    height: 100%;
    background: #5273a5;
    font-size: 1.2em;
}

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

#header
{
    width: 100%;
    height: 220px;
    background: url("images/headerBg.jpg") no-repeat;
    float: left;
}

#mainContent
{
    background: url("images/mainContentBg.jpg") repeat-y;
    width: 960px;
    padding: 0px 20px 0px 20px;
}

#content
{   
    width: 720px;
    height: auto;
    float: right;
    margin: 20px 0 0 0;
    text-align: justify;
}

#footer
{
    width: 960px;
    height: 30px;
    clear: both;
    background: url("images/footerBg.jpg") no-repeat;
    padding: 20px 20px 0 20px;
    margin: 0 auto 20px auto;
}

.spacer
{
    width: 100%;
    height: 0px;
    clear: both;    
}

#content p
{
    margin: 0 0 10px 0;
    line-height: 1.4em;
}

#facebook
{
   margin: 105px 10px 0 0;
}

#twitter
{
    margin: 112px 11px 0 0;
}

#stumble
{
    margin: 76px 35px 0 0;    
}

#phoneNumber
{
    background: #c978b2 !important;
    font-weight: bold;
    text-align: center;
    float: left;
    width: 190px;
    padding: 20px;
    color: White;
}

.contentList
{
    margin: 0 0 10px 30px;
    list-style: disc;
    line-height: 1.4em;
}

/*==== MENUS ====*/

.sidebarmenu ul{
margin: 20px 10px 0 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
float:left;
width: 230px;/* Main Menu Item widths */
}
 
.sidebarmenu ul li
{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: White;
text-decoration: none;
padding: 10px 0 10px 0;
margin: 0 0 10px 0;
width: 100%;
text-align: center;
background: #5273a5;
font-weight: bold;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #5273a5; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: White;
}

.sidebarmenu ul li a:hover{
    color: #ffffff;
    background: #c978b2;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
float:left;
width: 100%; /*Sub Menu Items width */
top: -20px;
left: 50px;
visibility: hidden;
}

.sidebarmenu ul li ul li a{
margin: 0 0 0 2px;
}

.subNavInner
{
    border-bottom: solid 1px white;
}

.subNavInnerTop
{
    border-top: solid 1px white;
    border-bottom: solid 1px white;
}

.subNavInnerTopPadOnly
{
    border-top: solid 1px white;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

 
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */


/*==== pricing table ====*/

.pricingTable
{
    width: 100%;
}

.pricingTable td
{
    border: solid 1px #FFDFF6;
    height: 100px;
    text-align: center;
}

.description
{
    width: 36%;
    padding: 2%;
}

.itemdescription, .price
{
    width: 30%;
}

.price
{
    font-weight: bold;
}