/***********************************************************
 *      Author: H.Thomas
 *        date: 21/12/07
 * Description: Style sheet for Southdown Personal Training
 *     version: 2.0
************************************************************/

/* 
   The default size of font in most browsers is 16px
   so, 62.5% * 16 = 10px
   Setting the font size to 62.5% makes it easy to work
   in units of 10px i.e. 1em = 10px; 1.5em = 15px
*/
body{
 font-family: verdana, Arial, sans-serif;
 font-size: 62.5%;
 line-height:1.8em;
 margin: 0;
 padding: 0;
 background-image: url(../images/pageBg.jpg);
 background-repeat: repeat-y; 
 background-position: center top; 
 /* IE work around to centre graphic */
    text-align: center;
}


/**************************************************************
   Wrapper
***************************************************************/
  div.shell{
   /* 
   This wraps all the content. 
   760px allows most resolutions to
   accept the presentation without
   any problems.
   Getting the wrapper to centralise by
   using the auto margin for left and right.
   */
	   width: 760px;
	   position:relative;
	   font-size: 1.4em;
	   margin: 0px auto 0 auto;
	   background: #FFF url(../images/wrapper_bg.gif) no-repeat center top;
	  /* IE work around to centre graphic, restore alignment */
	     text-align: left;
   }




hr{
/* Need both of these as IE and Mozilla have different requirements
   Also need slight variation as the W3 CSS validator does not allow
   the same fore and background colours
*/
 background-color: #4682B4;
 color: #4682B3;
}

p{
margin-top: 2px;
}

div.header{
 height: 100px;
 overflow: hidden;
 background-color: white;
 background-image: url(../images/line.jpg);
 background-position: left center;
 background-repeat: no-repeat;
}


div.content{
margin: 0px 10px 0 14px;
padding-left:0px;

}

/* index page only 

*/
div#welcome{
float:left;
width:390px; 
}




div#benefits{
float:left;
clear:left;
margin:0;
 margin-top:-15px;
padding:0;
width:360px;

}

ul.square {
list-style-type: none;
padding-left: 1em;
}

.square li
{
 background-image: url(../images/bullet.jpg);
 background-repeat: no-repeat;
 background-position: 0px 4px;
 padding-left: 1.5em;
 padding-top:5px;
 font-weight:bold;
}

div#who{
float:left;
margin-top:20px;
width:480px;
padding-right:30px;
}




div#where{
float:left;
width:100%;
padding-right:30px;
}

/* end of index page */


div.footer{
 font-size:.8em;
 overflow: hidden;
 background-color:white;
 text-align:center;
}

div .footer img{
border:0;
}

span#phone{
font-weight:bold;
}

h2{
font-size:1.2em;

}

/*

height: 46px;

  width:400px;
  float:left;
 clear:both;
 display:block;
  overflow: hidden;
*/

div.point
{
 font-size: 1em;
 padding: 2px 0 8px 18px;
 background-image: url(../images/questionMark.jpg);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 color: #3082B8;
 font-weight: bold;
 /* width:350px; */
 margin-bottom:1px;
}


.title{
	margin-top:10px;
	padding-bottom:10px;
}



div.leftPanel
{
 position: absolute;
 left: -141px;
 width: 118px;
 height: 372px; 
 /* 
 14th April 2008
 Added extra height to accommodate the 'news' link.
 */
 background-image: url(../images/panelBg.jpg);
 background-repeat: repeat-y;
 background-position: -40px 0px;
 padding-left:23px;
 top: 115px;

}


.heading{
 font-size:1em;
 font-weight: bold;
}

/* image layouts */
#imgWelcome{
float:left;
	width:370px;
	margin:0;
	padding:0;
margin-left:3px;
	margin-top:20px;
	/*  20px 
	margin-left:0;
	margin-right:-20px;

	*/
}

.imgRight {
	float:right;
	margin-right:5px;
	margin-left:5px;
	margin-bottom:20px;
	/* border: 1px outset #4682B4; */
}

#imgLeft1{
 float:left;
 width:395px;
 height:264px;

}

