/* CSS Document */

body {
	text-align:center; /* Center #page */
	background-color: #DCDEDC;
	padding-bottom: 30px; /* Make some space between #page and the end of the page */
	}
	
body div {
	text-align:left; /* #page is the only thing which we want to be centered */
	padding: 0 0 0 0; /* Should be default, but to be sure... */
	}
	
	/* The main div which is parent to all other divs on the page. */
	#page {
		position:relative;
		width: 760px;
		background-color:#FFFFFF;
		border: #CCCCCC 1px solid;
		}
	
		#header {
			margin-left:0px;
			margin-right:0px;
			}
		
			/* The thick red border at the top of the page */
			#header #headertop {
				height:100px;
				background-color: #FFFFFF;
				border-bottom: solid 1px #CCCCCC;
				}
			
			/* A top menu */
			/*#header #headermenu {
				height: 20px;
				padding-left: 20px;
				padding-top: 3px;
				border-bottom: solid 1px #CCCCCC;
				}
			*/
			#header #headermenu {
				height: 20px;
				background-color: #EBEBEB;
				padding: 1px 0 3px 20px;
				/*border-bottom: solid 1px #CCCCCC;*/
				}
		/* Holds the leftmenu */
		#left {
			margin-left: 0;
			width:120px;
			float: left;
			}
			
			#left #lefttop {
				height:70px; /* Should be the same height as "#content .title" further down. */
				border-bottom: #990000 2px solid; 
				clear: both;
				/*border-right: 0px solid grey;*/
				}
			
			/* Left menu. (The main menu) */
			#left #leftmenu {
			width: 120px;
				}
			
		/* #content is the big div in the middle where the title and the content are presented*/
		#content {
			/* Make #content flexible. #content uses the width which is left of the total width of #page when #left and #right has taken their width. */
			margin-top: 0;
			margin-left: 120px; /* Should be the same as the width of #left (+ padding) */
			margin-right: 138px; /* Should be the same as the width of #right (+ padding) */
			/*float: left; */
			border-left: #CCCCCC 1px solid;
			border-right: #CCCCCC 1px solid;
			padding: 0;
			
			}
			/* For images which is wanted "in the text", on the left side. */
			#content div div #floatleft{
			margin: 3px 10px 0 0; /*Margin-right and some margin-top to get in line with the text. */
			float: left;
			}
			#content div div .floatleft{
			margin: 3px 10px 0 0; /*Margin-right and some margin-top to get in line with the text. */
			float: left;
			}
			/* If top and bottom margins are wanted just add another layer inside #floatleft. */ 
			#content div div #floatleft div{
			margin: 10px 10px 10px 0; /*No margin-left */
			float: left;
			}
			#content div div .floatleft div{
			margin: 10px 10px 10px 0; /*No margin-left */
			float: left;
			}
			/* For images which is wanted "in the text", on the right side. */
			#content div div #floatright{
			margin: 3px 0 0 10px; /* Margin-left and some margin-top to get in line with the text. */
			float: right;
			}
			#content div div .floatright{
			margin: 3px 0 0 10px; /* Margin-left and some margin-top to get in line with the text. */
			float: right;
			}
			/* If top and bottom margins are wanted just add another layer inside #floatright. */ 
			#content div div #floatright div{
			margin: 10px 0 10px 10px; /* No margin-right */
			float: right;
			}
			/* For "fullwidth" images which may not be fullwidth sometimes (and should be centered). */
			#content div div #center{
			margin: 10px 0; /* Only margin-top and margin-bottom. */
			text-align: center;
			}
			/* A border from side to side */
			#content div div .pagebreak{
			margin: 10px 0; /* Pretty close to the sides, but not all the way. Some more space up and down. */
			border-top: dashed #CCCCCC 1px;
			}
			
			/* Here goes the title*/
			#title {
				height:48px; /* Should be the same height as "#left .top" further up - the padding some rows further down. */
				/*border-bottom: #DD0000 2px solid;*/
				/*padding-top: 25px;*/
				padding:0;
				margin: 0;
				/*float: left; Pretty bad solution for the red border problem */
				}
			
			/* The title font. Not placed in text.css because it should not be used on the intro page (where another layout-css-file is used) */
			.title {
				font-family: arial, verdana;
				font-size: 35px;
				font-weight: bold;
				color: #990000;
				/*vertical-align: text-bottom;*/
			}

			
			#titleunderline {
				margin: 0;
				background-image:url(/jpg/titleunderlinegra.jpg);
			}
			/* Here goes the content */
			#content #feature {
				margin: 0;
				/*margin-top: 5px;*/ /* Otherwise the gray, dotted border will get to close to the red border */
				/*border-top: #990000 2px solid;*/
				
				/*float: left; */
				}
				#content #feature #output{
					padding-top: 12px;
					padding-right: 15px;
					padding-left: 15px;
					padding-bottom: 15px;
					margin-left: 0;
					margin-right: 0;
					margin-top: 0px; /* Otherwise the gray, dotted border will get to close to the red border */
					margin-bottom: 3px; /* Otherwise the gray, dotted border will get to close to the footer */
					/*border-left: #CCCCCC 1px dotted;
					border-right: #CCCCCC 1px dotted;*/
					/*float: left; */
					}
		
		/* #right is the div to the right side of #content where highlighs and related links are placed. */
		#right {
			float: right;
			width: 130px;
			padding-top: 10px; /* = The height of "#left .top" and "#content .title" + 10px */
			padding-right: 2px;
			padding-left: 10px;
			}
		.rightredarea { /* Used as class on div */
			margin-left: 0;
			margin-right: 3px;
			/*height: 18px;*/
			padding: 3px 0 4px 4px;
			background-image:url(/jpg/buttongra.jpg);
			background-color: #990000;
			/*border-bottom: 2px solid #FFFFFF;*/
		}
		.rightgrayarea {
			margin-left: 0;
			margin-right: 3px;
			padding-top: 2px;
			padding-left: 4px;
			padding-bottom: 3px;
			/*background-image:url(/jpg/grayareagra.jpg);*/
			background-color: #EBEBEB;
		}
						
		/* 	A kind of a border at the of the #page-div where a short copyright text should be written. */
		#footer {
			background-color: #CCCCCC;
			padding-top: 4px;
			/*height: 20px;*/
			margin-left: 0;
			margin-right: 0;
			clear: both;
			
			}
			
		/* Puts a nice light gray border around the text input fields. */
		.input {
			border: 2px gray solid;
		}
		
		
