/*---------------------
		This CSS is intended to be the general design template for style sheet to customize Comers.
		The stylesheet is used by Comers in customer local sites.

		If no local customize css is used, comersstandard.css will be used.

----------------------*/
/*---------------------
		General Font styles
-------------------------*/

/* ---------- layout styles begin ---------- */
div, p, blockquote, form, label, ul, li, ol, dl, fieldset, address, body, td, th, input,
	textarea, select, button, h1, h2, h3, h4, h5, h6, a {
	font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
	color:#444;
	font-size: 13px;
	line-height: 1.3em;
	font-weight: normal;
}

/* ---------- FONTS BEGIN ---------- */
/* ---------- headings begin   ---------- */
h1 {font-size:1.5em;font-weight:bold;}
h2 {font-size:1.3em;font-weight:bold;}
h3 {font-size:1.2em;font-weight:bold;}
h4 {font-size:1.1em;font-weight:bold;}
h5 {font-size:1.1em;font-weight:bold;}
h6 {font-size:1.1em;font-weight:bold;}
/* ---------- headings end   ---------- */
/* ---------- FONTS END   ---------- */

a{ text-decoration: none; font-weight: normal; }
a:hover{ text-decoration: underline; }

/* standardheader.jsp style this to get nice links in header menu */

.cs9HeaderMenu { float: left; text-align:center; margin: 0 0 0 0; }

.cs9HeaderMenu li, .cs9HeaderMenu a#toggleHeaderMenu { float:left; display: inline-block; font-size: 1.1em; line-height: 1.9em;}

.cs9HeaderMenu li a,
.cs9HeaderMenu a#toggleHeaderMenu,
.cs9HeaderMenu ul li a {
	display: inline-block;
	font-size: 1em;/*Inherit from li*/
	line-height: 2em;
	text-transform:uppercase;
    padding: 0.5em 2em;
}

.cs9HeaderMenu a#toggleHeaderMenu {
	display: none;
}

.cs9HeaderMenu li a:hover { text-decoration: underline; }
/*-- HEADER MENU LINKS END---*/
/*-- FOOTER LINKS BEGIN--*/

.cs9FooterMenu li a:hover, .cs9FooterDestinations li a:hover {
    text-decoration: underline;
}

/*-- FOOTER LINKS END---*/
/* ---------- LINKS END ---------- */

#menu ul {
/*     liststyle to UL-tag in menu
	list-style-image:url(../images/pixelpil.gif);
	list-style-position: inside;
*/
}

#menu li {
    padding:.1em 0 .1em 0;
	 text-indent: 0;
/*	 border-bottom: 1px dashed #999999;  */
}

#menu li a:hover, #menu li span.selected {
/*	 background: url(../images/pixelpil.gif) scroll 0 no-repeat;     */
	 text-decoration:underline;
}

/*---------- LEFT MENU END ------*/
/* ---------- HEADER BEGIN ---------- */
/* this is also where you can specify height if the header should be of specific height
 	this is the div that specifies use of full width, do not compromise */
#header {
	margin: 0 0 0 0;
	padding:0 0 .5em 0;
/*	background: url(../images/sidhuvud_child.jpg) repeat-x;  */
	background-position: bottom;
/*	border-bottom:1px solid #dddddd;   */
}

.cs9StandardHeader {
/*	background: url(../images/header.jpg) no-repeat;  */
	float: left;
	width: 100%;
}

/* contains logo, language and minicart divs */
.cs9HeaderTop {
	float:left;
	width: 100%;
}

/* RSS feed logo in upper right corner in header */
.cs9HeaderRss {
   float: right;
}

/* RSS feed logo end */

/* header customer login */
/* To only get border between them, use this
ul.customerLoginNav li:nth-child(2) {
	border-left: 1px solid #ddd;
}
*/

/*--------------------*/

/*-------- minicart in header ----*/
/* -- position the minicart with this div */
/*------------- end minicart-----------------------*/

/* contains menu and freetextsearch */
.cs9HeaderBottom {
    float: left;
	width: 100%;
    border-bottom: 4px solid #2a449f;
}


/*-- HEADER MENU LINKS END---*/
/*-----------------------------*/



/***********************************
		----- HEADER END --------
*************************************/

/* ---------- FOOTER BEGIN ---------- */

#footer div, #footer li, #footer a {
	line-height:2.5em;
}

#footer {
/*    border-top: 1px #999999 solid;   */
/*    margin: .5em .5em .5em .5em;    */
    text-align: center;
    margin: 1em 0;
    border-top: 2px solid #2a449f;
}

.cs9FooterMenu {

}

.cs9FooterMenu ul, .cs9FooterDestinations ul {
    text-align: center;
}


.cs9FooterMenu li, .cs9FooterDestinations li {
   display: inline;
	padding: 0 0.5em;
}


