/*
 * Cordys security How to examples
 * This example is made by Johan Pluimers
 */

* /*Set's border, padding and margin to 0 for all values*/ {
    padding: 0;
    margin: 0;
}

body, html {
    color: #000000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    background-color: #ffffff;
    text-align: center; /*** Centers the design in old IE versions ***/
}

body {
    font-size: 70%;
}

p {
    padding: 7px 0 7px 0;
}

a {
    color: #000099;
}

a:hover {
    color: #0000FF;
    text-decoration: none;
}

h1, h2, h3 {
    font-weight: bold;
    padding-bottom: 5px;
}

h1 {
    font-size: 3.6em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.3em;
}

.clear {
    clear: both;
}

#mainContainer {
    width: 640px;
    margin: 0 auto; /*** Centers the design ***/
    min-height: 300px;
    background: #ffffff;
    text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}

* html #mainContainer {
    height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/**************************
 HEADER
 **************************/
#header {
    color: #000066;
    background: #ffffff;
	padding: 10px;
	height:60px;
	text-align:left;
	border: 1px solid #000000;
	position:relative;
	margin-top: 10px;
	margin-bottom: 10px;
}

#header #title {
	line-height:60px;
}

#header #title h1{
}

#header #title h2 {
	padding-left:180px;
}

#header #headerimg {
	float: left;
}

/**************************
 BODY
 **************************/
 
#body {
    color: #000066;
    background: #ffffff;
	padding: 10px;
	text-align:left;
	border: 1px solid #000000;
	position:relative;
	margin-top: 10px;
	margin-bottom: 10px;
}

#body #welcome {
	padding-top:15px;
}

#body .tabletitle {
	width: 35%;
}

#body .tableinput {
	width: 40%;
}

#body .tabletip {
	width: 35%;
}

#body .tableheader {
	padding-top:15px;
	padding-bottom:5px;
}

#body #inputtable {
	width: 80%;
	padding-bottom:15px;
	color: #000000;
}

#body #memtable {
	padding-bottom:15px;
	color: #000000;
}

#body #cordysUser {
	width: 80%;
}

#body #cordysPassword {
	width: 80%;
}
#body #shortCode {
	width: 80%;
}

#body .memtext {
	text-align:center;
}

#body .meminput {
	width: 80%;
	text-align: center;
}

#body .meminputheader {
	width: 50px;
	text-align:center;
}

#body #meminputtable {
	width:100%;
}

#body #cordysDoLogin {
	width:100px; 
	margin-top:10px;
	float:right;
}

#body #buttonbar {
	width: 60%;
}

#body #cordysError {
	width:100%;
	margin-left:0px;
	border:0 solid black;
	color:red;
}

#body #cordysInfo {
	width:100%;
	margin-left:0px;
	border:0 solid black;
	color:blue;
}

#body #forgot {
	padding-top: 20px;
}

#body #forgotcred {
	background: url('rightarrow.png') no-repeat; 
	padding-left: 15px;
	border:none;
	cursor:pointer;
}

#body #forgotcredhelp {
	padding-top:10px;
	color: black;
}

#body #forgotcredhelp ul {
	padding-left:30px;
}

#body #forgotcredhelp ul ul{
	padding-left:40px;
}

/**************************
 BODY
 **************************/

#footer{
    color: #000000;
    background: #ffffff;
	padding: 10px;
	text-align:center;
	border: 1px solid #000000;
	position:relative;
	margin-top: 10px;
	margin-bottom: 10px;
}

#tooltip {
	background: Yellow;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
	border: 2px solid Orange;
	position: absolute;
	top: 120px;
	width: 240px;
}

/**************************
 CONTENT AND COLUMNS
 **************************/
.outer {
	float:left;
}

* html .outer {
    /*** No need for hacking IE on this layout ***/
}

.inner {
    /*** No need to do anything with a one column solution ***/
}

* html .inner {
    /***  And therefor no need for hacking IE either ***/
}

/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
 div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
 blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
 ***/
.float-wrap {
    float: left;
}

* html .float-wrap {
    /*** No need for hacking IE on this layout ***/
}

#content {
    float: left;
    width: 620px;
    background: #ffffff;
	border-left: 70px solid #235376;
	border-right: 70px solid #235376;
	font: 13px 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

* html #content {
    position: relative; /*** IE needs this  ***/
}

.contentWrap {
    padding: 30px;
}

.contentWrap ol, .contentWrap ul {
    margin: 3px 0 5px 35px;
}

.contentWrap li {
    padding-bottom: 2px;
}

div#tagline {
	font-size:18pt;
	color:#000000;
	text-align: center;
	font: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

div#copyBelowDivToYourPage {
	float: right;
	border: 0 solid black;
}

/**************************
 LEFT COLUMN - this is our top menu
 **************************/
/*** div.menu is in div.float-wrap, and when div.float-wrap is neg margined to the left,
 div.menu is carried over into the proper position.
 ***/
#menu {
    float: right;
    width: 610px;
    background: #FFA500;
	border-left: 70px solid #A86237;
	border-right: 70px solid #A86237;
    height: 30px;
    padding: 5px;
    margin: -40px 0 0 -760px; /*** Move the menu column so it takes the positon as a top menu ***/
}

* html #menu {
    position: relative; /*** IE needs this  ***/
}

#menu ul {
	font-weight: bold; 
	font-size: 13pt; 
}

#navcontainer ul
{
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0;
	margin-top: 0;
	/* cancels gap caused by top padding in Opera 7.54 */
	margin-left: 0;
	background-color: #FFA500;
	color: black;
	width: 100%;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 18px;
	/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
	display: inline;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 5px;
	/* matches link padding except for left and right */
	padding-top: 5px;
}

#navcontainer ul li a
{
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: white;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
	background-color: #369;
	color: white;
}

#navcontainer #active { border-left: 1px solid #fff; }