@charset "utf-8";
/* CSS Document */

/*********************************************************************************************************/

/* CSS Reset and General styles */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, fieldset { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; list-style: none; }
form, input, textarea, p, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
em { font-style: italic; }
strong { font-weight: bold; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
q:before, q:after { content:''; }
a:link, a:hover, a:active, a:visited { border: none; }
strong { font-weight: bold; }
em { font-style: italic; }
div { display: block; }
img { border: 0; max-width: 100%; }
.clear { clear: both; }

/* End of CSS reset and General styles */


/*********************************************************************************************************/

/* Clearfix */

.clearfix:after	{content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;} 
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

/* End of Clearfix */

/*********************************************************************************************************/


/* Inner borders and padding */

*
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-font-smoothing: subpixel-antialiased;
	}

/* End of Inner borders and padding */


/*********************************************************************************************************/

/* Fonts */

@font-face 
	{
	    font-family: 'klavikalight';
	    src: url('fonts/klavika-light.eot');
	    src: local('☺'),
	    	 url('fonts/klavika-light.eot?#iefix') format('embedded-opentype'),
	         url('fonts/klavika-light.woff') format('woff'),
	         url('fonts/klavika-light.ttf') format('truetype'),
	         url('fonts/klavika-light.svg#klavikalight') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

/* End of Fonts */


/*********************************************************************************************************/

/* Typography styles */

html, body
{
	width: 100%;
	height: 100%;
}

body
	{
		background: #37028D;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 13px;
		line-height: 1.25;
		text-align: left;
	}

a, a:active, a:visited
	{
		text-decoration: underline;
		color: #FFF;
	}

a:hover
	{
		text-decoration: underline;
		color: #FFF;
	}

h1
	{
		font-family: klavikalight, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 2.5em;
		margin-bottom: .1em;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}

h2
	{
		font-family: klavikalight, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 2em;
		margin-bottom: .1em;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}
/*********************************************************************************************************/

/* Layout styles */

/* Header styles */

.outerHeader
	{
		width: 100%;
		height: 249px;
		background: transparent url(img/outerHeader.png) left top repeat-x;
	}

.innerHeader
	{
		position:relative;
		width: 960px;
		height: 249px;
		margin: 0 auto;
		background: transparent url(img/innerHeader.png) left top repeat-x;
	}

.logo
	{
		position: absolute;
		display: block;
		width: 337px;
		height: 117px;
		top: 25px;
		left: 20px;
	}

.mainTitle
	{
		margin: 0 auto;
		text-align: center;
		padding-top: 170px;
	}

.menu
	{
		float:right; 
		margin: 20px;
	}

.menu a
	{
		font-family: klavikalight, Helvetica, Arial, sans-serif;
		font-weight:bold;
		text-decoration:none;
		font-size:1.5em;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}

.menu a:hover
	{
		text-decoration:underline;
	}
	
.menu li
	{
		margin-right:20px;
		display:inline;
	}
	
/* Body styles */

.mainBody
	{
		width: 960px;
		margin: 0 auto;
	}

.statusBar
	{
		width: 960px;
		height: 30px;
		text-align: center;
	}

.statusBar ul
	{
		display: block;
		margin: 0 auto;
		width: 430px;
		height: 30px;
		text-align: center;
		text-align: center;
		list-style: none;
	}

.statusBar ul li
	{
		display: block;
		float: left;
		width: 100px;
		height: 30px;
		margin-left: 10px;
	}

.progresBar
	{
		width: 960px;
		height: 3px;
		background: transparent url(img/mainPageDivider.png) center center repeat-x;
		text-align: center;
	}

.progresBar ul
	{
		display: block;
		margin: 0 auto;
		width: 430px;
		height: 3px;
		text-align: center;
		background: transparent url(img/mainPageDivider.png) center center repeat-x;
		text-align: center;
		list-style: none;
	}

.progresBar ul li
	{
		display: block;
		float: left;
		width: 100px;
		height: 3px;
		background: transparent url(img/progressBar.png) center center no-repeat;
		margin-left: 10px;
	}

.progresBar ul li.current
	{
		width: 100px;
		height: 3px;
		background: transparent url(img/progressBarCurrent.png) center center no-repeat;
	}

.mainContent
	{
		padding:30px 20px 10px 20px;
		overflow: hidden;
		height:770px;
	}

.mainContentLeft
	{
		float: left;
		width: 280px;
	}

.mainContentMiddle
	{
		float: left;
		width: 280px;
		margin-left: 40px;
	}

.mainContentRight
	{
		float: left;
		width: 280px;
		margin-left: 40px;
	}

.mainContent h2
	{
		font-family: Verdana, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 14px;
		text-transform: uppercase;
		margin-bottom: 1em;
	}

div.transbox
	{
		opacity:0.4;
		filter:alpha(opacity=40); 
	}

.disablingDiv
{
    /* Do not display it on entry */
    display: block;
 
    /* Display it on the layer with index 1001.
       Make sure this is the highest z-index value
       used by layers on that page */
    z-index:1001;
     
    /* make it cover the whole screen */
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
 
    /* make it white but fully transparent */
    background-color: white;
    opacity:.00;
    filter: alpha(opacity=00);
}
	
	transbox *
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.hint
	{
		text-align: center;
		padding: 5px;
		color: #999999;
		font-style: italic;
		font-size: 10px;
	}

	
/* Footer styles */

.mainFooter
	{
		width: 960px;
		margin: 0 auto;
	}

.footerTitle
	{
		width: 960px;
		background: transparent url(img/mainPageDivider.png) center center repeat-x;
		text-align: center;
	}

.footerTitle h2
	{
		background: #37028D;
		display: inline-block;
		margin: 0 auto;
		padding: 0 20px;
		font-family: klavikalight, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 2.5em;
		margin-bottom: .1em;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	}

.footerContent
	{
		padding:40px 20px;
		overflow: hidden;
	}

.footerLeft
	{
		float: left;
		width: 280px;
	}

.footerMiddle
	{
		float: left;
		width: 280px;
		margin-left: 40px;
	}

.footerRight
	{
		float: left;
		width: 280px;
		margin-left: 40px;
	}

.footerContent h3
	{
		font-family: Verdana, Helvetica, Arial, sans-serif;
		color: #FFF;
		font-size: 10px;
		font-weight: bold;
		margin-bottom: 2em;
	}

.footerMiddle a:link, .footerMiddle span
	{
		font-size: 18px;
	}

.copyright
	{
		width: 960px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 20px;
		color: #999999;
		font-style: italic;
		font-size: 10px;
	}

/* End of Layout styles */


/* Input styles */

input[type='text'], input[type='password']
	{
		display: block;
		margin-bottom: 40px;
		width: 280px;
		height: 40px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #FFF;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		min-height: 17px;
		padding: 10px 10px;
		border: 1px solid #cdcdcd;
		font-family: Verdana,Geneva,sans-serif;
		font-size: 15px;
		color: #525252;
		outline: none;
	}
	
textarea
	{
		display: block;
		margin-bottom: 40px;
		width: 280px;
		height: 120px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background: #FFF;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		min-height: 17px;
		padding: 10px 10px;
		border: 1px solid #cdcdcd;
		font-family: Verdana,Geneva,sans-serif;
		font-size: 15px;
		color: #525252;
		outline: none;
	}