#google_translate_element{
	float:right;padding:2px 0 0 0;
    height:20px;
    margin-bottom:3px; padding-right:12px;
    color:#666;
}
#google_translate_element img{
    display:inline;
}
#google_translate_element .goog-te-gadget-icon{
	display:none;
}
.goog-te-gadget-simple{
	display:inline-block;
    border:1px
	solid #9b9b9b;
    padding:4px 0;
    background:#d7d7d7;
    color:#666;
    font:bold 10px/10px Helvetica, Arial, sans-serif;
    cursor:pointer;
}
.goog-te-gadget-simple 
.goog-te-menu-value{
	color:#666;
    text-decoration:none;
}

* {
    margin: 0;
}

html {
    height: 100%;
}

BODY {
	height: 100%;
    margin:0px; 
   	text-align: center;
}

@media only screen and (max-width: 768px) {
	.navbar{
		height:10%;
	}
	.navbar-brand img{
		margin-top:-8px;
		height:140%;
	}
}

#container {
	position:relative;
	width:100%;
    margin-top:15px;
}

#site {
	position:relative;
 	width:961px;
	margin:0px;
}

#content {
	width:952px;
	float:left;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
}

div.disabled {
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

#container3 {
	clear:left;
    float:left;
	width:952px;
	overflow:hidden;
   	margin-left:4px;
	background:url('https://customersupport.etslogistics.nl/imgs/left.png') left repeat-y;
}

#container2 {
	clear:left;
	float:left;
	width:952px;
	position:relative;
	left:25px;
}

#container1 {
	float:right;
	width:25px;
	position:relative;
	right:25px;
    background:url('https://customersupport.etslogistics.nl/imgs/right.png') right repeat-y;
	
}

#actualContent {
	float:left;
	width:902px;
	position:relative;
	left:-902px;
	overflow:hidden;
    min-height:300px;
    background-color:#fff;
}

#trButton {
	background-color:#fff;
    border-top:thin solid #333;
}
#trButton:hover {
	background-color:#999;
    cursor:pointer;
}

#button {
	background:url('https://customersupport.etslogistics.nl/imgs/button.png') no-repeat; 
	float:left; 
	width:172px; height:59px;
	padding-top:20px; margin-bottom:-20px;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	text-shadow: #000000 1px 1px;
	color:#FFFFFF; 
	font-weight:bold; }
#button:hover {
	background:url('https://customersupport.etslogistics.nl/imgs/button_h.png') no-repeat; cursor:pointer;
}

#numButton {
	background:url('https://customersupport.etslogistics.nl/imgs/numButton.jpg') no-repeat; 
	float:left; 
    overflow:auto;
	width:18px; height:19px;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	text-shadow: #000000 1px 1px;
    margin-right:-5px;
    padding-left:5px; padding-top:2px;
	color:#FFFFFF; 
	font-weight:bold; }
#numButton:hover {
	background:url('https://customersupport.etslogistics.nl/imgs/numButton_o.jpg') no-repeat; cursor:pointer;
}

#inbound {
	background:url('https://customersupport.etslogistics.nl/imgs/inbound_bg.jpg') repeat;
    border:1px solid #abadb3;
    padding:3px;
    margin-left:2px;
    margin-top:2px; margin-bottom:2px;
    height:150px;
    overflow-y:scroll;
}

#communicatie {

    border:1px solid #abadb3;
    padding:3px;
    margin-left:2px;
    margin-top:2px; margin-bottom:2px;
    max-height:500px;
    overflow:auto;
}

#klantCommunicatie {
    background:#4fc500;
    width:51%;
    float:left;
    border:thins dashed #333;
    margin:5px;
    overflow:auto;
    padding:3px;
    -moz-border-radius: 5px;
	border-radius: 5px;
}
#adminCommunicatie {
    background:#35a0d1;
    width:51%;
    float:right;
    border:thins dashed #333;
    margin:5px;
    overflow:auto;
    padding:3px;
   	-moz-border-radius: 5px;
	border-radius: 5px;
}

#prijsopgaaf {
	background:url('https://customersupport.etslogistics.nl/imgs/inbound_bg.jpg') repeat;
    border:1px solid #abadb3;
    padding:3px;
    margin-left:2px;
    margin-top:2px; margin-bottom:2px;
    height:200px;
    overflow-y:scroll;
}
#foto {
   	padding:3px;
    margin-left:2px;
    margin-top:2px; margin-bottom:2px;
    min-height:150px;
    min-width:200px;
}

#img {
	width:256px; height: 192px; margin:5px;
}

a{text-decoration:none;}
H1 { font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	color:#000000;
}

#title { font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	color:#000000;
}

#txt {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#000000;
}	

.required{
	color:#ff0000;
}

#mainForm 
{
	position: relative;
	border: 1px;
	border-style: solid;
	margin: 0 auto;
	text-align: left;
	width: 60%;
	background-color: #ffffff;

}

ul.mainForm
{
	list-style-type: none;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size:15px;	
}

li.mainForm
{
	padding-bottom: 10px;
}


