/* Copyright © 2010, Omnicognic, LLC. All Rights Reserved. */
/* http://www.omnicognic.com/ */

/************ Resets ************/

img 
{
	border-style: none;
}

div, span
{
	margin: 0px;
	padding: 0px;
}

p
{
    margin: 3px 0px 3px 0px;
}

ul
{
	padding: 5px;
	margin: 0px 0px 0px 20px;
}

/************ General Element Positioning ************/

.Row
{
	clear: both;
}

.Left
{
	float: left;
}

.Center
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.Center_Data
{
	text-align: center !important;
}

.Right
{
	float: right;
}

img.Left
{
	display: inline;
	margin: 0 10px 5px 0; 
}

iframe.Left
{
	margin: 0 10px 5px 0; 
}

img.Right
{
	display: inline;
	margin: 0 0 5px 10px;
}

iframe.Right
{
	margin: 0 0 5px 10px;
}

div.Left
{
	margin: 0 10px 5px 0; 
}

div.Right
{
	margin: 0 0 5px 10px;
}

.NoBr
{
	white-space: nowrap;
}

/************ General Font Styles ************/

.Bold
{
	font-weight: bold;
}

.Italic
{
	font-style: italic;
}

.Underline
{
	text-decoration: underline;
}

/************ Page Layout and General Styles ************/

body 
{
	font-family: Tahoma, Helvetica, Arial, Sans-Serif;
	font-size: 1em;
	text-align: center;
	background-color: #559AF7;
	background-image: url(../Images/SiteBg.png);
	background-repeat: repeat;
}

.Page_Wrapper
{
	margin: 35px auto;
	width: 1000px;
	text-align: left;
	border: 1px #000080 solid; 
	background-color: #CDDDFA;
	color: Navy;
}

.Page_Header 
{
	height: 100px;
	width: 1000px;
}

.Page_Content 
{
	padding: 50px 50px 25px 50px;
}

.Page
{
	padding: 25px 50px 15px 50px;
	border: 1px #000080 solid;
	background-color: #095AE4;
	background-image: url(../Images/PageBg.png);
	background-repeat: repeat;
}

