/* CSS Document for Electorial Commission of Jamaica (ECJ)

	Date Developed: 	March 08, 2011
	Developed By:		Peter Scott
	Company: 			Chrysalis Communications
	Last Modified: 	

*/

/* Common
------------------------------ */
html, body {
	height: 100%;
	color: #252525;
	}
body {
	background: #adc9e0 url("../images/bg.jpg") center top repeat-x;
	}
a, a:link, a:visited {
	text-decoration: none;
	color: #083f55;
	outline: none;
	}
a:hover, a:active {
	color: #7d3500;
	}
a img {
	border: 0;
	}
strong {
	font-weight: bold;
	}
em {
	font-style: italic;
	}
ol {margin: 0 0 10px 20px}	
abbr {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	cursor: help;
	}
address {
	font-style: normal;
	}

/* Page Layout/Structure 
------------------------------ */
#container {
	position: relative;
	margin: 0 auto;
	width: 960px;
	}
#content {
	position: relative;	
	width: 550px;
	float: left;
	}
#sidebar {
	position: relative;
	width: 260px;
	float: right;
	}
#footer {
	position: relative;
	width: 100%;	
	}
#footerholder {
	position: relative;
	margin: 0 auto;
	width: 960px;
	}
#topholder {
	height: 113px;	
	}
#topleft {
	position: relative;
	float: left;
	width: 480px;
	}
#topright {
	position: relative;
	float: right;
	width: 202px;
	}

/* Main Div Styling
------------------------------ */

/* Header Div ----- */
#header {
	margin: 15px 0 0 0;
	text-align: left;
	}
#logo {
	width: 102px;
	float: left;
	margin: 0 10px 0 0;
	}
#logotitle { 
	color: #fff;
	width: 350px;
	float: left;
	font-weight: normal;
	text-shadow: #000 1px 1px 0px;
	padding: 25px 0 0 0;
	}
#logotitle h1, #logotitle h4 {
	font-family: Arial, serif;
	
	}	
#logotitle h1 {
	font-size: 22px;
	margin: 0 0 10px 0;
	}
#logotitle h4 {
	font-size: 14px;
	}


/* Nav Div ----- */
#navigation {
	background: url('../images/bg-navi.jpg') no-repeat;
	}
#nav {
	height: 42px; 
	padding: 0; 
	margin: 0;
}	
#nav li{float: left;list-style: none; }
#nav li a{background: url('../images/bg-nav.jpg') no-repeat 0 0;display: block;text-indent:-10000px; padding: 12px 0;}

#nav li #nav-home {background-position:0 0;width: 77px;}
#nav li #nav-home:hover {background-position:0 -42px;}
#nav li.selected #nav-home, #nav li.selected #nav-home:hover  { background-position:0 -42px; }

#nav li #nav-about {background-position:-77px 0;width: 93px;}
#nav li #nav-about:hover {background-position:-77px -42px;}
#nav li.selected #nav-about, #nav li.selected #nav-about:hover  { background-position:-77px -42px; }

#nav li #nav-voters{background-position:-170px 0;width: 109px;}
#nav li #nav-voters:hover {background-position:-170px -42px;}
#nav li.selected #nav-voters, #nav li.selected #nav-voters:hover  { background-position:-170px -42px; }

#nav li #nav-elec {background-position:-279px 0;width: 98px;}
#nav li #nav-elec:hover {background-position:-279px -42px;}
#nav li.selected #nav-elec, #nav li.selected #nav-elec:hover  { background-position:-279px -42px; }

#nav li #nav-cont{background-position:-377px 0;width: 138px;}
#nav li #nav-cont:hover {background-position:-377px -42px;}
#nav li.selected #nav-cont, #nav li.selected #nav-cont:hover  { background-position:-377px -42px; }

#nav li #nav-edw {background-position:-515px 0;width: 186px;}
#nav li #nav-edw:hover {background-position:-515px -42px;}
#nav li.selected #nav-edw, #nav li.selected #nav-edw:hover  { background-position:-515px -42px; }

#leftnav {
	background: url(../images/bg-leftnav.jpg) repeat-x;
	border-left: 1px solid #636e77;
	border-top: 1px solid #636e77;
	border-bottom: 1px solid #636e77;
	float: left;
	width: 224px;
	height: 281px;	
}
#leftnav ul {
	list-style: none;
	}
#leftnav li, #leftnav li a {
	text-transform: uppercase;
	text-shadow: #3c4348 1px 1px 0px;
}
#leftnav li a {
	background: url(../images/bg-leftnav-btm.jpg) repeat-x left bottom;
	display: block;
	color: #fff;
	padding: 6px 0 7px 20px; 	
}
#leftnav li a:hover {background-color: #083f55; }

