/* Styles för Swebus Express portal.
- indragen pil
- storlek 570px
- vita knappar
- all text är svart

Färger som används:
000000 - svart (all text + knapparna)
EE2E2E - röd
FFFFFF - vit (knapparna)
0075B1 - blå
*/

body {
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    padding: 0;
    margin: 0;
    width: 100%;
}

body#iframeContent {
    width: 100%;
}

form {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

label {
    font-weight: bold;
}

input {
    font-size: 10px;
    font-family: arial;
}

#loadingIndicatorImage
{
    position: fixed;
    top: 0;
    left: 510px;
    visibility: hidden;
}

input.small {
    width: 50px;
    font-size: 10px;
    font-family: arial;
}

input.normal {
    width: 100px;
    font-size: 10px;
    font-family: arial;
}

input.medium {
    width: 150px;
    font-size: 10px;
    font-family: arial;
}

input.large {
    width: 250px;
    font-size: 10px;
    font-family: arial;
}

select {
    font-size: 10px;
    font-family: arial;
}

select.medium {
    width: 150px;
    font-size: 10px;
    font-family: arial;
}

select.large {
    width: 250px;
    font-size: 10px;
    font-family: arial;
}

select.extralarge {
    width: 380px;
    font-size: 10px;
    font-family: arial;
}

select.exceptionCodes {
    width: 230px;
    font-size: 10px;
    font-family: arial;
}

.selected {
    text-decoration: none;
    font-weight: bold;
    background: #f0f3f5;
}

img {
    margin: 0px;
    border: none;
}

a {
    color: #000000;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.errorTitle {
    color: #ff0000;
    font-weight: bold;
}

.errorMessage {
    color: #ff0000;
    display: block;
}

.warning{
    color: #ff0000;
}

.required {
    color: #ff0000;
}

.countryAreaFont {
    font-size : 9px;
}

.requiredHeader {
    color: #ff0000;
    text-align: right;
    font-weight: bold;
}

.requiredHeader a {
    color: #ff0000;
}

.enabled {
    font-size: 12px;
    font-family: arial;
    font-weight: normal;
    color: #4d6078;
}

.enabled:link {
    text-decoration: none;
}

.enabled:active {
    text-decoration: none;
}

.enabled:visited {
    text-decoration: none;
}

.enabled:hover {
    text-decoration: underline;
}

.disabled {
    font-size: 12px;
    font-family: arial;
    font-weight: normal;
    color: #c5d3da;
}

img.flag {
    max-height: 20px;
    max-width: 80px;
}

.hotelName {
    font-weight: bold;
}

div.processingImage {
    text-align: center;
}

div.processingImage table {
    background: #ffffff;
}

div.processingImage td {
    padding: 0px 5px;
}

div.processingImage td.left {
    width: 45%;
    text-align: right;
}

div.processingImage td.right{
    width: 55%;
    text-align: left;
}

#stepArea{
    font-size: 12px;
    padding: 5px 0px 10px 5px;
}




/* ----------- HEADERS ----------- */
h1 {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 9px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

h1.contentHeaderType1 {
    font-size: 18px;
    margin: 5px 0px 5px 5px;
}

h1.contentHeaderType2 {
    border-top: 3px solid #000000;
    background: url("/images/headerBackground.gif") repeat-x top;
    padding: 4px;
}

tr.contentHeaderType2{
    border-top: 3px solid #000000;
    font-size: 12px;
    font-weight: normal;
    border-collapse: collapse;
    padding: 4px;
    background: url("/images/headerBackground.gif") repeat-x top;
}

div.contentHeaderType2 {
    border-top: 3px solid #000000;
    font-size: 12px;
    font-weight: normal;
}

div.contentHeaderType2 table {
    border-collapse: collapse;
    padding: 0px;
}

div.contentHeaderType2 table td {
    padding: 4px;
    background: url("/images/headerBackground.gif") repeat-x top;
}

.contentHeaderType3 {
    background: #d1dae1;
    margin: 0px;
    padding: 5px;
}

.contentHeaderType3 table{
    border-collapse: collapse;
}

.contentHeaderType3 table td {
    background: #d1dae1;
}

.contentHeaderType4 {
    background: #e7ecef;
    padding: 3px;
}

.contentHeaderType4 table{
    border-collapse: collapse;
}

.contentHeaderType4 table td{
    background: #e7ecef;
    padding-left: 5px;
}

/* ----------- END OF HEADERS ----------- */






/* ----------- TABLE STYLES ----------- */
table {
    width: 100%;
    background: #f3f5f7;
    padding: 1px;
}

td table{
    border-collapse: collapse;
    padding: 0px;
}

th {
    background: #e7ecef;
    text-align: left;
}

th.thAlignCenter {
    background: #e7ecef;
    text-align: center;
}

th.thAlignRight {
    background: #e7ecef;
    text-align: right;
}

td {
    padding: 2px;
}

td.rowSpacer {
    background: #ffffff;
    padding: 1px 0px 0px 0px !important;
}

td.areaSpacer {
    background: #d7dee4;
    padding: 0px !important;
}

td.formLabel {
    width: 28%;
}

td.tdAlignCenter {
    text-align: center;
}

td.tdAlignRight {
    text-align: right;
}

td.buttonAlign {
    width: 5%;
}

tr.odd {
    background: white;
}

tr.even {
    background: #f3f5f7;
}

#contentAreaTop table {
    background: #ffffff;
}

