﻿/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #FFFFFF;
    font-size: .80em;
    font-family: "Arial", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 30px;
    padding: 0px;
    color: #696969;      
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #F47B20;
    text-decoration: none;
}

a:active
{
    color: #034af3;
    outline:none;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

.HeaderBar
{     
    background: #06F;       
}

.MasterList
{  
    font-weight: bold;
    font-size: 11px;
    border: 1px dashed #06F;
}

.MasterListLabel
{
    font-size:10px;
    font-family: "Arial", sans-serif;        
}

.Label
{
    font-size:11px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;    
    font-weight:bold;
}

.PLabel
{
    font-size:10px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;    
    font-weight:lighter;
}

.ManuBar
{
    font-size:13px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;    
    font-weight:lighter;
}
/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

/* tooltip styling */ 
.tooltip 
{
    display:none;     
    background:#ffc;     
    padding:10px 10px 10px 10px;    
    border: 1px solid #06F;
    font-size:12px;         
    color:#000000; 
    z-index:1500;
}  

/* a .label element inside tooltip */ 
.tooltip .label 
{     
    color:#F47B20;     
    width:40px; 
    font-size: 10px;
}  

/*----------------*/
/* everything is constructed with a single background image */
:focus {
  -moz-outline-style:none;
}

/* root element for tabs */
#flowtabs {	
	/* dimensions */
	width:800px;
	height:31px !important;
	margin:0 !important; 
	padding:0;	
	
	/* IE6 specific branch (prefixed with "_") */
	_margin-bottom:-2px;
}

/* single tab */
#flowtabs li { 
	float:left; 
	margin:0; 
	padding:0; 
	text-indent:0; 
	list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
	background: url(/Images/blue_panes.jpg) no-repeat;
	display:block;
	height: 31px;   
	width: 189px; 	
	padding:0px;
	margin:0px;
	
	/* font decoration */
	color:#000;
	font-size:12px;
	line-height:33px;
	text-align:center;
	text-decoration:none;
}

/* adjust the background image position on each tab */
#flowtabs #t1 			{ background-position: 0 0; }
#flowtabs #t2 			{ background-position: -189px 0; }
#flowtabs #t3 			{ background-position: -378px 0; }
#flowtabs #t4 			{ background-position: -567px 0; width:192px;}
 
/* mouseover state */
#flowtabs a:hover 		{ color:#fff;	 }
#flowtabs #t1:hover 	{ background-position:      0 -33px; }
#flowtabs #t2:hover 	{ background-position: -189px -33px; }
#flowtabs #t3:hover 	{ background-position: -378px -33px; }
#flowtabs #t4:hover 	{ background-position: -567px -33px; }

/* currently selected tabs */
#flowtabs a.current		{ cursor:default; color:#fff; line-height:34px; }
#flowtabs #t1.current { background-position:      0 -66px; }
#flowtabs #t2.current { background-position: -189px -66px; }
#flowtabs #t3.current { background-position: -378px -66px; }
#flowtabs #t4.current { background-position: -567px -66px; }

/* panes */
#flowpanes {
	background: url(/Images/blue_panes.jpg) no-repeat 0 -100px;		
	width:780px;
	height:350px;	
}

/* single pane */
#flowpanes div {
	display:none;	
	color:#fff;	
	margin:20px 40px;
}

/* some decorations for elements inside single pane */
#flowpanes div h2 {
	font-weight:normal;
	color:#ddd;
	letter-spacing:1px;
	margin:10px 0 0 0;
	font-size:22px;	
}

#flowpanes .newstime {
    font-size:10px;    
    color: yellow;
}

#flowpanes a {
	color:#cc9;		
	font-size:14px;
}

#flowpanes p, #flowpanes samp 
{
    font-size:16px;
	color:#ccc;		
}

#flowpanes div.narrow {
	padding-right:160px;		
}

/*color card*/
#ColorCard {
	/*background:#333 url(/Images/h300.png) 0 0;*/
	background:#06F;
	width: 180px;
	border:1px solid #333;	
	-background:#666;
}

/* accordion header */
#ColorCard h2 {
	/*background:#ccc url(/Images/h30.png);*/
	background:#009;
	margin:0;
	padding:5px 15px;
	font-size:12px;
	font-weight:normal;	
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	cursor:pointer;	
}

/* accordion pane */
#ColorCard div.pane {
	border:1px solid #fff;
	border-width:0 2px;
	display:none;	
	padding:15px;	
	color:White;
	font-size:12px;
	cursor:pointer;
}
#ColorCard div.pane a { color:#fff;	 }
#ColorCard div.pane a:hover { color:#F47B20;}

/*accordion*/

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	/*background:#333 url(/Images/h300.png) 0 0;*/
	background:#06F;
	width: 180px;
	border:1px solid #333;	
	-background:#666;
}

/* accordion header */
#accordion h2 {
	/*background:#ccc url(/Images/h30.png);*/
	background:#009;
	margin:0;
	padding:5px 15px;
	font-size:12px;
	font-weight:normal;	
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	cursor:pointer;	
}
#accordion h2 a:hover { background:blue;}

/* currently active header */
#accordion h2.current {
	cursor:default;
	background-color:#c09;
}

/* accordion pane */
#accordion div.pane {
	border:1px solid #fff;
	border-width:0 2px;
	display:none;	
	padding:15px;	
	color:White;
	font-size:12px;
	cursor:pointer;
}
#accordion div.pane a { color:#fff;	 }
#accordion div.pane a:hover { color:#F47B20;}

/* a title inside pane */
#accordion div.pane h3 {
	font-weight:normal;
	margin:0 0 -5px 0;
	font-size:16px;
	color:#999;
}

/********************
 * FEATURE CAROUSEL *
 ********************/
#featureCarousel {
    height: 300px;
    width:600px;
    background-color:#F0F8FF;
    position:relative;
}
#featureCarousel img {
    border:0;
}
#featureCarousel .feature {
    position:absolute;
    top:-2000px;
    left:-2000px;
    border:3px solid white;
    cursor:pointer;
}
#featureCarousel .feature > div {
    position:absolute;
    bottom:10px;
    left:0px;
    background-color:#666;
    width:100%;
}
#featureCarousel .feature > div p {
    margin:0;
    padding:5px;
    font-weight:bold;
    font-size:12px;
    color:white;
}
#featureCarousel .blipsContainer {
    position:absolute;
    color:white;
    right:25px;
    top:265px;
    padding:0;
    margin:0;
}
#featureCarousel .blipsContainer .blip {
    margin:3px;
    height:14px;
    width:14px;
    color:#06F;
    text-align:center;
    font-size:10px;
    border:1px dotted black;
}
#featureCarousel .blipsContainer .blipSelected {
    color:white;
    font-weight:bold;
    background-color:black;
}