.cs9FooterDestinations, .cs9FooterMenu {
    border-top: 1px #dddddd dashed;
    border-bottom: 1px #dddddd dashed;
}

/* ---------- FOOTER END  ---------- */

/*------- CUSTOMER LOGIN START ----------*/

.cs9CustomerLogin {
/* this class is used to style login fields */
}
.customerShowBooking .cs9CustomerLoginPreamble{	margin: .5em 0; }
.cs9CustomerLogin label{ font-weight: bold; }
/*------- CUSTOMER LOGIN END ------------*/

/* ---------------------------------------- */
/* ---------- LAYOUT STYLES BEGIN---------- */
body {
	 margin:0 auto;
     background: #dee2ee;

/*	 background: #dee2ee url('../images/bg-winter.jpg') center top no-repeat fixed;   */
	/* background: url( ../images/bodybg.png ) no-repeat scroll top; */
}

#container {
	position: relative;
	width: 980px;
	margin:0 auto;
    background: #fff;
    padding: 1em;
}

/* Wrapper area contains all area1, area2 and so on
	Wrapper area is used to declare background color, border

*/

#wrapper {
    /* margin: 1em 0 0 0;*/
	 padding: 0;
	 border: none;
/*	 background:url(../images/ramverk_orangefade_bg.gif ) repeat-x scroll top;  */
}

/*---------- LEFT MENU BEGIN ------*/

/*-- start page begin --- */
/* Area1 start definition here */
/* Should be absolute pixelsize */
#menu {
	float: left;
	width: 200px;
	margin: 0 10px;
    display:block;
    height:100%;
}

/* the START-area start definition here */
body#start #area1 {
    float:left;
    width: 95%;
    border: 8px solid #fcebd1;
    border-radius: 8px;
    padding: 1em;
}

body#start #area2,
body#start #area3,
body#start #area4,
body#start #area5,
body#start #area6,
body#start #area7,
body#start #area8,
body#start #area9 {
	display:none;
}
/*-- start page end --- */

/*-- result page begin --*/

body#result #area1{
	display: inline;
	float: left;
}
body#result #area2,
body#result #area3,
body#result #area4,
body#result #area5,
body#result #area6,
body#result #area7,
body#result #area8,
body#result #area9 {
	display:none;
}
/*-- result page end --- */

/*-- result charter page begin --*/

body#resultcharter #area1,
body#resultcharter #area2,
body#resultcharter #area3,
body#resultcharter #area4,
body#resultcharter #area5,
body#resultcharter #area6,
body#resultcharter #area7,
body#resultcharter #area8,
body#resultcharter #area9 {
	display:none;
}
/*-- result charter page end --- */

/*-- book page begin --*/
body#book #area1 {
	float:left;
    width:100%;
}

body#book #area2,
body#book #area3,
body#book #area4,
body#book #area5,
body#book #area6,
body#book #area7,
body#book #area8,
body#book #area9 {
	display:block;
}
/*-- book page end --- */

/*-- login page begin --*/
body#standard #area1,
body#standard #area2,
body#standard #area3,
body#standard #area4,
body#standard #area5,
body#standard #area6,
body#standard #area7,
body#standard #area8,
body#standard #area9 {
	display:block;
}
/*-- login page end --- */


body#popup #container {
    width: auto;
}

/* ---------- LAYOUT STYLES END  ---------- */

/*---- These classes are used to style the .cs9SearchParameters div and its elements ----*/
.cs9SearchText {}

/*End sidecart*/

/*COLOR SCHEME*/
/*
body{ background: red; }
#container{ background: red; }
#header{ background: blue; }
#wrapper{ background: yellow; }
#footer{ background: green; }
.cs9CustomerLogin{ background: orange; }
*/

/*Change percentage depending on how many images on 1 row in Extra images*/
.ui-tabs .ui-tabs-panel img{ width: 32%; }
/*Start mini and sideCart*/
/*
.minicart, .cs9SideCart{ border: 1px solid #ddd; background: #f9f9f9; }
*/
/*End mini and sidecart*/

/*Start inccustemailsubscribe2*/
.cs9EmailSubscribe{ /*border: 1px solid #ddd; background: #f9f9f9;*/ }
/*End emailSurbscribe*/

/*Change height for minicart*/
.minicart span#miniCartPrice,
.minicart span.cs9CartGotoBooking a,
.minicart span.cs9CartCancelBooking a{/*new line-height*/}

/*Googlemaps*/
#map,
#multiMapDiv{ border: 1px solid #ddd; }
/*Buttons on site, change padding or remove for smaller larger buttons.*/
a.fg-button, .cs9Book a.fg-button, .cs9Choice a.fg-button, .cs9ScheduleBook a.fg-button, .buttonBoxStandard a{  /*Use to override default behavior*/ }

