/* CSS Document for Eporta Website  */

/* Notes
************************************************************************************ 

Slightly different approach used with CSS development. Have opted to remove container DIV to align website and opted for
individual alignment on each DIV. This is to allow for text resize so the layout doesn't break.

*/

/* Helpers
************************************************************************************ */

.clear, .clr {
	clear:both;
}
.padding{
	padding:0px 20px;
}
.paddingFooter{
	padding:25px;
}
.hide {
	display:none;
}

/* Layout
************************************************************************************ */

* {
	margin: 0;
	padding: 0;
}

body{
	font: 62.5%/160% Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	background:#fff;
	color: #333;
	min-width:760px;
}
div#container{
	text-align:left;
	width:760px;
	margin:0 auto;
	margin-right:auto;
	margin-left:auto;
}
div#header{
	position:relative;
	margin:0 auto;
	height:96px;
	width:760px;
	background:#fff url(../../images/layout/bg-header.gif) no-repeat 0 0;
}
div#divider {
	width:100%;
	height:11px;
	background:#564D60 url(../../images/layout/bg.gif) repeat-x bottom;
}
div#header span{
	display:none;
}
div#breadcrumb{
	margin:0 auto;
	width:760px;
	height:20px;
	background: #fff url(../../images/layout/bg-breadcrumb.gif) repeat-y;
	text-align:left
}
div#breadcrumb span {
	padding:0.7em 206px 0.8em 0.5em;
}
div#breadcrumb-bottom {
	margin:0 auto;
	width:760px;
	height:4px;
	background: #fff url(../../images/layout/bg-breadcrumb-bottom.gif) no-repeat 0 0;
}
div#wrapper {
	margin:0 auto;
	width:760px;
	background: #fff url(../../images/layout/bg-wrapper.gif) repeat-y 0 0;
	text-align:left;
}
div#content{
	float:left;
	width:554px;
	/* Just so we always have some space below the main text on all pages */
	padding-bottom:20px;
	
}

div#banner_ad {
	background: #efefef;
	width:553px;
	height:745px;
	border-left: solid 1px #867d90;
	border-bottom: solid 1px #867d90;
}
div#banner_ad img{
	border:none;
	margin-left:48px;
	margin-top:20px;
}

div#banner_ad p {
	text-align: center;
}

div#banner_ad a:link, div#banner_ad a:visited, div#banner_ad a:active {
	text-decoration: none;
	color: black;	
}

div#banner_ad a:hover {
	text-decoration: underline;
	color: black;	
}

div#banner {
	background: #efefef url(../../images/layout/bg-banner.gif) no-repeat 0 0;
	width:554px;
	height:165px;
}
div#banner img{
	border:none;
	margin-left:25px;
	margin-top:20px;
}
div#sidebar{
	float:right;
	width:206px;
	background: #564D60;	
}
.grey-panel{
	width:206px;
	height:162px;
	background: #564D60 url(../../images/layout/bg-grey-panel.gif) no-repeat 0 0;
}
.red-panel{
	width:206px;
	background: #AE0536 url(../../images/layout/bg-red-panel.gif) no-repeat 0 0;
}
div#footer{
	clear:both;
	margin:0 auto;
	height:115px;
	width:760px;
	color: #fff;
	background: #564D60 url(../../images/layout/bg-footer.gif) no-repeat 0 0;
	text-align:left
}

#textAlert {
	background-color:#FFFFCC;
	border:1px solid #ccc;
	color:#FF0000;
	width:480px;
	margin-left:30px;
}
#textAlertPadding {
	padding:20px;
}



/* Images */

.secondaryImages {
	text-align:center;
	margin:12px 10px 12px 12px;
	width:180px;
	height:92px;
	border:none;
}
/* Navigation
--------------------------------------- */

#nav-container {
	width: 760px;
	margin:0 auto;
}
#nav li {
	display: inline;
	list-style: none;
}

#nav {
	display: inline;
	width: 760px;
	line-height: normal;
}

#nav li {
	float: left;
	background: url(../../images/nav/tab_left.gif) no-repeat left top;
	margin: 0;
	padding: 0 0 0 6px;
	font-size:1.2em;
}

#nav a {
	float: left;
	display: block;
	background: url(../../images/nav/tab_right.gif) no-repeat right top;
	padding: 9px 14px 8px 5px;
	color: #666 !important;
	text-decoration:none;
}
#nav a:hover {
	color: #000 !important;
	text-decoration:none;
}


/* Typography
************************************************************************************ */
h2, h3, h4, h5, h6, p{
	margin:0 30px ;
}

