/* This stylesheet defines styles for the homepage only */

/* Created March 24 2010, Edited by KC: January 26 2011, Edited March 15 2011, February 22, 2012*/

/* Edited by KC, January 22, 2013 */
/* Fixed by CO, February 25, 2013 ;-) */

/* ------------------------------- Page Structure ------------------------------- */


#container .inside {
	margin: 0 32px;
}

#primary,
#secondary,
#tertiary,
#travel_advisory {
	clear: both;
}

#primary #feature {
	float: left;
	width: 710px;
}

#secondary .region {
	float: left;
}

#secondary .first {
	width: 480px;
}

#secondary .middle {
	width: 230px;
}

#secondary .last {
	width: 250px;
}

#tertiary .region {
	float: left;
	width: 235px;
	/* background: #E2E2E2; */
	border-right: 2px solid #003366;
	margin-top: 1px;
}
 
#tertiary .third {
	width: 236px;
}

#tertiary .fourth {
	width: 250px;
}

#bottom .region {
	float: left;
	width: 25%;
}

#bottom .third {
	width: 230px;
}

#bottom .fourth {
	width: 250px;
}

#travel_advisory {
        background:url('http://www.bcferries.com/files/homepage-images/home_lower_right_travel_advisory_bg.gif') no-repeat scroll 1px 0px transparent;
        width: 250px;
        float:right;
        margin-bottom:2px;
        margin-top:3px;
        height:292px;
	z-index: 100;
	position:relative;
}

.TA {
	margin: 60px 10px 0px 12px;
	height: 223px;
	overflow: hidden;
	line-height: 1.3;
}

#contact .region {
	float: left;
	width: 100%;
}
/* ------------------------------- Primary: Rotating Slideshow and Main Content ------------------------------- */

#feature {
	height: 400px;
	overflow: hidden;
	position: relative;
}
#nav {
	bottom:15px;
	left:25px;
	position:absolute;
	z-index:10;
}
#nav a {
	color: #007c84;
	background: url(/images/reskin/pager.png) repeat;
	font-size:9px;
	font-weight:bold;
	margin-right:4px;
	padding:3px 5px;
	display: block;
	float: left;
}
#nav a:hover, #nav a.activeSlide {
	color: #1ca0a8;
	background: #fff;
	text-decoration: none;
}
#feature #slides div {
	position: relative;
}
#feature p {
	color:#dee4eb;
	position:absolute;
	right:30px;
	top:250px;
	margin: 0;
	text-shadow:0 1px 1px #333333;
	font-weight: bold;
}
#feature p a {
	color: #fff;
	font-weight: bold;
	text-shadow:0 1px 1px #333333;
}
#feature h1 {
	position:absolute;
	right:30px;
	top:215px;
	display: block;
	height: 0 !important;
	line-height: 1;
	margin: 0;
	overflow: hidden !important;
}
#planner {
	float: left;
	width: 250px;
	/*background: url(/images/reskin/planner.gif) top left no-repeat;*/
	background: #003366;
	height: 280px;
}
#planner .inside {
	margin: 20px;
}
#planner h2 {
	background: url(/images/reskin/h2-plan-your-trip.gif) no-repeat 0 0;
	height: 0 !important;
	line-height: 1;
	overflow: hidden !important;
	padding-top: 51px;
	width: 179px;
	margin: 0 0 10px;
	float: left;
	display: block;
}
#planner p {
	color: #fff;
	font-size: 11px;
	clear: both;
	height: 30px;
	line-height: 14px;
	margin: 0 0 10px 0;
}
#planner a {
	color: #fff;
	font-weight: bold;
	float: right;
	font-size: 11px;
	height: 30px;
	overflow: hidden;
	width: 40px;
	margin-top:-30px;
}
#planner form p {
	margin: 0;
	height: auto;
}
#planner form p.date {
	height: 25px;
	font-size: 10px;
}
#planner form .form-submit {
	margin-right: 4px;
	width: 100px;
}
/* Hide the planner labels from regular web readers, 
but allow most screenreaders and search engines to use them. */
#planner label.select {
	visibility: hidden;
	height: 0;
	overflow: hidden;
	width: 0;
	display: block;
}
.date label {
	float: left;
	width: 93px;
}
.date input.form-text {
	width: 80px;
	color: #4c4d4e;
	line-height: 11px;
	padding: 1px 2px;
	float: left;
}
.date img {
	float: right;
}
#planner select {
	width: 100%;
	margin: 0 0 10px;
	color: #4c4d4e;
}
/* ------------------------------- Secondary: Right-Side Column Content ------------------------------- */

#secondary p {
	color: #1587b1;
	font-size: 11px;
	font-style: italic;
	line-height: 14px;
}
#secondary .middle p {
	margin: 0;
}
#secondary .middle img {
	display: block;
}
/* --- Secondary First --- */

#secondary .first {
	background: url(/images/reskin/vacations.jpg) no-repeat top left #a7c1da;
	position: relative;
	height: 210px;
}
#secondary .first p.read-more a {
	position: absolute;
	right: 18px;
	bottom: 14px;
	color: #fff;
}
#secondary .first ul {
	bottom:8px;
	left:15px;
	margin:0;
	padding:0;
	position:absolute;
}
#secondary .first li {
	list-style: none;
	float: left;
	background: url(/images/reskin/thumb-background.png) no-repeat top left;
	padding: 5px;
}
/* --- Secondary Middle: My Account --- */