/*take border size in consideration*/
.cs9ImageContainer img{ border: 1px solid #ddd; /*1px border on each side, IE likes*/ }
.cs9SearchParameters { border: 1px solid #ddd; }

/*-----
	Div containing the departuretab.jsp. This div has the long green/grey bottom background -----*/
/*
.departureTabStart { border-bottom: 1px solid #ddd; }
*/
/*Extend standard to center charter tabs*/
/*
.departureTabStart ul { left: 50%; }
.departureTabStart li { right: 50%; }
.departureTabStart li a{ border: 1px solid #ddd; border-bottom: none; }
*/
/*---- Div container end ----*/

/*Searchfilters*/
.productPartResultContainer,
.cs9searchFilterFormContainer,
#youSearchedContainer{
	/*background: #f9f9f9;
	border: 1px solid #ddd;*/
}
/*StandardproductInfo*/
.cs9StandardHeaderImage {
	float: right;
	margin-left: 10px;
	overflow: hidden;
	border: none;
}

/* Added breadcrumb to header */
#breadcrumb{
	float:left;
	width: 100%;
	/*height: 1.8em;*/
}

#breadcrumb ul li{ float:left; }
#breadcrumb ul li a{ display: block; padding: .2em 1em; }

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
/*    background: rgba(255, 255, 255, 0.6);  */
}

/* To catch bigger screens for landscape use (orientation: portrait) and (orientation: landscape) */
@media only screen and (max-device-width: 767px), only screen and (max-width: 700px) {
    body {
/*	    background-color: #FAFAFA;        */
	    margin: 0;
	    padding: 0;
    }

	div, p, blockquote, form, label, ul, li, ol, dl, fieldset, address, body, input,
	textarea, select, button, h1, h2, h3, h4, h5, h6, a {
		font-size: 1em;
	}

	#container { width:100%;padding: 0; }

	#menu { display:none; }

	#header {
		box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
		padding: 0;
		margin-bottom: 8px;
	}

	.cs9HeaderBottom {
		border: none;
	}

	/*
	 .cs9HeaderLang li.selected:after {
		 content: "\2261";
		 vertical-align: top;
		 font-size: .8em;
	 }
	 */

	.cs9StandardHeader, #cs9StandardFooter {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	body#standard #area1, body#start #area1, body#book #area1, body#result #area1,
	body#standard #area2, body#start #area2, body#book #area2, body#result #area2,
	body#standard #area3, body#start #area3, body#book #area3, body#result #area3,
	body#standard #area4, body#start #area4, body#book #area4, body#result #area4,
	body#standard #area5, body#start #area5, body#book #area5, body#result #area5 {
		width: 100%;
		padding: 0;
		margin: 0;
        border: none;
	}

	/* responsive menu */
    .cs9HeaderBottom {
	    margin: 0.3em 0;
    }

   /* slide in menu */
	.cs9MenuTrigger {
		display: block;
		float: left;
		padding: .2em;
		font-weight: bold;
		font-size: 1.2em;
        cursor: pointer;
	}

	.cs9HeaderMenu {
		position: fixed;
		z-index: 20;
		overflow: hidden;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		top: 0;
		width: 300px;
		height: 100%;
		left: -300px;
/*		background-color: #fafaff;
		box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);    */
	}

	.cs9HeaderMenu div.cs9HeaderLang {
		padding: .5em 2em;
	}

	.cs9HeaderMenu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

   .cs9HeaderMenu li {
	   display: block;
	   text-align: left;
	   border-bottom: solid 1px grey;
	   float: none;
   }

   .cs9HeaderMenu li a {
   }

	body.menu-open .cs9HeaderMenu {
		left: 0;
	}

	/* dropdown menu */
	/*
	.cs9HeaderMenu {
		width: 100%;
	}

	.cs9HeaderMenu ul {
		display: none;
		height: auto;
	}

	.cs9HeaderMenu li {
		display: block;
		float: none;
		width: 100%;
	}

	.cs9HeaderMenu a#toggleHeaderMenu {
		display: block;
		width: 100%;
		position: relative;
		padding: 0;
	}

    .cs9HeaderMenu  ul.listLevel1 li  {
       border: none;
       border-bottom: 1px solid #ccc;
    }

    .cs9HeaderMenu ul li a  {
        border-right: none;
    }
    */
	/*
	To place a menu-icon after
	.cs9HeaderMenu a#toggleHeaderMenu:after {
		content: "";
		background: url('pathtoimage.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block
		position: absolute;
		right: 15px;
		top: 10px;
	}
	*/

    #footer div, #footer li, #footer a {
        line-height: 1.5em;
    }

    .cs9HeaderSearch, .cs9PropertyContainer {display:none;}
}