h2{
	font-size:1.6em;
	line-height:2.0em;
	color:#666;
	padding:0.6em 0;
	border-bottom:1px solid #ccc;
}
h3{
	font-size:1.4em;
	line-height:1.8em;
	color:#AE0536;
	padding:0.6em 0;
}
h4, h5, h6{
	font-size:1.2em;
	line-height:1.8em;
	color:#AE0536;
	padding:0.5em 0;
}
.Heading4 {
	font-size:12px;
	line-height:18px;
	color:#AE0536;
	padding:5px
}

.textRedBold {
	color:#FF0100;
	font-weight:bold;
}
.textBlueBold {
	color:#003399;
	font-weight:bold;
}
div#content p{
	font-size:1.2em;
	line-height:1.8em;
	padding:0.5em 0;
}
div#content p.textSubHeading {
	padding:0.3em 0.3em;
	background-color:#AE0536;
	color:#fff;
	font-weight:bold;
}
div#breadcrumb p{
	font-size:1.1em;
	line-height:1.8em;
}


div#footer p{
	margin:0;
	padding:0.5em 0;
	font-size:1.1em;
	line-height:1.8em;
}

#sidebar h3 {
	font-size:1.2em;
	line-height:1.8em;
	font-weight:bold;
	color:#fff;
	margin:0 10px;
}
#sidebar p {
	font-size:1.1em;
	line-height:1.8em;
	color:#fff;
}
/* Lists
************************************************************************************ */

#content ul
{
	margin:10px 20px 10px 30px;
	list-style: none;
}

#content li
{
	background-image: url(../../images/layout/blt.gif);
	background-repeat: no-repeat;
	background-position: 0 0.7em;
	list-style:none;
	font-size:1.2em;
	line-height: 1.8em;
	padding-left:15px;
}

#sidebar ul
{
	margin:0 0 0 30px;
	list-style: none;
}

#sidebar li
{
	background-image: url(../../images/icons/blt.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	list-style:square;
	font-size:1.2em;
	line-height: 1.8em;
	color:#fff;
}
#footer ul{
	list-style: none;
	padding: 0;
	margin: 0;
	text-align:left;
}
#footer ul li{
	display:inline;
	padding: 0 5px 0 10px;
	margin: 0;
	font-size:1.1em;
	line-height: 1.8em;
	background:none;
	font-weight:bold;
	border-left:1px solid #fff;
}
#footer ul li.startFooter{
	display:inline;
	padding: 0 5px 0 0;
	margin: 0;
	font-size:1.1em;
	line-height: 1.8em;
	background:none;
	font-weight:bold;
	border-left:none
}	
/* Links
************************************************************************************ */

a
{
	color: #003399;
	text-decoration: underline;
}
	
a:visited
{ 
	color: #003399;
	text-decoration: underline;
}
	
a:hover
{ 	
	color: #000;
	text-decoration: underline;
}
#breadcrumb a:link, #breadcrumb a:visited	{ 
	color: #666;
	text-decoration:underline;
}
#breadcrumb a:hover	{ 
	color: #333;
	text-decoration:underline;
}
#sidebar a:link, #sidebar a:visited	{ 
	color: #fff;
	text-decoration:none;
}
#sidebar a:hover	{ 
	color: #fff;
	text-decoration:underline;
}

#footer a:link, #footer a:visited	{ 
	color: #fff;
	text-decoration:none;
}
	
#footer a:hover	{ 
	color: #fff;
	text-decoration:underline;
}
/* Forms
************************************************************************************ */
form {
	padding:0;
	margin:10px 0 10px 25px;
}
fieldset {
	border:none;
}
label {
	font-weight:bold;
}
.btnLogin {
	margin:10px 0;
	padding:3px;
}
#frm01 p {
	margin:3px 10px;
	padding:0;
}
.forms {
	width:300px;
	padding:3px;
	font-size:12px;
	color:#333333;
	border:1px solid #564D60;
}
textarea {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
	padding:3px;
	height:80px;
}

/* Newsletter Sign Up */

#frmNewsletter {
	padding:0;
	margin:0 0 0 10px;
}
#frmNewsletter label {
	color:#fff;
	font-size:1.2em;
	line-height:1.8em;

}
.frmInput {
	width:150px;
	padding:3px;
	font-size:12px;
	color:#333333;
	border:1px solid #564D60;
}
.btnSubscribe {
	margin:10px 0;
	padding:3px;
	border:1px solid #fff;
	background-color:#564D60;
	color:#fff;
	font-weight:bold;
	font-size:12px;
}
/* Tables
************************************************************************************ */
#tblContactForm th, #tblContactForm td{
	padding:5px;
	font-size:12px;
	line-height:18px;
}