.dataArea table{
    width: 100%;
    border-collapse: collapse;
    background: #f3f5f7 !important;
    padding: 0px;
}

.dataArea table th {
    padding: 2px 2px;
}

.dataArea table td {
    padding: 2px 2px;
}

.spaced table{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    padding: 0px;
}


table.fixedLayout {
    table-layout: fixed;
}

td.ratePlanDay{
    vertical-align: top;
}

.valignTop {
    vertical-align: top;

}

td.verticalSeparator{
    border-left:1px solid #d7dee4;
}

td.small{
    width: 15%;
}

th.small{
    width: 15%;
}

td.halfTable{
    width: 50%;
}
/* ----------- END OF TABLE STYLES ----------- */






/* ----------- BUTTONS ----------- */

/* -- small -- */
.buttonSmallSubmit {
    color: #000000;
    height: 26px;
    padding: 0px;
    font-size: 11px;
    font-family: arial;
    font-weight: bold;
    background: #FFFFFF;
    border-top: 2px solid #99adbd;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #99adbd;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
}

.buttonSmallSubmitDisabled {
    color: #99adbd;
    height: 18px;
    padding: 0px;
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    background: #e0e8ec;
    border-top: 2px solid #c5d3da;
    border-right: 2px solid #354d67;
    border-bottom: 2px solid #354d67;
    border-left: 2px solid #c5d3da;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
}

.buttonSmallLink {
    color: #000000;
    background: #ffffff;
    padding: 1px 3px 1px 3px;
    font-size: 11px;
    font-family: arial;
    font-weight: bold;
    border-top: 2px solid #99adbd;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #99adbd;
    margin-left: 1px;
    margin-right: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.buttonSmallLink:hover {
    text-decoration: none;
}

.buttonSmallLinkDisabled {
    color: #99adbd;
    padding: 1px 3px 1px 3px;
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    background: #e0e8ec;
    border-top: 2px solid #c5d3da;
    border-right: 2px solid #354d67;
    border-bottom: 2px solid #354d67;
    border-left: 2px solid #c5d3da;
    margin-left: 1px;
    margin-right: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.buttonSmallLinkDisabled:hover {
    text-decoration: none;
}

/* -- large -- */
.buttonLargeSubmit {
    color: #000000;
    background: #ffffff;
    height: 21px;
    padding: 0px;
    font-size: 11px;
    font-family: arial;
    font-weight: bold;
    border-top: 2px solid #99adbd;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #99adbd;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
}

.buttonLargeSubmitDisabled {
    color: #99adbd;
    height: 21px;
    padding: 0px;
    font-size: 10px;
    font-family: arial;
    font-weight: bold;
    background: #ff0000;
    border-top: 2px solid #c5d3da;
    border-right: 2px solid #354d67;
    border-bottom: 2px solid #354d67;
    border-left: 2px solid #c5d3da;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: middle;
}

.buttonLargeLink {
    color: #000000;
    background: #ffffff;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    font-family: arial;
    font-weight: bold;
    border-top: 2px solid #99adbd;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #99adbd;
    margin-left: 1px;
    margin-right: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.buttonLargeLink:hover {
    text-decoration: none;
}

.buttonLargeLinkDisabled {
    color: #99adbd;
    padding: 1px 5px 1px 5px;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
    background: #e0e8ec;
    border-top: 2px solid #c5d3da;
    border-right: 2px solid #354d67;
    border-bottom: 2px solid #354d67;
    border-left: 2px solid #c5d3da;
    margin-left: 1px;
    margin-right: 1px;
    white-space: nowrap;
    vertical-align: middle;
}

.buttonLargeLinkDisabled:hover {
    text-decoration: none;
}

.buttons {
    padding: 1px;
    margin: 5px;
    text-align: center;
}

.buttonsAlignLeft {
    padding: 7px 0px;
    text-align: left;
}

.buttonsAlignRight {
    padding: 7px 0px;
    text-align: right;
}

.dataArea .buttonsAlignLeft {
    padding: 0;
}

.dataArea .buttonsAlignRight {
    padding: 0;
}
/* ----------- END OF BUTTONS ----------- */





/* ----------- CONTAINERS ----------- */
#contentContainer {
}

#errorContainer{
    display: none;
}

#contentAreaTop {
    border: 1px solid #d7dee4;
    clear: both;
    padding: 1px;
}