#search {
	position: absolute;
	right: 0;
	margin: 5px 0 0 0;
	width: 245px;
}
#search form {
	width: 235px;
	overflow: hidden;
	padding: 4px 0 0 0;
	position: relative;
	margin: 0 10px 0 0;
}
#search form p {
	margin: 0;
	background: transparent url('../images/bg-search.png') 0 0 no-repeat;
}
#search form p input {
	border: 0;
	margin: 0 0 0 25px;
	background: none;
	color: #404040;
	font-size: 1.1em;
	padding: 5px 0;
	width: 170px;
}
#search form button {
	background: transparent url('../images/btn-search.png') 0 0 no-repeat;
	display: block;
	border: 0 none;
	width: 29px;
	height: 24px;
	text-indent: -9999px;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 0;
	outline: none;
	margin: 0 0 0 0;
}

/* Top Div ----- */
#topnav {
	text-align: right;
	text-shadow: #000 1px 1px 0px;
	margin:  0 0 15px 0;
	}
#topnav a {
	color: #fff;
	margin: 0 5px 10px 5px;	
	}
#social {
	margin: 0 0 10px 0;	
}
#socialicons {
	width: 165px;
	margin:  0 0 0 45px
	}
#socialicons ul {
	list-style: none;
	}
#socialicons li {
	float: left;
	margin: 0 10px 0 0;	
	}
#socialicons li a {
	display: block;
	text-indent:-10000px;
	padding: 0 0 14px 0;	
	width: 31px;
	}
#socialicons li a.facebook{
	background: url(../images/ico-facebook.png) no-repeat;
	}
#socialicons li a.twitter{
	background: url(../images/ico-twitter.png) no-repeat;
	}
#socialicons li a.youtube{
	background: url(../images/ico-youtube.png) no-repeat;
	}
#socialicons li a.rss{
	background: url(../images/ico-rss.png) no-repeat;
	}	
.last {
	margin-right: 0;	
}

/* Content Div ----- */
#contentholder {
	background-color: #fff;
	padding: 10px;
	}
#contfooter {
	background: url(../images/bg-cont-footer.png) no-repeat;
	height: 6px;
	margin: 0 0 20px 0;   
	}
#main {
	background-color: #bfd1d8;
	border: 1px solid #acc0c8;
	padding: 10px;
	margin: 0 0 10px 0;
	}
#slide {
	float: left;
	width: 428px;
	}
#welcome {
	background-color: #252525;
	line-height: 19px;
	float: right;
	width: 225px;
	padding: 25px 20px 0 20px;
	color: #fff;
	height: 258px;
	text-shadow: #000 1px 1px 0px;
	}	
#welcome h1, #welcome a {color: #fff}
#welcome a {text-decoration: underline;}
#topsection {
	border: 1px solid #e4e4e4;
	margin: 0 0 10px 0;
	}
#topsection a {text-decoration: underline;}	
#topsection .section1 {
	background: url(../images/bg-section-1.jpg) no-repeat top left;
	float: left;
	border-right: 1px solid #e4e4e4;
	width: 292px;
	padding: 10px;
	}
#topsection .section2 {
	background: url(../images/bg-section-2.jpg) no-repeat top left;
	float: left;
	border-right: 1px solid #e4e4e4;
	width: 293px;
	padding: 10px;
	}
#topsection .section3 {
	background: url(../images/bg-section-3.jpg) no-repeat top left;
	float: right;
	width: 291px;
	padding: 10px;
	}
#topsection .section3 .right {
	text-align: right;
	margin: 10px 0 0 0;
	}
#topsection img, .rsection img {
	border: 1px solid #e4e4e4;
	padding: 3px; 
	margin: 0 0 10px 0;
}
#topsection ul, .rsection ul, #constlist ul {
	list-style: none;	
	margin: 0 0 5px 0;
	}
#topsection ul li, .rsection ul li, #constlist ul li{
	background: url(../images/img-bullet.jpg) no-repeat 0 center;
	padding: 0 0 0 15px; 	
	}
#midsection .section1 {
	float: left;
	width: 293px;
	padding: 10px;
	}
#midsection .section2 {
	float: left;
	width: 294px;
	padding: 10px;
	}
#midsection .section3 {
	float: right;
	width: 293px;
	padding: 10px;
	}
#midsection .section1 a, #midsection .section1 h3 {
	color: #9c0000;
	}
#midsection .section1 a {
	text-decoration: underline;	
	}
#midsection .section2 p {
	padding: 0 0 10px 0;
	border-bottom: 1px solid #e4e4e4;
	font-weight: 700;	
	}
