/*fluid CSS layout for GP Driving School by DHP for Sparrowhawkes.com June 2009*/
/*main page uses nifty cube corners by Alessandro Fulciniti for box rounding (a.fulciniti@html.it)*/

html,body{margin:0;padding:0;font-size:12px;font-family:tahoma,arial,sans-serif;}

/* the speed lines and GP logo are free-standing elements, attached to the left & right hand sides */
#bg img {position:absolute;top:0px;left:0px;height:73px;width:100%;z-index:0;}
#gplogo img {position:absolute;top:0px;left:0px;height:73px;width:536px;z-index:1;}

strong {font-size:15px;}
.white {color:#FFF;}
p {font-size:14px;line-height:1.3em;margin: -18px 5px 18px 5px;}
h1 {position:relative;top:0px;left:2px;font-size:14px;color:#817A7A;font-family:tahoma,arial,sans-serif;}
.style1 {font-size:1px;color:#FFF;}
.quote {color:#C4000A;font-style:italic;padding:0px 10px 0px 5px;}


/*wrap contains the elements that stretch across the browser screen: the car & navbg*/
#wrap {position:absolute;top:0px;left:0px;width:100%;height:200px;min-width:810px;}
#top {position:relative;top:0px;left:0px;width:100%;height:177px;}
#car img {position:relative;top:0px;float:right;height:177px;width:253px;z-index:4;}
#navbg img {position:relative;top:-106px;left:0px;height:65px;width:100%;z-index:3;}

/*wrap2 holds the tagline & nav over the navbg allowing for page resizing*/
#wrap2 {position:absolute;top:0px;left:0px;width:100%;height:200px;min-width:750px;}
#top2 {position:relative;top:0px;left:0px;margin:0 auto 0 auto;width:800px;height:177px;z-index:5;}
#tag {position:relative;top:74px;left:0px;font-size:15px;}
#nav {position:relative;top:90px;left:0px;color:#02094F;word-spacing:6px;}
#nav a {text-decoration:none;font-weight:bold;font-size:15px;color:#02094F;}

/*midstay keeps the main page content in proportion to the top and bottom bars & allows page distortion...*/
#midstay {position:absolute;top:25%;left:0px;width:100%;height:500px;min-width:750px;}
#middle {position:relative;top:0px;left:0px;margin:auto;padding:1px;width:800px;height:450px;z-index:2;}
#main {position:relative;top:0px;left:12px;float:left;width:538px;height:375px;}
#contact {position:relative;top:40px;left:40px;float:left;height:180px;width:190px;font-size:11px;color:#3F0202;padding:21px 15px 21px 15px;background:#C4000A;font-weight:bold;margin:0 auto auto auto;z-index:3;}
#contact a {text-decoration:none;color:#3F0202;}


/*bottom holds the copy bg & the badges, allowing them to stretch across the screen*/
#bottom {position:absolute;top:80%;left:0px;width:100%;height:113px;min-width:780px;}
#badges img {position:relative;top:0px;float:right;height:113px;width:232px;z-index:1;}
#copybg img {position:relative;top:-31px;left:0px;height:31px;width:100%;z-index:0;}

/*bottom2 holds the copy fixed over the copybg, allowing it to expand AT THE SAME RATE, but in line with the text elements above it*/
#holder {position:absolute;top:80%;left:0px;width:100%;height:113px;min-width:750px;}
#bottom2 {position:relative;top:0px;left:0px;margin:0 auto 0 auto;padding:0 1px 0 1px;width:800px;height:113px;}
#copy {position:relative;top:88px;left:0px;font-size:12px;font-family:georgia,times,serif;z-index:4;}
#copy a {text-decoration:none;color:#3F0202;}