#mainFormError
{
	position: relative;
	border: 1px;
	border-style: solid;
	margin: 0 auto;
	text-align: left;
	width: 70%;
}



input.mainFormError
{
	background-color: #FADADD;
}


textarea.mainFormError
{
	background-color: #FADADD;
}


select.mainFormError
{
	background-color: #FADADD;
}


#formHeader
{
	position: relative;
	width: 100%;
	background-color: #303030;
	margin:0 0 0 0;
	padding-bottom: 10px;
}

p.formHeader
{
	text-align: right;
	margin:0 0 0 0;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-weight:normal;
	color: #ffffff;
	font-size:25px;
	position:relative;
	left:-5px;
	top:4px;
	letter-spacing: 2px;
}



#formInfo
{
	position: relative;
	width: 100%;
	background-color: #ffffff;
	margin:0 0 0 0;
}

h2.formInfo
{
	text-align: left;
	margin:0 0 0 0;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-weight:normal;
	font-size:20px;
	position:relative;
	left:20px;
	top:0px;
	letter-spacing: 1px;
	line-height:150%;
	color: #ffffff;
}


p.formInfo
{
	text-align: left;
	margin:0 0 0 0;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-weight:normal;
	color: #000000;
	font-size:12px;
	position:relative;
	left:20px;
	top:0px;
	color: #ffffff;
}

#formFields
{
	position: relative;
	width: 100%;
	background-color: #ffffff;
	margin:0 0 0 0;

}

label.formFieldQuestion
{
	line-height:125%;
	padding:0 4px 1px 0;
	border:none;	
	display:block;
	size:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}

label.formFieldOption
{
	font-size:90%;
	display:block;
	line-height:1.0em;
	margin:-19px 0 0 25px;
	padding:4px 0 5px 0;
	width:90%;
}

/* tooltip */
a.info {
	font-family: Tahoma, Arial, Sans-Serif;
	text-decoration:none; 
	position: relative;
}

a.info span {
	position: relative;
	display:none;
}

a.info:hover {
	position: relative;
	cursor:default;
}

a.info:hover .infobox {
	font-weight: normal; 
	display:block; 
	position:absolute; 
	top:20px;;
	left:25px;
	width:205px; 
	height:70px; 
	border: 1px solid #ccc; 
	background:#f4f4f4 url(question.gif) no-repeat bottom right; 
	color:#000; 
	text-align:left; 
	font-size:0.7em; 
	padding-left:10px; 
	padding-top:10px;
}

/* pop-up calendar */
button.calendarStyle
{
	background-color: transparent;
	border: 0;
	height:22px;
	width:22px;
	background-image:url(imgs/calendar.png);
	cursor: pointer;
	cursor: hand;
}


p.footer
{
	text-align: right;
	margin:0 0 0 0;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-weight:normal;
	color: #ffffff;
	font-size:9px;
	position:relative;
	top:4px;
	left:-140px;
	letter-spacing: 2px;
}

a.footer
{
	text-align: right;
	margin:0 0 0 0;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-weight:normal;
	color: #ffffff;
	font-size:9px;
	position:relative;
	top:4px;
	letter-spacing: 2px;
}

dl {
	font:normal 12px/15px Arial;
    position: relative;
    width: 350px;
}
dt {
    clear: both;
    float:left;
    width: 130px;
    padding: 4px 0 2px 0;
    text-align: left;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
}


#errormsg { 
	color:#FF0000;
	font-weight:bold;
	font-size:14px;
}

#succesmsg { 
	color:#009900;
	font-weight:bold;
	font-size:14px;
}


.mainButton {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background-color:#f9f9f9;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
    overflow:auto;
    padding:0 10px 0 10px;
    cursor:pointer;
}
.mainButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background-color:#e9e9e9;
}.mainButton:active {
	position:relative;
	top:1px;}


.smallButton {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background-color:#f9f9f9;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
	text-align:center;
    overflow:auto;
    padding:3px;
    float:left;
    margin-top:-1px;
}
.smallButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background-color:#e9e9e9;
    cursor:pointer;
}


/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    width: 400px;
    margin-top: -4px;
	margin-left:20px;
    border: 1px solid #c93;
    padding: 10px 12px;
	z-index:2;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url('https://customersupport.etslogistics.nl/scripts/formFieldHits/pointer.gif') no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
	z-index:2;
    background: url('https://customersupport.etslogistics.nl/scripts/formFieldHits/pointer.gif') left top no-repeat;
}

#stdButton {	background:url('https://customersupport.etslogistics.nl/imgs/stdButton/bgcolor_blue.jpg') repeat-x;
				height:62px; float:left;}
#stdButton:hover {background:url('https://customersupport.etslogistics.nl/imgs/stdButton/bgcolor_blue_o.jpg') repeat-x;}

thead{
	font-weight:bold;
	background-color:#e7e7e7;
}


#fields {
	background-color:#999;
	float:left;
	padding-top:5px;
}
$fields div{
	margin-top:4px;
	padding:0px;
}