#secondary .middle {
	height: 210px;
}
#secondary .last {
        margin-top: 3px;
	background: url(/images/homepage/myaccount-background-blue.jpg) no-repeat top left;
	height: 210px;
}
#secondary .last h2 {
	background: url(/images/homepage/h2-myaccount-v2.png) no-repeat 0 0;
	height: 0 !important;
	line-height: 1;
	overflow: hidden !important;
	padding-top: 28px;	
        width: 150px;
	display: block;
	margin:13px 0 0 11px;
}
#secondary .last p {
	color: #fff;
	margin: 0 20px;
	font-style: normal;
}
#secondary .last a {
	border: 1px solid #659536;
	color: #fff;
	font-weight: normal;
	background: url(/images/reskin/button.jpg) repeat-x 0 1px #a4c088;
	padding: 2px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	float: right;
	margin: 5px 0;
	-moz-box-shadow: 2px 2px 4px #2e5a60;
	-webkit-box-shadow: 2px 2px 4px #2e5a60;
	box-shadow: 2px 2px 4px #2e5a60;
}
#secondary .last a:hover {
	background-position: 0 -19px;
	background-color: #3f8fba;
	border-color: #3f8fba;
	text-decoration: none;
}
#secondary .last .account {
	border-top: 1px solid #65a8af;
	float: left;
	width: 210px;
	margin-left: 20px;
}
#secondary .last table, #secondary .last tbody {
	padding: 0;
	border: none;
	clear: both;
}
#secondary .last table p {
	margin: 0;
}
#secondary .last table {
	margin:0 11px;
}
#secondary .last .button {
	width: 60px;
}
#secondary .last td {
	border: none;
	padding: 5px 0;
}
#secondary .last td.reserve {
	width:110px
}
#secondary .first .images {
	bottom:12px;
	left:15px;
	margin:0;
	padding:0;
	position:absolute;
}
#secondary .first .images img {
	background:url(/images/reskin/thumb-background.png) no-repeat scroll left top transparent;
	float:left;
	list-style:none outside none;
	padding:5px;
}
#secondary .first .images {
        bottom:12px;
        left:15px;
        margin:0;
        padding:0;
        position:absolute;
}

#secondary .first .images img {
        background:url(/images/reskin/thumb-background.png) no-repeat scroll left top transparent;
        float:left;
        list-style:none outside none;
        padding:5px;
}
/* ------------------------------- Travel Advisory ------------------------------- */

#travel_advisory .inside {
        font-variant: normal;
        float: left;
        margin-right: auto;
        margin-left: 0px;
        overflow:hidden;  
        height: 300px;
        padding-right: 4px;
        padding-left: 10px;
}
#travel_advisory .inside .travel_advisorylink a{
	text-align: left;
	vertical-align: bottom;
	bottom: 47px;
	position: absolute;
        color: #ffffff;
        font-size: 11px;
}

/* ------------------------------- Tertiary: Bottom Content Boxes ------------------------------- */

#tertiary {
	/*background: url(/files/images/bcf-mainpage-4grey-boxes.png) no-repeat 1px 0px;
	height: 149px;*/
	/* height: 85px; */
	border-bottom: 8px solid #003366;
	/* width: 711px; */
}
/*defines height inside and margin padding below box*/
#tertiary .region .inside {
	margin: 7px 0;
	padding: 0 12px 0 12px;
	/*height: 100px;*/
}
#tertiary .region .inside img {
	margin: 0 0 0 5px;
	float: right;
}
#tertiary h3 {
	margin: 0;
	font-size: 13px;
	color: #1C5595;
	line-height: 20px;
	/* font-size: 16px; */
}
#tertiary .region .inside p {
	color: #000;
	font-size: 10px;
	/* font-style: italic; */
	line-height: 14px;
	margin: 5px 0 0;
}

#tertiary a {
	/* color: #007c84; */
}

#tertiary a:hover .region {
    background-color: #fff;
}

#tertiary a .region {
    background: #E2E2E2;
}


/* ------------------------------- Bottom: Last Layer of Grey Boxes  ------------------------------- */

#bottom {
	background: url(/files/images/bcf-mainpage-4grey-boxes.png) no-repeat 1px 0px;
	height: 149px;
	margin-bottom: 0px;
	z-index: 0;
	position:relative;
}

#bottom .region .inside {
	margin: 17px 0;
	padding: 0 12px 0 12px;
	height: 100px;
}

#bottom h3 {
	margin: 0;
	color: #1C5595;
	font-size: 14px;
	line-height: 20px;
}
#bottom p {
	color: #737373;
	font-size: 11px;
	font-style: italic;
	line-height: 14px;
	margin: 5px 0 0;
}

#bottom a {
	color: #007c84;
}

#bottom img {
	margin: 0 0 0 5px;
	float: right;
}
/* ------------------------------- Contact Footer ------------------------------- */
#contact .region {
        margin-top: 0px; 
        margin-bottom: 0px;  
        height: 35px;
  
}
#contact .region .inside {
        margin-left:0px;
        height: 35px;
        width:960px;
        background-color: #fff;
}

#contact .region p {
        color: #000; 
        font-size: 12px;
        line-height: 34px;
        font-style: normal;
        margin-left: 28px;
}
#contact .region a {
        color: #007C84;
        /* color: #003366;
        font-style: italic;
        font-weight:600; 
        margin-left: 390px; */
}
/* ------------------------------- Overwrite Footer Class ------------------------------- */

#container #footer .inside {
    margin: 0 0 0 0;
    padding: 8px 28px 8px 28px;
    float: left;
    width: 904px;
    background-color: #003366;
}