#imgRight2{
float:right;

}



#imgMartin{
 position: relative;
 float: left;
 margin-top:0px;
 margin-bottom:10px;
 margin-right: 10px;
}


.imgLeft{
	float:left;
	margin-right:10px;
	margin-bottom:5px;
}

#imgLeftLink{
	float:left;
	clear:both;
}

.imgMap{
 position: relative;
 float: right;
 top: 10px;
 margin-bottom:30px;
 margin-left: 10px;
 border: 1px solid #696969;
}

#imgMCv{
	position:relative;
	margin-top:5px;
	margin-left:0px;
	margin-bottom:10px;
	float:left;
	margin-right:10px;
	border: 1px outset #4682B4;
}

#imgCCv{
 position:relative;
 margin-top:25px;
 margin-left:10px;
 float:right;
 margin-right:20px;
 border: 1px outset #4682B4;
}

#repsLogo{
top: 69px; 
left: 575px;
border:0;
}

.phrase{
 float:left;
 padding-top:10px;
}

/* marker for the return to the top of the page 
	position:relative;
	float:right;
	/* z-index:2; */


.top{
 padding-left:25px;
 font-weight: bold;
 font-size: .9em;
 text-align: right;
}

/* Testimonial holders */
.panel{
 margin:0 auto 0 auto;
 font-size: 14px;
 background-image: url(../images/panel.jpg);
 padding:30px 60px 30px 30px;
 /* image width 436px -30*2 = 376*   , height 286px  */
 width: 346px;
 height: 226px;
 color: white;
 background-repeat: no-repeat;
 font-family: Verdana;
line-height: 1.6em;
}

* html .panel{
/* fix for IE broken box model. See pg169 the missing manuel  w\idth:346px; */
/* changed this back to 360px from 436px 06/09/07 */
position:relative;
 width:436px;
 height: 286px;
 left:60px;
}



.link{
 border-right: black 1px solid;
 border-top: black 1px solid;
 border-left: black 1px solid;
 border-bottom: black 1px solid;
 margin-top: 5px;
 margin-bottom: 10px;
 padding:10px 10px 10px 10px;
}



/* promo */
div.promo{
   float:left;
   width: 340px; 
   height: 419px;
   margin-top:15px;
   background-image: url(../images/bootCamp.jpg); 
   background-repeat: no-repeat;
   background-position: 22px 0;
   font-size: 0.95em;
}

div.promo div.inner{
 position: relative;
}
/*
.promo div.inner p.title
{
 font-size: 1.2em;
 color: aqua;
 margin-top: 15px;
 padding: 0 5px 0 10px;
 text-align: center;
 font-weight: bold;
} */

div.promo div.inner p{
   position:absolute;
   font-family:Verdana;
   color:black;
   top:387px;
   width:280px;
   left:80px;
   
/*
This worked well but is not valid
CSS, so mocked the effect in
paintshop:
background-color: #ff0000;
/* for IE 
   filter:alpha(opacity=65); 
/* CSS3 standard 
   opacity:0.7; 
/* for Mozilla 
   -moz-opacity: 0.65;
*/
}
  
/*
div.promo .inner p{
 font-size:.9em;
 margin: 20px 10px;
 color: white;
}
div.promo .inner p.bold{
 font-weight: bold;
}

div.promo .inner .list{
 font-size:.9em;
 color:Aqua;
 width:250px;
 font-weight:normal;
 margin-top:-10px;
 margin-bottom:-15px;
}
*/

div.promo a{
color:White;

}

div.promo a:hover{
font-weight:bold;
color:yellow;
}

/* end of promo */



/* news letter section */

div.news{
 border-right: black 1px solid;
 border-top: black 1px solid;
 border-left: black 1px solid;
 border-bottom: black 1px solid;
 margin-top: 5px;
 margin-bottom: 10px;
 padding:10px 10px 10px 10px;

}

div.news span{
font-size:1.3em;
}

div.news a:hover{
background-color:Orange;
}

/* End of news letter section */