#midsection .section2 span {
	font-size: 11px;
	font-weight: normal;
	}	
#midsection .section3 h3 {
	margin-bottom: 3px;	
	font-size: 12px;
	font-weight: 700;
}
#lowersection {
	background: url(../images/bg-lowersection.jpg) repeat-x 0 5px;	
	border-top: 2px solid #e4e4e4;	
	padding: 20px 10px 10px 10px;
}
#lowersection .section1 {
	float: left;
	width: 286px;
	padding: 0 10px;
	}
#lowersection .section2 {
	float: left;
	width: 286px;
	padding: 0 10px;
	}
#lowersection .section3 {
	float: right;
	width: 286px;
	padding: 0 10px;
	}
#lowersection .section1 .box {
	background: url(../images/bg-ls-twitter.gif) no-repeat 10px 8px #fff;
	padding: 7px 10px 7px 55px;	
}	
#lowersection .section3 .box {
	background: url(../images/bg-ls-contact.gif) no-repeat 10px 8px #fff;
	padding: 7px 10px 7px 55px;	
}
#lowersection h3 {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 7px;
	}		
.contlist {
	float: left;
	width: 120px;
	}
	
/* Box Divs ----- */
.box {
	font-size: 11px;
	line-height: 17px;
	color: #535b68;
	background-color: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
	box-shadow: 1px 1px 0 #ccc;
    -webkit-box-shadow: 1px 1px 0 #ccc;
    -moz-box-shadow: 1px 1px 0 #ccc;
	padding: 7px 10px;
	}

/* Inner Content Div ----- */
#threecol {
	margin: 0 0 10px 0;	
}
#threecol .col {
	float: left
}
#col1 {
	background-color: #bfd1d8;
	border: 1px solid #acc0c8;
	width: 246px;
	}
#col2 {
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	width: 474px;
	}
#col2 ul {
	margin: 0 0 10px 20px;
	}	
#col2 .style p, #colwide p {
	line-height: 22px;
	}
#colwide h3 {
	font-weight: 700;	
	}
#col3 {
	border: 1px solid #e4e4e4;
	width: 216px;
	}
#colwide {
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	border-right: 1px solid #e4e4e4;
	width: 690px;
	}
#colwide img{
	margin: 0 0 10px 0;
	}		
.style { 
	padding: 10px 20px;
	}
.styl { 
	padding: 10px;
	}	
#constlist {
	margin: 0 0 10px 0;	
}
#constlist ul {
	float: left;
	list-style: none;	
	width: 160px
}
#constlist ul li {
	margin: 0 0 8px 0;
	}

/* Right Section Div ----- */
.rsection {
	background: url(../images/bg-rsection.jpg) no-repeat top left;	
	border-bottom: 1px solid #e4e4e4;	
	padding: 10px;
	}
.rsection h2 {
	font-size: 14px;
	}
.rsection h3 {
	font-size: 13px;
	margin: 0 0 5px 0;
	}	
.rsection form p {
	font-size: 11px;
	}
/*----------------------------------------------- Form */

.formstyle .item{
	position:relative;
	margin: 0 0 0 10px;
}
.formstyle .field{
	background-color:#fff;
	font-size:14px;
	border:1px solid #bdc0cb;
	padding:10px 15px;
	margin-bottom:10px;
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
	box-shadow:0px 1px 2px rgba(0,0,0,0.2)
}
.formstyle .field:focus{
	border:1px solid #81c4df;
	background-color:#e6f8ff
}
.formstyle .fail .field {
	background-color:#ffecec;
	border:1px solid #ffa3a3;
	margin-bottom:5px
}
.inlabel{top:11px;left:17px;font-size:12px;color:#9badb5}
.round5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.field{width:300px}
.formstyle label{float:left;cursor:pointer;color:#002f42; width: 150px;}
.formstyle .submit {
	width:96px;
	height:42px;
	border:0;
	cursor:pointer;
	background: url(../images/i_submit.png) no-repeat;
}
	
#banner {
    position:relative;
    height:108px;
}

#banner IMG {
    position:absolute;
    z-index:8;
    opacity:0.0;
}

#banner IMG.active {
    z-index:10;
    opacity:1.0;
}

#banner IMG.last-active {
    z-index:9;
}
	
/* Footer Div ----- */
#footer {
	color: #fff;
	background-color: #232830;	
	text-shadow: #000 1px 1px 0px;
	}
#footer a {color: #fff;}	
#footerholder {
	padding: 20px 0;	
}
#copyright {
	float: left;
	width: 400px;
	}
#credit {
	text-align: right;
	float: right;
	width: 300px;
	}