.contentArea {
    border: 1px solid #d7dee4;
    border-top: 0;
    padding: 1px;
}

.contentAreaInnerTop {
    border: 1px solid #d7dee4;
    padding: 1px;
    margin-top: 10px;
}

#popUpContainer {
    margin: 5px;
}

.dataArea {
    width: 100%;
}

#headerArea {
    width: 100%;
}

.spaced{
    padding: 5px;
}

#hotelContentSpaced{
    padding-left: 20px !important;
}

.scrollArea {
    height: 200px;
    overflow: auto;
    width: 100%;           /*needed by IE in order to keep the div from overlapping the contentArea div*/
    overflow-y: scroll;     /*needed by IE in order to always display the vertical scroll bar since the data area has to be narrowed (scrollInnerArea)*/
    overflow-x: hidden;
}

.smallScrollArea {
    max-height: 125px;
    overflow: auto;
    width: 100%;           /*needed by IE in order to keep the div from overlapping the contentArea div*/
    overflow-y: scroll;     /*needed by IE in order to always display the vertical scroll bar since the data area has to be narrowed (scrollInnerArea)*/
    overflow-x: hidden;
}

/*needed by IE in order to prevent the vertical scroll bar from overlapping the dataArea content*/
.scrollInnerArea {
    width: inherit;
    border-right: #f3f5f7 solid 15px;
}
/* ----------- END OF CONTAINERS ----------- */





/* ---------- TABS ----------- */
#tabArea {
    width: 100%;
    line-height: normal;
    color: #4d6078;
    font-size: 12px;
    font-family: arial;
    font-weight: bold;
}

#tabArea ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

#tabArea li {
	padding-right: 0px;
    padding-left: 9px;
    padding-bottom: 0px;
    padding-top: 0px;
    background: url("/images/tabs/tabInactiveLeft.gif") no-repeat left top;
    float: left;
    margin: 0px;
}

#tabArea a {
	padding-right: 15px;
    padding-left: 6px;
    padding-bottom: 4px;
    padding-top: 5px;
    margin: 0px;
    display: block;
    background: url("/images/tabs/tabInactiveRight.gif") no-repeat right top;
    text-decoration: none;
}

#tabArea a:link   {
    text-decoration: underline;
}

#tabArea a:visited   {
    text-decoration: underline;
}

#tabArea a:active   {
    text-decoration: underline;
}

#tabArea a:hover   {
    text-decoration: none;
}

#tabArea #inActiveTab a {
	padding-right: 15px;
    padding-left: 6px;
    padding-bottom: 4px;
    padding-top: 5px;
    margin: 0px;
    display: block;
    background: url("/images/tabs/tabInactiveRight.gif") no-repeat right top;
    text-decoration: none;
}

#tabArea #inActiveTab a:link   {
    text-decoration: none;
}

