/************************************************************************

	Site:		Bespoke HR 

	Company:		Varistic		[sandra.barkhuizen@varistic.com]
	
                /(       )`
                \ \__   / |
                /- _ `-/  '
               (/\/ \ \   /\ 
               / /   | `    \  
               O O   )      |    
               `-^--'`<     '  
              (_.)  _ )    /   
               `.___/`    /   
                 `-----' /
    <----.     __ / __   \   
    <----|====O)))==) \) /====BESPOKEHR***Because*HR*doesn't*Need*To*Be*Scary!
    <----'    `--' `.__,' \
                 |         |
                  \       /  
              ____( (_   / \______
            ,'  ,----'   |        \ 
            `--{__________)       \/

	
	Designer/Author: Sandra Barkhuizen

	Listing Order:
	==============

	1 - Universal
	2 - Structure/Layout
	3 - Round Box
 4 - Forms

/***********************************************************************
	1 - UNIVERSAL STYLES
************************************************************************/
body { padding:0; margin:0; font: 75%/1.25em Arial, Helvetica, sans-serif; color: #333; line-height: 130%; background:url(../images/body.gif) repeat-x top #007dc1; }
body#bodyAbout { background:url(../images/bodyPurple.gif) repeat-x top #aa00c7;}
body#bodyHome { background:url(../images/body.gif) repeat-x top #007dc1;}
body#bodyContact{ background:url(../images/bodyRed.gif) repeat-x top #c70b00;}
body#bodyTestimonial { background:url(../images/bodyGreen.gif) repeat-x top #00c177;}

a { color:#007dc1;}
a:hover { color:#333;}
.clear { margin:0; clear:both; }
img { border:0;}
p { margin:0; padding:0;}
li { list-style:circle; font-size:1.25em;}
h4 { color:#069; font-size:1.5em; margin:.25em 0 .25em 0; padding:0;}
/***********************************************************************
	2 - Structure/Layout
************************************************************************/
#banner { width:950px; margin:0 auto; padding:0;	}
#navigation { height:52px; margin:0; padding:0; }
#navigation ul { margin:0; padding:0;}
#navigation li { display:inline; padding:0; margin:0;}

#navigation li a { display:block; float:left; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; margin:0 0 0 1em; }

#navigation #home a {background:url(../images/homeOver.jpg) no-repeat; font-size:1em; width:84px; color:#333; height:35px; padding:16px 0 0 30px;}
#navigation #home a:hover { background:url(../images/home.jpg) no-repeat; width:59px; padding-left:55px; }
body#bodyHome #navigation #home a { background:url(../images/home.jpg) no-repeat; font-size:1em; width:59px; color:#333; height:35px; padding:16px 0 0 55px;}

#navigation #about a {background:url(../images/aboutOver.jpg) no-repeat; font-size:1em; width:78px; color:#333; height:35px; padding:16px 0 0 30px;}
#navigation #about a:hover { background:url(../images/about.jpg) no-repeat;  width:68px; padding-left:40px;}
body#bodyAbout #navigation #about a{background:url(../images/about.jpg) no-repeat;  font-size:1em;  width:68px; color:#333; height:35px; padding:16px 0 0 40px;}

#navigation #contact a {background:url(../images/contactOver.jpg) no-repeat; font-size:1em;width:104px; color:#333; height:35px; padding:16px 0 0 30px;}
#navigation #contact a:hover { background:url(../images/contact.jpg) no-repeat;  width:79px; padding-left:35px;}
body#bodyContact #navigation #contact a { background:url(../images/contact.jpg) no-repeat;  width:79px; font-size:1em;color:#333;padding:16px 0 0 35px;}

#bannerContent { height:408px; display:block; background:url(../images/monstersHome.jpg) no-repeat left; margin:0; padding:0; color:#fff; }
body#bodyAbout #bannerContent { height:407px; display:block; background:url(../images/monstersAbout.jpg) no-repeat left; margin:0; padding:0; color:#fff; }
body#bodyContact #bannerContent { height:408px; display:block; background:url(../images/monstersContact.jpg) no-repeat left; margin:0; padding:0; color:#fff; }
body#bodyTestimonial #bannerContent { height:407px; display:block; background:url(../images/mostersTestimonials.jpg) no-repeat left; margin:0; padding:0; color:#fff; }

#bannerContent h2 { margin:0 0 .5em 0; padding:4.25em 0 0 0; font-size:42px; text-transform:uppercase; color:#FFF;}
#bannerContent #tagline { font-size:23px; font-weight:normal; color:#fff;}
#bannerContent p { line-height:18px; font-size:1.25em; text-align:justify;}

#introTxt { background:url(../images/logo.jpg) no-repeat 120px 10px; margin:0 0 0 43em; width:36.25em;}
body#bodyAbout #introTxt { background:url(../images/logoPurple.jpg) no-repeat 120px 10px; margin:0 0 0 43em; width:36.25em;}
body#bodyContact #introTxt { background:url(../images/logoRed.jpg) no-repeat 120px 10px; margin:0 0 0 43em; width:36.25em;}
body#bodyTestimonial #introTxt { background:url(../images/logoGreen.jpg) no-repeat 120px 10px; margin:0 0 0 43em; width:36.25em;}


#content { width:100%; background-color:#FFF; margin:0; padding:0;}
#contentMiddle { width:950px; margin:0 auto; padding:0;}

#mainContent { float:right; display:block; width:600px; line-height:1.75em;}
#mainContent li { margin:0 0 .5em 0;}
#mainContent h1 {font-size:3em; display:block; font-family:Arial, Helvetica, sans-serif; color:#007dc1; margin:.5em 0 .5em 0; padding:0;}
body#bodyContact #mainContent h2 {font-size:3em; display:block; font-family:Arial, Helvetica, sans-serif; color:#c70b00; margin:.5em 0 .5em 0; padding:0;}
body#bodyAbout #mainContent h2 {font-size:3em; display:block; font-family:Arial, Helvetica, sans-serif; color:#aa00c7; margin:.5em 0 .5em 0; padding:0;}

#indent { padding:2em; margin:2em 0 1em 0; background-color:#faf9f9; font-size:.9em;	border:1px solid #d8d8d8;	-moz-border-radius: 10px;	-webkit-border-radius:10px;}
#indent img { float:right; border:1px solid #CCC; padding:.5em .5em 0 .5em; margin:0 0 0 1em; background-color:#FFF;}
/*#ran2 img { background-color:#0796db;}*/


#mainContent h3 { font-size:1.25em; line-height:1.25em; margin:0 0 1em 0; padding:0; font-style:italic; color:#333;}
#mainContent p { margin:0 0 1.5em 0; font-size:1.25em;}
#getInTouch { background:url(../images/getInTouchBack.gif); margin:2em 0 0 0; width:950px; height:76px;}
#getInTouch img { float:right; padding:.75em .75em 0 0;}
#getInTouch h3 { color:#007dc1; font-family:Arial, Helvetica, sans-serif; font-size:2em; margin:0 0 0 .75em; padding-top:.75em; }
#getInTouch p { font-size:13px; margin:.5em 0 0 1.5em; }
#getInTouch a { color:#333; text-decoration:none;}

#footer { background:url(../images/footer.gif) repeat-x;}
body#bodyAbout #footer { background:url(../images/footerPurple.gif) repeat-x;}
body#bodyContact #footer { background:url(../images/footerRed.gif) repeat-x;}
body#bodyTestimonial #footer { background:url(../images/footerGreen.gif) repeat-x;}

#footerMiddle { width:950px; margin:0 auto; padding:16em 0 10em 0; text-align:center; color:#FFF;	}
#footerMiddle strong { color:#c6ddea;}
#footerMiddle p { padding:0 0 2em 0;}
#footerMiddle a { color:#c6ddea;}
#footerMiddle a:hover { text-decoration:none; color:#FFF;}

#flashEye { float:left;}


#leftColumn {	background-color: #ffffff;}
td {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #666666;	text-align: left;}

body#bodyTestimonial ul { }
body#bodyTestimonial li { margin:0; padding:0;}
/***********************************************************************
	3 - Round Boxes
************************************************************************/
.roundBox { background:url(../images/round_topL.gif) no-repeat top left; background-color:#FFF; width:300px; float:left;}
.roundBox .roundHeading{ background:url(../images/round_topR.gif) no-repeat right top; display:block; text-align:right;}
.roundBox .roundHeading h2 {  padding:.6em .6em .25em 2.5em; margin:0 0 0 .5em; font-size:3em; height:55px; display:block; font-family:Arial, Helvetica, sans-serif; color:#007dc1; }
#flashEye { float:left; margin:.75em 0 0 .75em;}

.roundBox .roundContent { background:url(../images/round_backLeft.gif) repeat-y; padding:0; margin:0; text-align:right;}
.roundBox .roundContent ul { padding: 1em 0 0 0; list-style:none; margin:0 2em;}
.roundBox .roundContent li { display:block; background:url(../images/line.gif) repeat-x; height:2em; list-style:none;}
.roundBox .roundContent li a { background-color:#FFF; padding-left:.25em;  text-align:right; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#333; text-decoration:none; }
.roundBox .roundContent li a:hover { color:#FFF; background-color:#007dc1; padding:3px;}
.roundBox .roundContent li .active  { display:block;  padding:3px;  text-align:right; font-weight:bold; color:#FFF; background-color:#007dc1;}

.roundBox .roundContent p { margin:0; padding:.25em .25em .25em 0;}
.roundBox .roundContent .roundContentR{ background:url(../images/round_backRight.gif) right repeat-y; display:block; margin:0; padding:0;}
.roundBox .roundBottom { background:url(../images/round_bottomL.gif) no-repeat bottom left; display:block; height:20px; }
.roundBottom span { background:url(../images/round_bottomR.gif) no-repeat right bottom; height:20px; display:block;}

/***********************************************************************
	3 - Form
************************************************************************/
fieldset { width:100%; padding:0 2em 2em 2em; margin:2em 0 0 0; background-color:#faf9f9;	border:1px solid #d8d8d8;	-moz-border-radius: 10px;	-webkit-border-radius:10px;}
#legendH3 {color:#069; font-size:1.5em; text-transform:uppercase; margin:0 0 1em 0; padding:1em 0 .5em 0; border-bottom:1px dotted #999;}
label { text-align:right; display:block; float:left; width:25%; font-weight:bold; color:#333; margin:0 1em 0;}

input { width:60%;}

.buttonp { padding:0 0 0 12em;}
.button { background-color:#007dc1; border:0; padding:.25em; width:43%; color:#FFF; font-weight:bold;}