/***********************************************************
 *      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:370px; 

}


div#benefits{
float: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:0px;
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:10px;
	margin-left:25px;
	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:20px;
	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: 320px; 
   margin-top:15px;
   margin-left:20px;
   font-size: 0.95em;
}

div.promo span#inner{
			margin:0 0 0 0;
			padding:0;
}


div.promo  #promoTop{
	background-image: url(../images/promTop.png);
	height:50px;	
}

div.promo  #promoTop #tip{
	color:white;
	padding: 10px 0 0 10px;
	font-size: 1.5em;
}

div.promo  #promoMid{
	background-image: url(../images/apple.jpg);
	background-repeat:no-repeat;
	background-position:0px 6px;
	background-color:#202020;
	color:silver;
	font-size: 0.85em;
	padding: 280px 10px 0 18px;
	margin: 0 0 -11px 0;
	border-right: solid 1px #919191;
	border-left: solid 1px #919191;
}


div.promo  #promoLow{
	font-size: .95em;
	background-image: url(../images/promLow.png);
	background-position: 0 0;
	color:silver;
	padding: 5px 0 0 15px;
	height:35px;  	 
}


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

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 */

/* sports logo */

div#logo{
	background-position: 0px 0px;
	background-image: url(../images/logo/FitPro.jpg);
	height: 124px;
	width: 360px;
	background-repeat: no-repeat;
	margin: 0;
	margin-left:330px;
	margin-top: 20px;
}

div#logo a{
	display: block;
		height: 124px;
	width: 360px;

}

div#map{
margin-left:120px;
border:2px solid black;
width:500px;
}