/* A simple Browser Reset */

html,body{
  font-family: Arial, helvetica, sans-serif;
  font-size: 85%;
  background-color: #FFF;
  color: #000;
  margin: 0;
  padding: 0;
  border: 0;			/* This removes the border around the viewport in old versions of IE */
  width: 100%;
  min-width: 600px;		/* Minimum width of layout - remove line if not required */
  line-height: 170%;
}

/* General Layout
________________________________*/

/*
getting the footer always at the bottom of the page
*/

#page{
  min-height: 100%;
  position: absolute;
  min-width: 800px;
  width: 100%;
}

#footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  color: #fff;
  /*z-index: 5;*/
}

#footer p{
  font-size: 60%;
  margin: 0;
  padding: 5px 10px;
  text-align:right;
}

/* Layout is inspired by the holy Grail,
except that the content is wrapped around
a floating div that pull the sidebars.
*/

#content{
  float:left;
  width:100%;
  margin-right:-100%;
}

.column{
  float:left;
  padding: 0px 1% 50px;
  margin-top: 35px;
  /*border: 1px solid red;*/
  z-index: 1;
}

.center{
  padding: 5px 1% 0px;
}

/* -- compensating the padding on sidebars --
multiply the padding of columns by 2, and remove
it from the width of each sidebar.
*/

#left{width:13%;}    /* 20 - (3x2) */
#right{width:17%;}   /* 25 - (3x2) */


/* You can easily change the layout proportions
by just changing the matching values. For example,
to have a 100px left sidebar, I just have to change
all the 220 to 100 (and the -220 to -100).
*/

#content-inner{
  float:none;
  margin-left: 15%;   /* LEFT Sidebar width */
  margin-right: 18%;  /* RIGHT Sidebar width */
  margin-bottom: 35px;
}

.left{
  width: 15%;         /* LEFT Sidebar width */
  margin-right:-15%;  /* LEFT Sidebar width */
}

.right{
  float: right;
  width: 17%;         /* RIGHT Sidebar width */
  padding:  0;    /* padding changed here */
}

#footer, #header{
  clear:both;
  text-align:center;
  font-size:2em;
}

#header{height: 101px;}

/* Equal Height Columns
________________________________*/

/* The columns are created using empty DIV that have to be
inside the main wrapper (#page) and should be positionned
relative. Each DIV have the same width as its corresponding
columns (done by using class), and by postionning them
absolutelly (bottom) and giving them a height of 100%, the
DIVs fill the entire space that the columns should fill.
As the actual content is not positionned absolutelly, the
footer still behave normally and is pushed down by it. Last
but not least, we have to set the z-index of the real
content to 2 to bring it back on top of the columns.
*/

.bg{
  position:absolute;
  bottom:0;
  height:100%;
}

#bgleft{left:0;}

#bgright{right:0;}

#bgcenter{
  right:0;
  width:100%;
}

#content, #left, #right, #header{
  position:relative;
  z-index: 2;
}

/* COLORS */

#header, #footer{background-color: #0093a7;}
#bgleft{background-color:#d7ecff;background-color: #daebeb;}
#bgright{background-color:#e4e3e3;}
#bgcenter{background-color:#fff;}

/* Navigations */

#navTop{
  background-color: #68726b;
  color: #FFF;
 	height: 25px;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
}

#navTop a{
 font-weight: bold;
 width: 94px;
 height: 19px;
 padding-top: 5px;
 float: left;
 text-align: center;
}

#navTop a.border{
  border-right: 1px solid #e4e3e3;
}

#navTop a:link, #navTop a:visited{
  color: #e4e3e3;
  text-decoration: none;
}

#navTop a:hover{
  color: #000;
  text-decoration: none;
}

#left a{
  display: block;
  text-decoration: none;
  margin-bottom: -10px;
}

#left a.title{
  font-family: arial;
}

#left a.indent{
  margin-left: 10px;
}

#footer a{
  color: #fff;
  text-decoration: none;
  font-size: 90%;
}

a{
   /*color: #0093A7;*/
   color: #0092a7;
}

a:link{
}

a:visited{
}

a:active{
}

a:hover{
	/*hover doesn't work in nn4*/
	color: #000;
}

.right a{
  padding-left: 5px;
  text-decoration: none;
}

/*Details*/