.Page_Footer
{
	background-color: #87CEEB;
	background-image: url(../Images/Footer40.png);
	background-repeat: repeat-x;
	border: 1px #000080 solid;
    color: Navy;
    width: 1000px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
	text-align: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.Header
{
	color: Navy;
    font-weight: bold;
    font-size: 1.3em;
    margin: 0px;
}

.Section
{
	background-color: White;
	border: 1px #000080 solid;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 20px;
	display: inline-block;
	width: 756px;
}

/* Used to fix container for Firefox2 and some other older non-IE browsers
   without this the content overlaps the white space in the containers. */
.Section:after
{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.Section_Center
{
	background-color: White;
	border: 1px #000080 solid;
	text-align: center !important;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 20px;
	display: inline-block;
	width: 756px;
}

/* See comments above. */
.Section_Center:after
{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

h1 
{
	font-size: 1.3em;
	padding: 0px 0px 5px 0px;
}

h2 
{
	font-size: 1em;
	font-weight: bold;
	padding: 0px 0px 3px 0px;
	margin: 0px;
}

a
{
	color: navy;
}

/************ Element Positioning by Width ************/
/*	These values are used for elements within a Section DIV; it allows for elements to appear centered.
	This is calculated as "(Section - Control) / 2".
	For example: Section = 756; so (756 - 700) / 2 = 28 */

.Width700
{
	width: 700px;
	position: relative;
	left: 28px;
}

.Width625
{
	width: 625px;
	position: relative;
	left: 66px;
}

.Width575
{
	width: 575px;
	position: relative;
	left: 91px;
}

.Width450
{
	width: 450px;
	position: relative;
	left: 153px;
}

.Width400
{
	width: 400px;
	position: relative;
	left: 178px;
}

.Width350
{
	width: 350px;
	position: relative;
	left: 203px;
}

.Width300
{
	width: 300px;
	position: relative;
	left: 228px;
}

/************ Section/Control Layouts ************/

ul.Tabs
{
	width: 1000px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-size: 0.9em;
	color: navy;
	border-top: 1px #000080 solid;
}

ul.Tabs li
{
	border: 1px solid navy;
	width: 100px;
	float: left;
	text-align: center; 
	font-weight: bold;
	border-right: none;
	border-top: none;
}

ul.Tabs li.Active
{
	border-bottom: none;
	border-left: none;
}

ul.Tabs li.Show_RB
{
	border-right: 1px solid navy;
}

ul.Tabs li.Show_LB
{
	border-left: 1px solid navy !important;
}

ul.Tabs li.Hide_LB
{
	border-left: none;
}

ul.Tabs li.Active
{
	background-color: #CDDDFA !important;
}

ul.Tabs li.Empty 
{
	color: Navy;
	background-color: #87CEEB;
	background-image: url(../Images/TabBg.png);
	background-repeat: repeat-x;
	display: block;
	text-decoration: none;
	line-height:25px;
	width: 192px;
	border-left: none;
}

ul.Tabs li.Page_Moved 
{
	display: block;
	color: Navy;
	background-color: #87CEEB;
	text-decoration: none;
	line-height: 25px;
	width: 1000px;
	border-right: none;
	border-left: none;
}

ul.Tabs li a
{ 
	display: block;
	text-decoration: none;
	line-height: 25px;
	color: Navy;
}

ul.Tabs li.Tab a
{ 
	background-color: #87CEEB;
	background-image: url(../Images/TabBg.png);
	background-repeat: repeat-x;
}

ul.Tabs li.Tab a:hover
{
	background-color: #7696CF;
	background-image: url(../Images/ActiveTabBg.png);
	background-repeat: repeat-x;
	color: navy;
	text-decoration: none;
}

.HomePageWhyUse
{
	min-height: 830px;
}

.Code
{
	position: relative;
	margin-bottom: 15px;
	padding: 10px;
	border-right: Navy 1px solid;
	border-top: Navy 1px solid;
	border-left: Navy 1px solid;
	border-bottom: Navy 1px solid;
	background-color: #e0ffff;
}

.FAQ_Compare 
{
	width: 600px;
	position: relative;
	left: 50px;
	border-right: Navy 0px solid;
	border-top: Navy 1px solid;
	border-left: Navy 1px solid;
	border-bottom: Navy 0px solid;
	margin-bottom: 15px;
}

.FAQ_Compare CAPTION
{
	border-right: Navy 1px solid;
	border-top: Navy 1px solid;
	border-left: Navy 1px solid;
	border-bottom: Navy 0px solid;
	background-color: #87CEEB;
	text-align: center;
	FONT-WEIGHT: bold;	
}

.FAQ_Compare TD
{
	border-right: Navy 1px solid;
	border-top: White 1px solid;
	border-left: White 1px solid;
	border-bottom: Navy 1px solid;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
	text-align: left;
	width: 300px;
}

.DataTable
{
	border-right: Blue 0px solid;
	border-top: Blue 1px solid;
	border-left: Blue 1px solid;
	border-bottom: Blue 0px solid;
	font-size: 0.75em;
	color: Blue;
}

.DataTable THEAD
{
	background: #87CEEB; /*sklyblue*/
}

.DataTable TFOOT
{
	font-weight: bolder;
	background: #87ceeb;
	color: navy;
}

.DataTable TD
{
	border-right: Blue 1px solid;
	border-top: White 1px solid;
	border-left: White 1px solid;
	border-bottom: Blue 1px solid;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
	text-align: left;
}

.DataTable THEAD TH
{
	border-right: Blue 1px solid;
	border-top: White 1px solid;
	border-left: White 1px solid;
	border-bottom: Blue 1px solid;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
	text-align: center;
	color: Navy;
}

.DataTable CAPTION
{
    BORDER-RIGHT: navy 1px solid;
    BORDER-TOP: navy 1px solid;
    BORDER-LEFT: navy 1px solid;
    BORDER-BOTTOM: navy 1px solid;
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    PADDING-TOP: 2px;
    BACKGROUND: #87ceeb;
    FONT-WEIGHT: bolder;
    COLOR: navy
}

/* Currently in Calculator Help Topic, if not included Code Text is too small */
.DataTable .Code
{
	font-size: 1.2em !important;
}

.DataTable2
{
	border-right: Navy 0px solid;
	border-top: Navy 1px solid;
	border-left: Navy 1px solid;
	border-bottom: Navy 0px solid;
	font-size: 0.75em;
}

.DataTable2 TD
{
	border-right: Navy 1px solid;
	border-top: White 1px solid;
	border-left: White 1px solid;
	border-bottom: Navy 1px solid;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
	text-align: left;
}

.DataTable2 TD TD
{
	border-right: Navy 0px solid;
	border-top: White 0px solid;
	border-left: White 0px solid;
	border-bottom: Navy 0px solid;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.DataTable2 THEAD TH
{
	border-right: Navy 1px solid;
	border-top: White 1px solid;
	border-left: White 1px solid;
	border-bottom: Navy 1px solid;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
	text-align: center;
}

.DataRow1
{
	background: White;
}

.DataRow2
{
	background: #e0ffff;
}

.DataRow3
{
	background: #87ceeb;
}

.DataRow4
{
	background: #80ffff;
	text-align: center !important;
}

.DataRow5
{
	background: #ff8040;
	text-align: center !important;
}

/*	Currently specific Font Colors are in the Calculator Help Topic
	These are saved in the Layout.css rather than a color file as they specify a specific color. */
.Font_Red
{
	color: #FF0000;
}

.Font_Blue
{
	color: #0000FF;
}

.DataForm
{
	BORDER-RIGHT: blue 1px solid;
	BORDER-TOP: blue 1px solid;
	BORDER-LEFT: blue 1px solid;
	BORDER-BOTTOM: blue 1px solid;
	FONT-SIZE: 0.75em;
	COLOR: blue;
	BACKGROUND: #87ceeb;
}

.DataForm2
{
	BORDER-RIGHT: blue 1px solid;
	BORDER-TOP: blue 1px solid;
	BORDER-LEFT: blue 1px solid;
	BORDER-BOTTOM: blue 1px solid;
	FONT-SIZE: 0.75em;
	COLOR: blue;
	BACKGROUND: #e0ffff;
}

.DataForm TD
{
	BORDER-RIGHT: blue 0px solid;
	BORDER-TOP: blue 0px solid;
	BORDER-LEFT: blue 0px solid;
	BORDER-BOTTOM: blue 0px solid;
	PADDING-RIGHT: 5px;
	PADDING-LEFT: 5px;
	PADDING-BOTTOM: 2px;
	PADDING-TOP: 2px
}

.DataFormField
{
	FONT-WEIGHT: bolder;
}

.Bg100
{
	BACKGROUND-IMAGE: url(../Images/Form100.png);
}

.Bg200
{
	BACKGROUND-IMAGE: url(../Images/Form200.png);
}

.DisplayError
{
	border-right: red 1px solid;
	border-top: red 1px solid;
	border-left: red 1px solid;
	border-bottom: red 1px solid;
	font-size: 0.75em;
	color: red;
	background-color: #FFBBBB;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

ul.Install_Help
{
	list-style-type: none;
	padding: 10px;
	width: 700px;
	margin-left: 18px;
	display: inline-block;
	border: none;
}

ul.Install_Help li
{
    margin: 10px;
	float: left;
	border: none;
}

ul.Install_Help li.Step1
{
	width: 194px;
}

ul.Install_Help li.Step2
{
	width: 255px;
}

ul.Install_Help li.Step3
{
	width: 180px;
}

ul.Print_Screens
{
	list-style-type: none;
	border: none;
	width: 756px;
	display: inline-block;
	margin: 0px;
	padding: 0px 0px 0px 20px;
}

ul.Print_Screens li
{
	float: left;
	border: 1px #000080 solid;
	background-color: White;
	text-align: center;
	width: 326px;
	margin: 0px 0px 20px 0px;
	padding: 20px;
	padding-top: 10px;
}

ul.Print_Screens li.Odd
{
	clear: left;
}

ul.Print_Screens li.Even
{
	margin-left: 20px;
}

ul.Gallery_700_2
{
	list-style-type: none;
	padding: 10px;
	width: 700px;
	margin-left: 18px;
	display: inline-block;
	border: none;
}

ul.Gallery_700_2 li
{
    margin: 10px;
	float: left;
	width: 320px;
	height: 125px;
	border: none;
}

ul.Gallery_620_2
{
	list-style-type: none;
	padding: 10px;
	width: 620px;
	margin-left: 68px;
	display: inline-block;
	border: none;
}

ul.Gallery_620_2 li
{
    margin: 5px 10px 5px 10px;
	float: left;
	width: 280px;
	border: none;
}

ul.Gallery_600_3
{
	list-style-type: none;
	padding: 10px;
	width: 600px;
	display: inline-block;
	border: none;
}

ul.Gallery_600_3 li
{
    margin: 5px 10px 5px 10px;
	float: left;
	width: 180px;
	border: none;
}

ul.Gallery
{
	list-style-type: none;
	padding: 10px;
	display: inline-block;
	border: none;
}

ul.Gallery li
{
    margin: 5px 10px 5px 10px;
	float: left;
	border: none;
}