#body { }

#outerWrapper { width: 950px; margin: 0px auto; }

div#wrapper { border: 1px solid #155294; }

/* A container should group all columns. */
#container { width: 910px; text-align: left; font-family: "Times New Roman", Times, serif;  margin: 0px auto; min-height: 919px; }

/* These classes select the container background image. */
.generic{ width: 950px; position: absolute; background: url(../../../images/generic_bg.jpg) no-repeat; }
.homepage{ width: 950px; position: absolute; background: url(../../../images/homepage_bg.jpg) no-repeat; }
.usefulStuff{ width: 950px; position: absolute; background: url(../../../images/useful_stuff_bg.jpg) no-repeat; }
.aboutSailing{ width: 950px; position: absolute; background: url(../../../images/about_sailing_bg.jpg) no-repeat; }
.aboutFirstSail{ width: 950px; position: absolute; background: url(../../../images/about_first_sail_bg.jpg) no-repeat; }
.span-3 h4{ width: 950px; position: absolute; background: url(../../../images/about_sailing_bg.jpg) no-repeat; }
.partsBg{ width: 950px; position: absolute; background: url(../../../images/parts_of_the_boat_bg.jpg) no-repeat; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img{ width: 950px; position: absolute; background: url(../../../images/useful_stuff_bg.jpg) no-repeat; left: 283px; top: 484px; }
.firstTimeGuide{ width: 950px; position: absolute; background: url(../../../images/first_time_guide_bg.jpg) no-repeat; }
.sailingSchools{ width: 950px; position: absolute; background: url(../../../images/sailing_schools_bg.jpg) no-repeat; }
.sailingHolidays{ width: 950px; position: absolute; background: url(../../../images/sailing_holidays_bg.jpg) no-repeat; }
.secondSail{ width: 950px; position: absolute; background: url(../../../images/first_time_guide_bg.jpg) no-repeat; }

/* Navigation IDs- Home and About First Sail Links 
and Learn the Lingo pages (top of page)
-------------------------------------------------------------- */

#contact { position: absolute; left: 505px; top: 32px; height: 70px; width: 70px; }
#homeAboutFs { position: absolute; left: 479px; top: 22px; width: 274px; }
#homeAboutFs a:link { color: #7BB238; }
#homeAboutFs a:hover { color: #9E0C0E; }

#lingo { font: bold 11px Verdana, Geneva, sans-serif; }
#lingo a:link { color: #7BB238; }
#lingo a:hover { color: #9E0C0E; }

/* Navigation IDs- Main Tabs and Breadcrumb Trail (Bc)
-------------------------------------------------------------- */

#navBar { height: 36px; width: 390px; margin-top: 89px; }
#navBar ul { margin: 0; padding: 0; left: 0; bottom: 0;  list-style: none; }
#navBar ul li { float: left; height: 36px; width: 78px; margin: 0px; padding: 0px; }
#navBar ul a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #039; text-decoration: none; line-height: 14px; display: block; height: 31px; width: 78px; text-align: center; margin: 0; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: url(../../../images/tab_bg.png); background-repeat: no-repeat; background-position: left center; }
#navBar ul a:link { background-position: center top; color: #FFF; }
#navBar ul a:visited { background-position: center top; color: #FFF; }
#navBar ul a:hover { background-position: center top; color: #039; }
#navBar li a.current, #navBar li a.current:hover, #navBar li a.current :active { background-position: center bottom; color: #7BB238; }

#homePageBc { height: 15px; margin-top: 26px; margin-left: 480px; }
#aboutFsBc { height: 15px; margin-top: 14px; margin-left: 525px; }
#contactBc { height: 15px; margin-top: 14px; margin-left: 625px; }
#aboutSailingBc { height: 15px; margin-top: 14px; margin-left: 20px; }
#firstTimeGuideBc { height: 15px; margin-top: 14px; margin-left: 86px; }
ul span{ height: 15px; margin-top: 14px; margin-left: 88px; }
#sailingSchoolsBc { height: 15px; margin-top: 14px; margin-left: 170px; }
#sailingHolidaysBc { height: 15px; margin-top: 14px; margin-left: 246px; }
#secondSailBc { height: 15px; margin-top: 14px; margin-left: 330px; }
#charteringBc { height: 15px; margin-top: 14px; margin-left: 410px; }

/* Navigation IDs- Useful Stuff Buttons & Knots
-------------------------------------------------------------- */

#usefulStuffNav { float: right; margin-bottom: 15px; margin-left: 10px; margin-top: 72px; }
#usefulStuffNavHp { float: right; margin-top: 72px; }
#usefulStuffNav  a { color: #FFF; font-weight: bold; z-index: 10; }
#usefulStuffNav .partsOfTheBoat a:hover { color: #7BB238; }
#usefulStuffNav .partsOfTheBoatSmall a:hover { color: #7BB238; }
#usefulStuffNav .learnTheLingo a:hover { color: #40A9BC; }
#usefulStuffNav .learnTheLingoSmall a:hover { color: #40A9BC; }
#usefulStuffNav .usefulKnots a:hover { color: #155294; }
#usefulStuffNav .usefulKnotsSmall a:hover { color: #155294; }
#usefulStuffNav .aboutNavigation a:hover { color: #9E0C0E; }
#usefulStuffNav .aboutNavigationSmall a:hover { color: #9E0C0E; }

#usefulStuffNav a.current, #usefulStuffNav a.current:hover, #usefulStuffNav a.current :active { cursor: default; color: #E5DBB7; }

#asUsUsefulKnotsCol a.current, #asUsUsefulKnotsCol a.current:hover, #asUsUsefulKnotsCol a.current :active { cursor: default; color: #9E0C0E; }


/* Navigation Classes- Useful Stuff Buttons & Knots
-------------------------------------------------------------- */

.partsOfTheBoat { background: url(../../../images/parts_of_the_boat.png) no-repeat; width: 109px; text-align: center; margin: 0px; padding-top: 68px; padding-bottom: 10px; font: bold 10px Verdana, Geneva, sans-serif; }
.partsOfTheBoatSmall { background: url(../../../images/parts_of_the_boat_small.png) no-repeat; width: 109px; font: 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 9px; padding-bottom: 10px; cursor: default; }

.learnTheLingo { background: url(../../../images/learn_the_lingo.png) no-repeat; width: 109px; font: bold 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 68px; padding-bottom: 10px; }
.learnTheLingoSmall { background: url(../../../images/learn_the_lingo_small.png) no-repeat; width: 109px; font: 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 9px; padding-bottom: 10px; }

.usefulKnots { background: url(../../../images/useful_knots.png) no-repeat; width: 109px; font: bold 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 68px; padding-bottom: 10px; }
.usefulKnotsSmall { background:url(../../../images/useful_knots_small.png) no-repeat; width: 109px; font: 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 9px; padding-bottom: 10px; }

.aboutNavigation { background: url(../../../images/about_navigation.png) no-repeat; width: 109px; font: bold 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 68px; padding-bottom: 10px; }
.aboutNavigationSmall { background:url(../../../images/about_navigation_small.png) no-repeat; width: 109px; font: 10px Verdana, Geneva, sans-serif; color: #FFF; text-align: center; margin: 0px; padding-top: 9px; padding-bottom: 10px; }

.asUsUsefulKnotsCol a.current :active { cursor: default; color: #9E0C0E; }

/* IDs - Miscellaneous AP Divs
-------------------------------------------------------------- */

#knotPic { height: 230px; width: 141px; position: absolute; left: 381px; top: 243px; }
#acidLogo { height: 33px; width: 68px; position: absolute; left: 871px; top: 956px; }
#hdLink { height: 14px; width: 342px; position: absolute; left: 39px; top: 979px; }
#termsOfUse { height: 14px; width: 144px; position: absolute; left: 521px; top: 979px; }

#w3cxhtml { height: 24px; width: 68px; position: absolute; left: 793px; top: 964px; }
#w3ccss { height: 24px; width: 68px; position: absolute; left: 716px; top: 964px; }

/* Classes - Miscellaneous
-------------------------------------------------------------- */

.ftgListCol { height: 14px; width: 144px; position: absolute; left: 521px; top: 979px; }

.picCaption { width: 109px; }

.PicBoxRight { float: right; margin: 10px 0px 10px 10px; }
.PicBoxLeft { float: left; margin: 10px 10px 10px 0px; }
.PicBoxUsCol { float: right; margin: 10px 0px; }

/* HD - Section and page column IDs
-------------------------------------------------------------- */

#hpCol2 { margin-top: 114px; float: left; margin-left: 0px; }

#movie { margin-top: 54px; margin-bottom: 18px; } 

#afsCap { margin-top: 54px; float: right; }

#sailingPic { margin-top: 10px; }

#packList { margin-top: 0px; }

#quote { clear: both }

#spacer { height: 120px; float: right; padding: 10px 0px; }

#contactForm #textfield:focus { background: #E6F4F7; }
#contactForm #EmailAddress:focus { background: #E6F4F7; }
#contactForm #Comments:focus { background: #E6F4F7; }

#lingo1Col1 { margin-top: 0px; }
#lingo1Col2 { margin-top: 0px; }

#schoolDiv {  float: left; margin-top: 3px;  margin-bottom: 3px;}

#sailingAreas { float: right; margin-top: 10px; }

#sailingAreas h3 { color:#9E0C0E }

#ukMap {  margin-top: 0px; }

#contactDetails {  float: right; margin-top: 0px; }

#adBox { margin-top: 60px; }

/* Blueprint - Column Class Rules
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { float: left; margin-right: 10px; }

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 { width: 30px; }

.span-2 { width: 70px; }

.span-3 { width: 110px; }

.span-4 { width: 150px; }

.span-5 { width: 190px; margin-top: 30px; }

.span-6 { width: 230px; margin-top: 30px; margin-bottom: 5px; }

.span-7 { width: 270px; margin-top: 42px; }

.span-8 { width: 310px; }

.span-9 { width: 350px; }

.span-10 { width: 390px; }

.span-11 { width: 430px; margin-bottom: 6px; }

.span-12 { width: 470px; margin-top: 24px; }

.span-13 { width: 510px; margin-top: 6px; }

.span-14 { width: 550px; margin-top: 6px; }

.span-15 { width: 590px; margin-top: 30px; }

.span-16 { width: 630px; margin-top: 30px; }

.span-17 { width: 670px; }

.span-18 { width: 710px; }

.span-19 { width: 750px; }

.span-20 { width: 790px; }

.span-21 { width: 830px; }

.span-22 { width: 870px; }

.span-23 { width: 910px; }

.span-24 { width: 950px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1 { padding-right: 40px; }

.append-2 { padding-right: 80px; }

.append-3 { padding-right: 120px; }

.append-4 { padding-right: 160px; }

.append-5 { padding-right: 200px; }

.append-6 { padding-right: 240px; }

.append-7 { padding-right: 280px; }

.append-8 { padding-right: 320px; }

.append-9 { padding-right: 360px; }

.append-10 { padding-right: 400px; }

.append-11 { padding-right: 440px; }

.append-12 { padding-right: 480px; }

.append-13 { padding-right: 520px; }

.append-14 { padding-right: 560px; }

.append-15 { padding-right: 600px; }

.append-16 { padding-right: 640px; }

.append-17 { padding-right: 680px; }

.append-18 { padding-right: 720px; }

.append-19 { padding-right: 760px; }

.append-20 { padding-right: 800px; }

.append-21 { padding-right: 840px; }

.append-22 { padding-right: 880px; }

.append-23 { padding-right: 920px; }

/* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 40px; }

.prepend-2 { padding-left: 80px; }

.prepend-3 { padding-left: 120px; }

.prepend-4 { padding-left: 160px; }

.prepend-5 { padding-left: 200px; }

.prepend-6 { padding-left: 240px; }

.prepend-7 { padding-left: 280px; }

.prepend-8 { padding-left: 320px; }

.prepend-9 { padding-left: 360px; }

.prepend-10 { padding-left: 400px; }

.prepend-11 { padding-left: 440px; }

.prepend-12 { padding-left: 480px; }

.prepend-13 { padding-left: 520px; }

.prepend-14 { padding-left: 560px; }

.prepend-15 { padding-left: 600px; }

.prepend-16 { padding-left: 640px; }

.prepend-17 { padding-left: 680px; }

.prepend-18 { padding-left: 720px; }

.prepend-19 { padding-left: 760px; }

.prepend-20 { padding-left: 800px; }

.prepend-21 { padding-left: 840px; }

.prepend-22 { padding-left: 880px; }

.prepend-23 { padding-left: 920px; }

/* Border on right hand side of a column. */
div.border { padding-right: 4px; margin-right: 5px; border-right: 1px solid #eee; }

/* Border with more whitespace, spans one column. */
div.colborder { padding-right: 24px; margin-right: 25px; border-right: 1px solid #eee; }

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px; }

.pull-2 { margin-left: -80px; }

.pull-3 { margin-left: -120px; }

.pull-4 { margin-left: -160px; }

.pull-5 { margin-left: -200px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5 { float:left; position:relative; }

.push-1 { margin: 0 -40px 1.5em 40px; }

.push-2 { margin: 0 -80px 1.5em 80px; }

.push-3 { margin: 0 -120px 1.5em 120px; }

.push-4 { margin: 0 -160px 1.5em 160px; }

.push-5 { margin: 0 -200px 1.5em 200px; }

.push-1, .push-2, .push-3, .push-4, .push-5 { float: right; position:relative; }

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
.prepend-top { margin-top:1.5em; }

/* Use a .box to create a padded box inside a column.  */ 
.box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

.adBox { height: 130px; width: 130px; border: thin solid #144F91; float: left; }

/* Use this to create a horizontal ruler across a column. */
hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; }

hr.space { background: #fff; color: #fff; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }

.clearfix, .container { display: block; }

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }
#uksaLink { height: 67px; width: 483px; position: absolute; left: 34px; top: 891px; }

img#farewell { margin: 50px 0 50px 0; border: thin solid #333; }