﻿@import url('opensans.css');
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
    background-color: #fff;
    font-size: .85em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #333;
	text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

a, a:visited, a:link
{
	color: #000000;
	text-decoration: none;
}

a:hover
{
	color : #666666;
}
    
p
{
    margin-bottom: 20px;
    line-height: 1.3em;
}

a img
{
	border : 0px solid #000000;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h1 a, h1 a:visited, h1 a:active, h1 a:hover
{
	font-family: 'Open Sans', sans-serif;
	font-size: 1.4em;
	text-decoration: none;
	padding-bottom : 15px;
}

h2, h2 a, h2 a:visited, h2 a:active, h2 a:hover, .touchChooseTD, .kvhPPS
{
	font-size: 1.2em;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

h3, h3 a, h3 a:visited, h3 a:active, h3 a:hover
{
    font-size: 1.1em;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	margin: 15px 0 8px 0;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */

#footer, #subFooter
{
    padding: 0;
    text-align: right;
    line-height: normal;
    margin: 0;
    clear: both;
    font-size: 8px;
}

#footer
{
    padding: 10px 0;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

input, textarea 
{
    border: 0px solid #CCC;
    background : #f2f2f2;
    color: #333;
    padding: 4px;
    font-family: 'Open Sans', sans-serif;
}

.trOdd input, .trOdd textarea, .boxOdd input, .boxOdd textarea {
    background : #fff;
}

input[type="submit"], input[type="image"], .submitLink
{
    font-family: 'Open Sans', sans-serif;
    border : 0px solid #ffffff;
    font-weight : bold;    
    color: #000000;
    vertical-align: middle; 
    margin: 0 0 2px 0;
    background-color: transparent;
}

input[type="checkbox"], input[type="radio"]
{
    border: 0px solid white;       
    background-color:Transparent;
}

.submitLinkLegend
{
    font-family: 'Open Sans', sans-serif;
    font-weight : bold;    
    color: #000000;
    padding-right: 10px;
}

input.file
{
    border: 0px solid #fff;
    background-color: Transparent;    
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 0px #e8eef4;
}

table td 
{
  border: solid 0px #e8eef4;
}

td img, th img, .weekDropDiv
{
	vertical-align: middle;
}

#planningTable td, #planningTable th, .weekDropDiv, 
#planningDayPrint td, #planningDayPrint th, 
#planningSearch td, #planningSearch th, 
#relatedBookingTable td, #relatedBookingTable th, 
#publicGuidingParticipantList td, #publicGuidingParticipantList th, 
#bookingExchangeTable th, #bookingExchangeTable td,
#systemParameterTable th, #systemParameterTable td,
#connectedTopics th, #connectedTopics td,
#connectedLocations th, #connectedLocations td,
#connectedAttachments th, #connectedAttachments td,
#billingContent th, #billingContent td,
#customerResultList th, #customerResultList td,
#bookingStatusErrorTable th, #bookingStatusErrorTable td,
#roomPlanningTable td, #roomPlanningTable th,
#availableRoomTopicSlots td, #availableRoomTopicSlots th
#alternativeRoomBox td, #alternativeRoomBox th,
#trashTable td, #trashTable th
{
  padding: 5px 1px 5px 0;   
}

#searchTBL td img
{
    padding: 0 5px 0 5px;     
}

.trEven td
{
	background-color: #fff;
	border : 0px solid #ccc;
	text-align: center;
	vertical-align: middle;
}

.trOdd, .trEven
{
	vertical-align: top;    
}

.trOdd td
{
	background-color: #efefef;
	border : 0px solid #ccc;
	text-align: center;
	vertical-align: middle;
}

.trHighlight td
{
    background-color: #fde3ae;
}

table th, .weekDropDiv
{
    /*background-image: url(/Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    color : #fff;
    width: 100%;
    text-align: center;
}

#bookingStatusErrorTable th
{
    background-image: url(/Content/Images/tr_back_red.gif);
    background-repeat: repeat-x;
    /*background-color: #f8a600;*/
    color : #fff;
    width: 100%;
    text-align: center;    
}

.shipDay th
{
    background-image: url(/Content/Images/tr_back_ship.gif);
    background-repeat: repeat-x;
    /*background-color: #f8a600;*/
    color : #fff;
    width: 100%;
    text-align: center;
}

/* MISC  
----------------------------------------------------------*/

#mainContainer
{
    width: 1294px;   
    margin: 0 auto; 
}

#printContainer
{
    width: 790px;   
    margin: 0 auto; 
}

#contentContainer, #contentContainerCastle
{
    min-height: 370px;
    margin: 10px 0 0 0;
}

#header
{
    text-align: left;   
    margin : 10px auto; 
    margin-bottom: 10px;
    height: 50px;
}

#showHeader
{
    background-image: url(../../Content/Images/showHeader.png);
    background-repeat: no-repeat;
    width: 270px;
    height: 28px;
    position: absolute;
    margin: -10px 0 0 890px;
    z-index: 200;
    padding: 2px 0 0 10px;
    cursor: pointer;
}

#headerPrint
{   
    width: 900px;
    text-align: left;   
    margin : 20px auto; 
    margin-bottom: 20px;
}

#header ul, #headerPrint ul
{
    padding: 0;
    margin: 0;
    line-height: 1em;    
    font-size: .9em;
}

#header li, #headerPrint li
{
    /*display: inline; */
    list-style: none;
    padding: 4px 25px 8px 25px;
}

#header li a
{
	color: #747474;    
}

#header li a:hover, #sysParamterMenu li a:hover
{
	color: #0088d2;    
}

#headerPrint li a
{
    color: #fff;
}

#headerPrint li a:hover
{
	color: #fff;    
}

#footer, #additionalInfoView, #detailInformationView
{
    margin : 40px 0 0 0;
}

.errors li
{
    color: #e20513;
	font-size: .8em;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	list-style-image: url(../../Content/Images/info.gif);
	vertical-align: middle;   
}

.errors
{
    padding: 0 0 0 30px;   
}

.loginTBL
{
    margin: 25px 0;    
}
    
.logout
{
    text-align: right;
    margin: 41px 2px 0 0;
    font-weight: 600; 
    font-size: 9px;
    position: absolute;
    width: 1042px;
}

#login
{
    float: left;    
    width: 680px;  
    padding-top: 60px;
}

#menu
{
    float: left;
    position: absolute;
    z-index: 100;
    color: #747474;  
}

#menu ul
{
    padding: 8px 0 0 0;
}

#logo
{
    text-align: right; 
    float: right; 
    height: 25px;
    width: 1294px;
    position: absolute;
}

#loginName
{
    text-align: right; 
    clear: both;    
}

.dContainer, .sdContainer
{
    width: 184px;
    margin: 0;   
    min-height: 900px;
    float: left;
}

.dContainerTD
{
    width: 550px;
    margin: 0;  
}

.sdContainer
{
    width: 550px;
}

.sdContainerTD
{
    width: 548px;
    margin: 0;  
}

.infoContainerTD
{
    width: 518px;
    margin: 0;  
}

.weekDropDiv
{
    width: 100px;
    font-weight: 600;
    float: left;
    padding: 8px 2px 8px 2px; 
    margin: 7px 2px 4px 2px;
}

.inactiveDrop
{
    background-color: #efefef; 
    background-image: none;
    color: #cccccc;
    width: 100px;    
    padding: 8px 2px 8px 2px; 
    margin: 7px 2px 4px 2px;
}

.onlyScreenDisplay
{ }

.onlyPrintDisplay
{
    display: none;
}

.bookingForm td
{
    font-size: .9em;
	background-color: transparent;
	border : 0px solid #fff;
	text-align: left;
	padding: 2px;
	margin: 0px;
}

.bookingForm tr
{
    padding: 0px;
    margin: 0px;
}

#bookingInfoBackground
{
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    width: 100%; 
    height: 400%; 
    background-color: #111; 
    opacity: .6;
    filter:alpha(opacity=60);
}

#bookingInfo
{
    display: none;
    position: absolute; 
    z-index: 200; 
    top: 60px;
    margin: 0 235px 0 235px;
    padding: 10px 35px 25px 35px; 
    width: 760px; 
    min-height: 648px; 
    background-color: #fff;    
}

#bookingInfoHideBox
{
    display: none;
    position: absolute;
    z-index: 200;
    top: 0;
    margin: 0 0 0 860px;
    width: 160px;
    height: 14px;
    background-image: url(../../Content/Images/tr_back_blue.gif);
    background-repeat: repeat-x;
    font-weight: bold;
    text-align: center;
    padding: 8px 2px 8px 2px; 
    cursor: pointer;
    color: #fff;
    font-size: .9em;
}

#bookingInfo h3
{
    margin-bottom: 15px;
}

.small
{
    font-size: .85em;  
}

.commentary
{
    color: #000;
}

.red
{
    font-weight: 600;
    color: #e20513;    
}

.grey
{
    color: #bcbcbc;    
}

.inactiveType, .inactiveShipType
{
    /*background-image: url(../../Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #A9A9A9;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.highlightType {
    /*background-image: url(../../Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #ffa500;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left;
    padding: 8px 2px 8px 2px;
    margin: 4px 2px 4px 2px;
}

.bookingStatusError
{
    background-image: url(../../Content/Images/tr_back_red.gif);
    background-repeat: repeat-x;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.clearWeekHeaderBox
{
    background: none;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.activeType
{
    /*background-image: url(../../Content/Images/tr_back_blue.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.activeShipType
{
    /*background-image: url(../../Content/Images/tr_back_blue.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.inactivePos {
    /*background-image: url(../../Content/Images/tr_back_grey.gif);
    background-repeat: repeat-x;*/
    background-color: #A9A9A9;
    width: 78px;
    font-weight: 600;
    text-align: center;
    padding: 8px 2px 8px 2px;
    margin: 4px 2px 4px 2px;
    color: #fff;
    float: left;
}

.activePos {
    /*background-image: url(../../Content/Images/tr_back_grey.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    width: 78px;
    font-weight: 600;
    text-align: center;
    padding: 8px 2px 8px 2px;
    margin: 4px 2px 4px 2px;
    color: #fff;
    float: left;
}


#sysParameterMenu li
{
    list-style: none;
    padding: 5px 0 5px 0;
    font-weight: 600;    
}

#sysParameterMenu
{
    margin: 15px 0; 
    padding: 0;
}

.redLine {
    border-top: 2px solid #e20513;
    margin: 16px 0 16px 0;
    width: 100%;
    height: 2px;
    cursor: help;
}

/*########## Billing ##############*/

#confirmationLogo {
    position: absolute;
    margin: 45px 0 0 440px;
}

#address
{
	height:	100px;
	width: 250px;
	float: left;
	margin: 180px 0 35px 15px;
	padding: 5px;
}

#guideAddress
{
	height: 100px;
	width: 250px;
	margin: 80px 0 35px 540px;
	padding: 5px;
	text-align: center;
	font-size: 1.15em;
}

#billingLogo
{
	height: 120px;
	width: 440px;
	float: left;
	text-align: right;
	vertical-align: top;
	padding: 0;
	margin: 0 0 0 200px;
}

#guideLogo
{
	height: 120px;
	width: 400px;
	float: left;
	text-align: left;
	vertical-align: top;
	padding: 0;
	margin: -60px 0;
}

#billingContent
{
	clear: both;
	height: 400px;	
	width: 750px;
	margin: 0 15px 0 15px;
	font-size: 1em;
}

#billingContent table
{
	 border-collapse: collapse;
	 width: 100%;
	 line-height: 1.4em;
}


.replaceable
{
	min-height: 730px;
	width: 174px;
	background-color: #ddd;
	margin: 64px 0 0 4px;
	position: absolute;
	z-index: 8000;
	opacity: .6;
    filter:alpha(opacity=60);
	text-align: center;
	padding: 10px 0 0 0;
	font-size: .85em;
	font-weight: 600;
}

.removable
{
	height: 50px;
	width: 178px;
	background-color: #0082d2;
	color: #000;
	margin: 0;
	position: absolute;
	z-index: 8500;
	opacity: .6;
    filter:alpha(opacity=60);
	text-align: center;
	padding: 10px 0 0 0;
	font-size: .85em;
	font-weight: 600;
}

.lineseparator
{
	min-height: 800px;
	width: 5px;
	background-color: #0082d2;
	color: #000;
	margin: -10px 0 0 -5px;
	position: absolute;
	z-index: 8500;
	opacity: .6;
    filter:alpha(opacity=60);
	font-size: .85em;
	font-weight: 600;
}

.customerComment, .bookingComment
{ }


/* CSSLOADER ANIMATION  
----------------------------------------------------------*/

#ajaxGraphics {
    text-align: right;
    margin: -64px 0 0 1000px;
    position: fixed;
    width: 60px;
    z-index: 1000;
    display: none;
}

.spinner {
    margin: 0px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #1483C7;
    height: 100%;
    width: 6px;
    display: inline-block;
    -o-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    -ms-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    -moz-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -o-animation-delay: -1.1s;
    -ms-animation-delay: -1.1s;
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -o-animation-delay: -1.0s;
    -ms-animation-delay: -1.0s;
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -o-animation-delay: -0.9s;
    -ms-animation-delay: -0.9s;
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -o-animation-delay: -0.8s;
    -ms-animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-o-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -o-transform: scaleY(0.4)
    }

    20% {
        -o-transform: scaleY(1.0)
    }
}

@-ms-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -ms-transform: scaleY(0.4)
    }

    20% {
        -ms-transform: scaleY(1.0)
    }
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@-moz-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -moz-transform: scaleY(0.4)
    }

    20% {
        -moz-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -o-transform: scaleY(0.4);
        -ms-transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
        -moz-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -o-transform: scaleY(1.0);
        -ms-transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
        -moz-transform: scaleY(1.0);
        transform: scaleY(1.0);
    }
}