/* Login box --------------------------------------------------------------------------------- */
.LoginBoxTop {
	width:320px; 
	height:19px;
	padding-top:5px;
	background-image:url(/gif/customerzone/loginboxtop.gif); 
	background-position:center;  
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:bold; 
	color:#FFFFFF; 
	text-align:center; 
}
.LoginBoxBottom {
	width:320px;
	background-image:url(/gif/customerzone/loginboxbottom.gif); 
	background-position:bottom; 
	background-repeat:no-repeat; 
	background-color:#F4D0D0;
	text-align:center; 
}

/* VPA-RX models list and detailspage styles ------------------------------------------------- */

/* List */
.ModelListBox {
	width: 450px;
	margin: 5px 0px 5px 0px;
	padding: 5px 0px; 
	text-align:left; 
	/*border-top: 1px dotted #dcdedc;*/
	float: none;
	/*clear: both;*/
	/*border: black 1px solid;*/
}
.ModelListFeatures {
	/*float:left;*/ 
	width:470px;
	vertical-align:text-top;
	/*border: blue 1px solid;*/
}
.ModelListFeaturesListMargins {
	margin: 8px 5px 10px 30px;
}
.ModelListImage {
	padding-left: 10px;
	width:290px;
	/*border: green 1px solid;*/
}

/*Details*/
.ModelInfoBox {
	width: 470px;
}
.ModelInfoBoxTopLeft {
	background-color: #ebebeb; 
	width: 20px; 
	height: 35px; 
	float: left;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid black;
}
.ModelInfoBoxTopRight {
	background-color: #ebebeb;  
	height: 35px; 
	float: left; 
	font-size:1px;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid black;
}
.ModelInfoBoxFlapStyle {
	background-color: #ebebeb; 
	padding: 0px 0px 11px 0px; 
	height: 25px; float: left; 
	text-align:center;
	cursor: pointer;
}
.ModelInfoBoxFlapStyle:hover {
	background-color: #CCCCCC; 
}
/*.ModelInfoBoxFlapStyle {
	background-color: #ebebeb; 
	padding: 10px 15px 0 15px; 
	height: 25px; float: left; 
	text-align:center;
	cursor: pointer;
}*/
.ModelInfoBoxFlapOverlayStyle {
	background-color: transparent; 
	padding: 10px 15px 0px 15px; 
	height: 25px;
	text-align:center;
	cursor: pointer;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid black;
}
.ModelInfoBoxContent {
	margin: 8px 0 0 18px;
}

.ModelHighlightListStyle {
	margin: 2px 8px 0px 21px;
	list-style-image: url(/gif/redarrow.gif);
}
.ModelHighlightSubListStyle {
	margin: 2px 8px 0px 15px;
	/*padding: 0;*/
	list-style-image: url(/gif/blackline.gif);
}

/* Q&A styles -------------------------------------------------------------------------------- */

.CategoryList {
	margin-top: 0px; 
	margin-bottom: 10px;
	margin-left: 25px; /* Will be changed depending on sub category level of the question. */
	list-style: none;
	text-align: left;
}
.QuestionsList {
	margin-top: 0px; 
	margin-left: 25px; /* Will be changed depending on sub category level of the question. */
	list-style: disc;
	text-align: left;
	padding: 0;
}
/* .DisplayAnswer - For the div in which a selected question and the corresponding answer is shown. */
.DisplayAnswer { 
	padding: 20px 10px;
	border-bottom: 1px dotted #CCC;
	/*margin-bottom: 20px; Removed because it didn't seem to be reliable*/
}

/* Contact us -------------------------------------------------------------------------------- */

.CompanyList {
	margin: 0; 
	padding: 10px; 
	background-color:#F4F4F4;
}

/* Table styles ------------------------------------------------------------------------------ */
.td {
border-bottom: #CCCCCC dotted 1px;
}
.tdbold {
	border-bottom: #CCCCCC dotted 1px;
	font-weight:bold;
}
.tdfat {
	border-bottom: #CCCCCC dotted 2px;
}
.tdfatbold {
	border-bottom: #CCCCCC dotted 2px;
	font-weight:bold;
}

.noborder {
	border: 0px white solid;
	margin:0;
}

/* Misc ---------------------------------------------------------------------------------------*/

/* Placement and layout of quotes floating to the left of the text */
.LeftQuote {
	float: left;
	width: 130px;
	padding: 10px 20px 10px 2px;
}

/* Placement and layout of quotes floating to the right of the text */
.RightQuote {
	float: right;
	width: 130px;
	padding: 10px 2px 10px 20px;
}

.CompactList {
	margin-top: 8px; 
	margin-left: 25px;
	list-style:circle;
}