#tabArea #inActiveTab a:visited   {
    text-decoration: none;
}

#tabArea #inActiveTab a:active   {
    text-decoration: none;
}

#tabArea #inActiveTab a:hover   {
    text-decoration: none;
}

#tabArea #activeTab {
	background-image: url("/images/tabs/tabActiveLeft.gif");
}

#tabArea #activeTab a {
    padding-bottom: 4px;
    text-decoration: none;
    background-image: url("/images/tabs/tabActiveRight.gif");
}

#tabSpacer{
    width: 100%;
    border-top: 1px solid #d7dee4;
    padding: 10px 0px 0px 0px;
    margin: 0px;
    clear: both;
}
/* ---------- END OF TABS ----------- */





/* ---------- UPPERMENU ---------- */
#upperMenuImageArea{
    clear: both;
    height:35px;
}

#upperMenuContent {
    padding: 1px 5px 1px 5px;
    background: url("../images/upperMenu/upperMenuWideBlue.gif");
    clear: both;
}

#upperMenuContent table {
    background: none;
}

#upperMenuContent table td {
    padding: 1px;
    height: 100%;
}

.upperMenuSelectLong {
    width: 100%;
}

#upperSubMenu {
    width: 100%;
    line-height: normal;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    clear: both;
    padding: 10px 0 0 0;
}

#upperSubMenuContainer {
    background: url("../images/upperMenu/upperSubMenuHeaderBackground.gif") repeat-x top;
    padding: 0 0 0 0;
    height: 27px;
    margin:0;
    clear:both;
}

#upperSubMenu ul {
	margin: 0;
	list-style: none;
    padding:0 0 0 10px;
}

#upperSubMenu li {
    padding: 6px 4px;
    background: url("../images/upperMenu/upperSubMenuHeaderBackground.gif") repeat-x top;
    position: relative;
    display: inline;
    float: left;
}

#upperSubMenu li ul {
    margin: 0;
	padding: 0;
    position: absolute;
	top: 27px;
	left: -7px;
    width: 200px;
    display: none;
    z-index: 999 !important;
}

#upperSubMenu ul li ul li{
    display: block;
    margin: 0;
    padding: 3px 4px 3px 4px;
    border: solid #ffffff;
    border-width: 0 1px 1px 1px;
    float: left;
    width: 100%;
    background: #31435b url("../images/upperMenu/upperSubMenuItemBackground.gif") repeat-x;

}

/*hack for IE*/
#upperSubMenu li:hover ul, #upperSubMenu li.over ul {
	display: inline;
}

#upperSubMenu ul li a {
	text-decoration: none;
	color: #ffffff;
    padding: 5px;
}

/* ---------- END OF UPPERMENU ---------- */




/* ---------- FOOTER ---------- */
#footerSpacer{
    margin:0;
    padding:0;
    height: 20px;
}

#footerContainer {
    width: 1000px;
    height: 30px;
    position:fixed;
    bottom:0;
    margin: 30px 0 0 0;
    padding: 4px 0 1px 0;
    background-color: #ffffff;
    vertical-align: bottom;
}

#footerArea{
    background: #f4f5f7;
    margin:0;
    border: 1px solid #d7dee4;
    height: 25px;
}


#footerContainer span.footerLeft {
    width: auto;
    float: left;
}

#footerContainer span.footerRight {
    width: auto;
    float: right;
    padding:5px;
}
/* ---------- END OF FOOTER ---------- */




/* ----------- LEGEND AREA ----------- */
#legendArea {
    border: 1px solid #d7dee4;
    border-top: 0;
    padding: 1px;
}

#legendArea ul {
    padding: 0px;
    margin: 10px 10px 10px 0;
    list-style: none;
}

#legendArea ul li {
    display: inline;
    margin-left: 20px;
}

#legendArea img {
    padding-right: 5px;
}
/* ----------- END OF LEGEND AREA ----------- */





/* ---------- IFRAME ---------- */
.iframeContainer {
    width: 100%;
}

iframe.contentFrame {
    width:  100%;
    height: 200px;
}
/* ---------- END OF IFRAME ---------- */





/* ---------- CALENDAR ---------- */
#calendarContainer {
    border: 1px solid #c5d3da;
    padding: 1px;
    font-size: 12px;
    background-color: #f0f3f5;
    text-align: center;
}