/*#details{
  line-height: 24px;
}


#details h1{
  background-color: #666;
  color: #fff;
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 2px 4px;
  width: 100%;
}
*/

#details h1{
  background-color: #FFF;
  color: #000;
  padding: 0;
  margin: 0;
}

#details h2{
  background-color: #0093a7;
  color: #fff;
  background-color: #daebeb;
  color: #0092a7;
  margin: 4px 0;
  padding: 2px 4px;
  width: 100%;
}

#details hr{
	border: none 0;
	border-top: 1px dashed #0093A7;/*the border*/
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
	/*width: 307px;*/
	position: relative;
	left: 0;
}

#details strong{
  color: #333;
}

#details strong.blue{
	font-family: arial, helvetica, sans-serif;
  color: #0066CC;
}

.frameLight{
  /*background-color:#d7ecff;*/
  margin-bottom: 2px;
  /*padding: 2px 4px;*/
  color: #0066CC;
  color: #0092a7;
  font-size: 1.5em;
}

.frameLightShort{
  background-color: #eee;
  background-color: #daebeb;
  color: #0092a7;
  padding: 0 4px;
  font-weight: bold;
}

.frameLightShort2{
  background-color: #eee;
}

strong.blue{
  color: #0066CC;
}

/**/

.right h2{
  font-family: arial;
  color: #0093A7;
  background-color: #DAEBEB;
  padding: 3px;
  margin: 0;
}

.right h2.heading{
  font-size: 120%;
  color: #68726B;
  background-color: #FFF;
}

.right p{
  padding: 0 5px;
}

/* *** */

.alignLeft{
	text-align: left;
}

.alignCenter{
	text-align: center;
}

.alignRight{
	text-align: right;
}

.alignMiddle{
	margin-top: -50%;
}

img{
	border: 0;
	margin: 0;
	padding: 0;
}

.h100{
	height: 100%;
}

.pad25{
	padding: 25px;
}

.pad20{
	padding: 20px;
}

.pad15{
	padding: 15px;
}

.pad10{
	padding: 10px;
}

.pad5{
	padding: 5px;
}

.width100{
	width: 100%;
}

/* Typography */

h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}

h1{
	font-family: arial, helvetica, sans-serif;
	font-size: 160%;
	background-color: #0092a7;
	color: #FFF;
	padding-left: 4px;
	margin-top: 5px;
	width: 100%;
}

h2{
	font-family: arial, helvetica, sans-serif;
	font-size: 130%;
}

h3{
	font-size: 100%;
	font-weight: bold;
}

h4{
	font-size: 70%;
	font-weight: bold;
}

h5{
	font-size: 70%;
	font-weight: bold;
}

h6{
	font-size: 64%;
	font-weight: bold;
}

ul{
	line-height: 130%;
	margin-left: 25px;
}

ul li{
	margin-bottom: 5px;
	list-style: square;
}

p{
	margin: 5px 0 5px 0;
	line-height: 130%;
}

pre{
	font-family: monospace;
}

strong, b{
	font-weight: bold;
}

hr{
	border: none 0;
	border-top: 1px solid #0093A7;/*the border*/
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
}

br{
	margin: 0;
	padding: 0;
}

img.border{
	border: 5px solid #e9e8e8;
}

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

/* Forms */

form{
	font-size: 100%;
	margin: 0;
	padding: 0;
}

form br{
	clear: left;
}

fieldset{
	padding: 10px;
}

legend{
	color: #000;
}

label{
	float: left;
	width: 260px;
	height: 15px;
	margin-bottom: 10px;
	font-weight: bold;
	text-align: left;
}

textarea{
	background-color: #FFFFFF;
	overflow: auto;
	width: 300px;
	margin-bottom: 5px;
}

select.text{
	width: 205px;
}

input.box200{
	width: 200px;
	height: 15px;
	margin-bottom: 5px;
}

.check{
	margin-top: -3px;
	vertical-align: top;
}

.mandatory{
	background-color: #FFFFE0;
}

#uword{
	margin: 5px 0 5px 0;
}

#submitButton{
	position: relative;
	z-index: 2;
}

/* classes for validator */

.captcha{
	border: 1px solid #CCC;
	width: 205px;
}

.tfvHighlight{
	color: red;
}

.tfvNormal{
	font-weight: bold;
}