#calendarDaysContainer {
    border: 1px solid #c5d3da;
    padding: 1px;
}

.calendarHeader {

}

.calendarWeekHeader {
    background-color: #acb8c6;
    font-weight: bold;
}

.calendarWeekDay {
    background-color: #e0e8ec;
}

.calendarWeekendDay {
    background-color: #c5d3da;
}

.calendarOtherDay {
    background-color: #f0f3f5;
}

.calendarMouseOverDay {
    background-color: #99adbd;
    color: #ffffff;
}

.calendarToday {
    background-color: #ffffff;
}

.calendarSelectedDay {
    background-color: #acb8c6;
}

.calendarFooter {

}
/* ---------- END OF CALENDAR ---------- */

.tooltip {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #FBF6DF;
    border: solid 1px black;
    padding: 3px;
    color: black;
}


#layoutContainer{
    width: 1000px;
    text-align: left;
    padding: 0px;
    margin: 0 auto 0 auto;
}

/* ---------- MAP INFORMATION TOOLTIP SPECIFIC ---------- */

#mapInfoWindow{
    width: 150px;
}
#mapInfoWindow_contents{
    background-color: #FFFFFF;
}
#mapInfoWindow_beak{
    width: 1px;
    height: 10px;
}

#mapInfoWindow_tl,#mapInfoWindow_tr, #mapInfoWindow_bl, #mapInfoWindow_br,
#mapInfoWindow_t,#mapInfoWindow_l,#mapInfoWindow_r,#mapInfoWindow_b{
    height: 1px;
    width: 1px;
}

/* ---------- MAP INFORMATION TOOLTIP SPECIFIC ---------- */

/* ---------- PORTAL LAYOUT SPECIFIC ---------- */

#layoutContainerPortal {
    width: 510px;                                 /*the width of the portal layout*/
    text-align: left;                             /*this is the same as for the layoutContainer definition*/
    padding: 0;                                   /*this is the same as for the layoutContainer definition*/
    margin: 0 auto 0 auto;                        /*this is the same as for the layoutContainer definition*/
}


#layoutContainerPortal #loadingIndicatorImage {
    margin-left:520px;                            /*the width of the portal layout + 10 px */
}

#layoutContainerPortal #contentWithAdvertising {
    width: 510px;                                 /*the width of the portal layout*/
}

#layoutContainerPortal #footerContainer {
    width: 510px;                                /*the width of the portal layout*/
}

#layoutContainerPortal #contentMapResults {
    width: 510px;                                /*the width of the portal layout*/
}

#layoutContainerPortal #contentMap {
    width: 100%;                                 /*the width of the location search map for portal layout*/
}

#layoutContainerPortal select.large {
    width: 205px;                                /*the width of the large select for portal layout,
                                                   if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 205px*/
}
#layoutContainerPortal input.large {
    width: 205px;                                /*the width of the large input for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 205px*/
}

#layoutContainerPortal input.mediumLarge {
    width: 156px;                                /*the width of the medium large input for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 156px*/
}

#layoutContainerPortal select.mediumLarge {
    width: 156px;                                /*the width of the medium large select for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 156px*/
}

#layoutContainerPortal #contentAdvertising {
    display: none;                               /*because the layout is smaller the advertising will not be shown
                                                    or will have a width equal to width of layoutContainerPortal minus width of contentWithAdvertising*/
}


#layoutContainerPortal input.small  {
   width:40px;                                 /*the width of the small input for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 40px*/
}

#layoutContainerPortal select.small {
   width:45px;                                /*the width of the small select for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 45px*/
}

#layoutContainerPortal input.messageToHotelLarge {
    width: 360px;                             /*the width of the message to hotel select on new reservation for portal layout,
                                                    if the layoutContainerPortal is smaller than 570 then this should be also smaller,
                                                   for example for layout of 510px this should be 360px*/
}

#layoutContainerPortal .mediumSliderStep {
    padding-left: 21px;/*for location*/    
}

#layoutContainerPortal .mediumSlider{
    margin-left: 5px; /*for location*/
    width: 165px;
}
/* ---------- PORTAL LAYOUT SPECIFIC ---------- */