/*==============================================================================
        1.BASIC STYLES
===============================================================================*/
:focus{
    outline: 0;
}

body, body.ektron-ui-master-pw{
    background-color: #fff;
    font: small arial, sans-serif;
    color: #000;
    line-height: 1.5em;
}

/* HEADINGS
----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
    font-family: arial, sans-serif;
    font-weight: 400;
    color: #38BAF2;
}

h1{
    font-size: 2.5em;
    line-height: 33px;
    margin-bottom: 20px; 
}

h2{
    font-size: 2.1em;
    line-height: 30px;
    margin-bottom: 16px;
}

h3{
    font-size: 1.5em;
    line-height: 27px;
    margin-bottom: 12px;
    margin-top: 20px;  
    }

h4{
    font-size: 1.2em;
    line-height: 24px;
    margin-top: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f4f4f4;
    font-weight:bold; 
}

h5{
    font-size: 1.5em;
    line-height: 21px;
    margin-bottom: 5px; 
}

h6{
    font-size: 1.2em;
    line-height: 18px;
    margin-bottom: 5px; 
}

.page_heading{
    clear: both;
	margin: 0 0 20px 0;
	background: url('../../images/heading_bgr.png') left top repeat-x;
}

.page_heading h1{
	display: inline;
	font-family: arial, sans-serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 28px;
	background: #fff;
	margin: 0;
	padding-right: 10px;
}

/* PARAGRAPH
----------------------------------------------------------------------------- */
p {
    color: #000;
    margin-bottom: 20px;
}

.bold
{
    font-weight: bold;
}

/* LINKS
----------------------------------------------------------------------------- */
a{
    color: blue;
    text-decoration: underline;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

a:hover,
a.continue-reading:hover{
    color: blue;
    text-decoration: none;
}

a.continue-reading{
    cursor: pointer;
    color: blue;
}

/* COLORED TEXT
----------------------------------------------------------------------------- */
.text-red{
    color: #38BAF2;
}

.text-light{
    color: #aaa;
}

.text-dark{
    color: #707070;
}


/* BLOCKQUOTE
----------------------------------------------------------------------------- */
blockquote{
    background: #f6f6f6 url('../../images/quote.png') 20px 20px no-repeat;
    border: 1px solid #ececec;
    padding: 20px;
    float: left;
}

blockquote{
    font: medium arial, serif;
    line-height: 24px;
    text-align: center;
}

blockquote span.blockquote-author{
    float: left;
    width: 100%;
    font: medium arial, sans-serif;
    color: #aaa;
    margin-top: 7px;
}

blockquote.text-left{
    text-align: left;
}

p + blockquote{
    margin-top: 20px;
    margin-bottom: 20px;
}

p + a.continue-reading{
    margin-top: 14px;
    display: block;
}

p + p{
    margin-top: 14px;
    display: block;
}

/* TEXT HIGHLIGHT
----------------------------------------------------------------------------- */
.highlight-dark{
    background: #707070;
    color: #fff;
}


/* FIGURE
----------------------------------------------------------------------------- */
img.img-bordered{
    border: 3px solid #ececec;
}

img + p{
    margin-top: 20px;
}

img.float-right{
    float: right;
    margin: 10px 0 19px 10px;
}

img.float-left{
    float: left;
    margin: 10px 10px 10px 0;
}

/*==============================================================================
HEADER CONTAINER STYLES
===============================================================================*/
#header{
    width: 940px;
    margin-right: auto;
    margin-left: auto;
}

.header_right 		{
    float: right;
    text-align: center;
}

.header_soc_search {
	margin-bottom: 20px;
}

.header_soc_twitter {
	float: right;
	width: 16px;
	height: 16px;
	background: url('../../images/header_soc_twitter.png') left -16px no-repeat;
	margin: 20px 0 0 12px;
	text-indent: -10000px;	
}
a:hover.header_soc_twitter {
	background: url('../../images/header_soc_twitter.png') left top no-repeat;
}
.header_soc_fb {
	float: right;
	width: 16px;
	height: 16px;
	background: url('../../images/header_soc_fb.png') left -16px no-repeat;
	margin: 20px 0 0 12px;
	text-indent: -10000px;	
}
a:hover.header_soc_fb {
	background: url('../../images/header_soc_fb.png') left top no-repeat;
}

.header_soc_search a {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;	
}

/* LOGO
----------------------------------------------------------------------------- */
#logo{
    width: 345px;
    margin: 20px 20px 20px 0px;
    float: left;
}

/* NAVIGATION
----------------------------------------------------------------------------- */

#nav-container{
    clear: both;
    width: 100%;
    margin: 0;
    height: 40px;
    float: left; 
    position: relative;
    z-index: 200;
}

#nav {
    background: #305899 url('../../images/grad_menu.png') top left repeat-x;
	height: 40px;
	padding: 0px 0 0 5px;
	font-family: arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;	
}

#nav-container select{
    display: none;
}

#nav ul ul {
	display: none;
    margin: 0 !important;
    padding: 0 !important;
}

	#nav ul li:hover > ul {
		display: block;
	}


#nav ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
	#nav ul:after {
		content: ""; clear: both; display: block;
	}

	#nav ul li {
	margin-bottom: 0;
    position: relative;
	float: left;
	z-index: 1015;
    background: none;
    padding:0;
	}

        #nav ul li .noLink
        {
            display: block;
            padding: 0px 15px 0px 15px;
            color: #fff;
            text-decoration: none;
            line-height: 40px;
        }

		#nav ul li:hover, #nav ul li.noLink:hover {
			background: #38BAF2;
		}
			#nav ul li:hover a {
				color: #fff;
                background-color: #38BAF2;
			}
		
		#nav ul li a {
			display: block;
            padding: 0px 15px 0px 15px;
			color: #fff;
            text-decoration: none;
           	line-height: 40px;
		}
			
		
	#nav ul ul {
		background: #38BAF2;
        border-radius: 0px;
        padding: 0 !important;
		position: absolute;
        top: 100%;
        margin: 0 !important;
	}
		#nav ul ul li {
			float: none; 
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
            position: relative;
            width: 200px;
		}
			#nav ul ul li a {
				padding: 10px;
				color: #fff;
                line-height: 20px;
			}
            
            #nav ul ul li .noLink
        {
                padding: 10px;
				color: #fff;
                line-height: 20px;
        }
            	
				#nav ul ul li a:hover, #nav ul ul li.noLink:hover {
					background: #305899;
				}
		
	#nav ul ul ul {
		position: absolute;
        left: 100%;
        top:0;
        width: 200px;
	    margin: 0 !important;
        padding: 0 !important;
	}
		
/* NAVIGATION END
----------------------------------------------------------------------------- */

/* SEARCH FIELD
----------------------------------------------------------------------------- */
.header_search {
	height: 32px;
    margin-top: 15px;
    float: right;
}
.header_search form {
	margin-bottom: 0;
}

#s{
	float: right;
	position: relative;
	top: 0px;
	right: 0;
	width: 200px;
	margin-bottom: 0;
	border: 1px solid #eeeeee;
	padding: 7px 40px 7px 8px;
	font-size: 13px;
	color: #ccc;
	background: #fbfbfb;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	
	-moz-box-shadow: inset 0 0 6px rgba(0,0,0,.05);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .05);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .05);

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#s:focus {
	width: 200px;
	border: 1px solid #eeeeee;
	color: #888;
	-moz-box-shadow: inset 0 0 6px rgba(0,0,0,.05);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .05);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .05);
}
#s:hover {
	width: 200px;	
}
.button_search{
	float: right;
	position: relative;
	top: 2px;
	right: -250px;
	padding: 0;
	background: url('../../images/button_search.png') center center no-repeat !important;
	width: 22px;
	height: 31px;
	cursor: pointer;
	border: none !important;
	z-index: 100;
	box-shadow: none;
}
.button_search:hover{
	background: url('../../images/button_search.png') center center no-repeat;
	border: none;
}

/*==============================================================================
CONTENT WRAP STYLES
===============================================================================*/
#content-wrapper{
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* PAGE TITLE BREADCRUMBS
----------------------------------------------------------------------------- */
.breadcrumbs{
    float: left;
    margin: 20px 0;
    clear: both;
}

ul.breadcrumbs {
list-style: none;
    margin: 0;
    margin-top: 5px;
    padding: 0;
}

.breadcrumbs li{
    float: left;
    padding-left: 5px;
    color: #fff;
}

.breadcrumbs li a{
    color: #fff;
}

.breadcrumbs li.active a{
    color: #fff;
}

.section-title{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}


/*==============================================================================
HOME PAGE STYLES
================================================================================*/

/* NOTE ON HOME PAGE
----------------------------------------------------------------------------- */
.note{
    width: 100%;
    background: #f7f7f7;
    border: 1px solid #ececec;
    padding: 0;
    text-align: center;
    margin: 0 auto 20px auto;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

.note h1{
    font-size: 2em;
    color: #305899;
    text-transform: none;
    min-width: 740px;
    width: 900px;
    text-align: center; 
    margin: 20px;
    float: left;
}

.note p {
    clear: left;
    margin: 0 auto 20px auto;
    font-size: 1.2em;
    padding: 0 20px;
}    

.note .btn-big,
.note .btn-medium,
.note .btn-small{
    float: left;
    margin: -10px 20px 20px 20px;
}

/* DIVIDER WITH TITLE
----------------------------------------------------------------------------- */
.divider-with-title{    
    position: relative;
    background: url('../../images/divider.png') 0 50% repeat-x;
    margin-bottom: 35px;
}

.divider{
    width: 100%;
    height: 1px;
    background: #ececec;
    float: left;
    margin-bottom: 40px;
}

.divider-with-title .title{
    background: #fff;
    padding: 0 30px;
    display: table;
    margin: 0 auto;
}

.divider-with-title .title h1{
    font-size: 2em;
    text-transform: none;
    text-align: center;
    margin-bottom: -3px;
}

.divider-with-title span{
    color: #aaa;
    text-align: center;
}

/* BLOG POSTS ON HOME PAGE
----------------------------------------------------------------------------- */
.blog-post-home{
    width: 100%;
    float: left;
}

.blog-post-home .post{
    width: 100%;
    float: left;
}

.blog-post-home .post-info{
    width: 48px;
    height: 48px;
    float: left;
    margin-right: 20px;
    position: relative;
    background: #f6f6f6;
    border: 1px solid #ececec;
    top: 0;
    left: 0;
}

.blog-post-home .post-info p{
    text-align: center;
    line-height: 18px;
    color: #38BAF2;
    top: 5px;
    position: relative;
}

.blog-post-home .post-info .date{
    color: #aaa;
}

.blog-post-home .post-body{
    width: 390px;
    float: left;
}

.blog-post-home .post-body .meta li{
    float: left;
    padding-right: 5px;
    display: inline;
}

.blog-post-home .post-body .meta li.author{
    border-right: 1px solid #ececec;
    padding-right: 3px;
    margin-right: 6px;
}

/*==============================================================================
        9. PORTFOLIO PAGES STYLES
===============================================================================*/

/* PORTFOLIO IMG
----------------------------------------------------------------------------- */
.portfolio img{
    opacity: 1;
    border: 3px solid #ececec;
    padding: 10px;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.grid_3 .portfolio img{
    width: 194px;
}

.portfolio {
    margin-bottom: 0 }

.portfolio .portfolio-image{
    display: block;
    overflow: hidden;
}

.portfolio figcaption{
    float: left;
    width: 100%;
    min-height: 53px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.portfolio figcaption p + p{
    margin-top: 0;
}

figcaption .caption-title{
    padding-top: 0px;
    padding-bottom: 10px;
    width: 100%;
    z-index: 100;
    margin-top: 0px;
}

figcaption .title{
    line-height: 18px;
    color: #315A9C;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

figcaption .subtitle{
    text-align: left;
    margin-bottom: 0px;
}

/* PORTFOLIO PAGINATION
----------------------------------------------------------------------------- */
.pagination-container{
    width: 100%;
    float: left;
}

.pagination{
    float: right;
}

.pagination li{
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    height: 28px;
    text-align: center;
    margin-left: 5px;
    font: 12px Arial, sans-serif;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.pagination li a{
    color: #8f8f8f;
    padding-top: 8px;
    padding-right: 12px;
    padding-left: 12px;
    display: block;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.pagination li:hover a, .pagination li.active a{
    color: #fff;
}

.pagination li:hover, .pagination li.active{
    background: #38BAF2;
}

.pagination li.arrow a{
    padding-top: 7px;
}

.pagination.portfolio{
    margin-bottom: 40px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
}

/*==============================================================================
ABOUT PAGE STYLES
===============================================================================*/

/* Testimonials
----------------------------------------------------------------------------- */
.testimonial{
    background: #f6f6f6;
    margin-top: 40px;
}

.testimonial:before{
    content: "";
    background: url('../../images/about/quote-before.png') no-repeat;
    width: 28px;
    height: 20px;
    display: block;
    position: relative;
    top: 10px;
    left: 10px;
}

.testimonial:after{
    content: "";
    background: url('../../images/about/quote-after.png') no-repeat;
    width: 28px;
    height: 20px;
    display: block;
    position: relative;
    top: -10px;
    left: 100%;
    margin-left: -38px;
}

.testimonial-img-container{
    position: relative;
    top: -63px;
    left: 50%;
    margin-left: -43px;
    float: left;
    width: 93px;
    height: 93px;
}

.testimonial-mask{
    position: relative;
    overflow: hidden;
    z-index: 100;
}
.testimonial-img{
    width: 87px;
    height: 87px;
    overflow: hidden;
    position: relative;
    top: -90px;
    left: 3px;
}

.testimonial-text{
    float: left;
    margin-top: -50px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.testimonial-text p{
    line-height: 18px;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    display: block;
}

.testimonial-text p.testimonial-author{
    color: #bbb;
    margin-top: 0;
    padding-top: 5px;
    display: block;
    border-top: 1px solid #fff;
    border-bottom: none;
    padding-bottom: 0;
}


/* Team members
----------------------------------------------------------------------------- */
.team img{
    border: 3px solid #ececec;
}


.team .vertical-toggle div.title{
    width: 30px;
    height: 30px;
    display:block;
    text-indent: -9999px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    background: #38BAF2;
    cursor: pointer;
    position: relative;
    top: -15px;
    left: 50%;
    margin-left: -15px;
    z-index: 100;
}

.team .vertical-toggle div.title .toggle-btn{
    background-color: #38BAF2;
    background-image: url('../../images/about/toggle-closed.png');
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 30px;  
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
}

.team .vertical-toggle .active .toggle-btn{
    background-image: url('../../images/about/toggle-open.png') !important;
    background-color: #38BAF2;
}

.team .vertical-toggle .content{
    position: relative;
    top: -34px;
    background: #f6f6f6;
    padding: 30px 10px 10px;
}

.team .vertical-toggle .content p{
    text-align: center;
}

.member-data{
    float: left;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
}

.member-data ul{
    margin: 0 auto 10px;
    overflow: hidden;
    display: table;
    margin: 0;
    padding: 0;
}

.team .vertical-toggle .content .member-name{
    float: left;
    padding-right: 8px;
    border-right: 1px solid #707070;
    color: #707070;
    text-align: center;
}

.team .vertical-toggle .content .member-position{
    float: left;
    padding-left: 8px;
    color: #707070;
    padding-top: 2px;
    text-align: center;
}

.member-social-container{
    float: left;
    width: 100%;
}

.member-social{
    border-top: 1px solid #fff;
    padding-top: 8px;

    margin: 0 auto;
    display: table;
}

.member-social li{
    float: left;
    padding-right: 8px;
    padding-left: 8px;
    border-right: 1px solid #ddd;
    line-height: 11px;
    color: #aaa;    
}

.member-social li a{
    color: #aaa;
}

.member-social li a:hover{
    color: blue;
}

.member-social li:first-child{
    padding-left: 0;
}

.member-social li:last-child{
    padding-right: 0;
    border-right: none;
}

/*==============================================================================
SERVICES PAGE STYLES
================================================================================*/
.services-wrap{
    float: left;
}

.services-wrap .icon{
    background: url('../../images/icons/bkg.png') center 0 no-repeat;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    display: table;
    position: relative;
    overflow: hidden;
}

.service-content{
    margin-top: -45px;
    padding-top: 50px;
}

.service-content h5 {
    text-align: center;
    margin-bottom: 5px;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.service-content p {
    text-align:left;
    
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.service-content ul {
     list-style-type:square;
     color: #38BAF2;
     margin: 0;
     margin-left: 10px;
    padding: 0;
 }

.service-content ul li {
     margin-bottom: 5px;
     line-height: 20px;
     }

.service-content ul li span {
     font-size: 0.85em;
     color: #595959;
     }
     
.service-content ul li a {
    color:#315A9C;
    }
    
.service-content ul li a:hover {
    color:blue;
    }
        
.service-content .btn-big,
.service-content .btn-medium,
.service-content .btn-small{
    float: right;
    margin-left: 31%;

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.service-content .btn-big span,
.service-content .btn-medium span,
.service-content .btn-small span{
    text-transform: none;
    text-decoration: underline;
}

.service-content .btn-big:hover span,
.service-content .btn-medium:hover span,
.service-content .btn-small:hover span{
    color: #38BAF2;
    text-decoration: underline;
}


/* SERVICES HOME PAGE STYLING
----------------------------------------------------------------------------- */
.service-content.services-home {
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border: 3px solid #efefef;
    height: 100%;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.service-content.services-home .bullet
{
    padding: 4px 7px 0 0;
}

/* SERVICES HOME PAGE ALTERNATIVE STYLING
----------------------------------------------------------------------------- */

ul.services-wrap
{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.services-wrap-1
{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.services-wrap.home2 .icon{
    margin-left: 0;
    margin-right: 10px;
    float: left;
}

.services-wrap-1.home2 .icon{
    margin-left: 0;
    margin-right: 10px;
    float: left;
}

.service-content.services-home2{
    background: #fff;
    margin-top: 0;
    padding-top: 0;
}

.service-content.services-home3{
    margin-top: 0;
    padding-top: 0;
}


.service-content.services-home2 a {
    text-decoration: underline;
    color: #38BAF2;
    }

.service-content.services-home3 a {
    text-decoration: underline;
    color: #38BAF2;
    }

.service-content.services-home2 h5, 
.service-content.services-home2 p{
    text-align: left;
}

.service-content.services-home3 h5, 
.service-content.services-home3 p{
    text-align: left;
}

.service-content.services-home2 h5:link {
text-decoration: underline; }

.service-content.services-home3 h5:link {
text-decoration: underline; }

.service-content.services-home2 h5:hover{
    color: #00a5eb;
}

.service-content.services-home3 h5:hover{
    color: #00a5eb;
}


/* SERVICE ICONS
----------------------------------------------------------------------------- */
.services-wrap .icon-popular{
    background: url('http://www.elections.org.za/content/uploadedImages/popular.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-reports{
    background: url('http://www.elections.org.za/content/uploadedImages/reports.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-home{
    background: url('http://www.elections.org.za/content/uploadedImages/home.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-pencil{
    background: url('http://www.elections.org.za/content/uploadedImages/pencil.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-regdetails{
    background: url('http://www.elections.org.za/content/uploadedImages/regdetails.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-calendar{
    background: url('http://www.elections.org.za/content/uploadedImages/calendar.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-news{
    background: url('http://www.elections.org.za/content/uploadedImages/news.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-new {
    background: url('http://www.elections.org.za/content/uploadedImages/new.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap .icon-contact {
    background: url('http://www.elections.org.za/content/uploadedImages/contact.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.icon-popular,
.icon-reports,
.icon-regdetails,
.icon-pencil,
.icon-calendar,
.icon-news,
.icon-contact,
.icon-new,
.icon-details,
.icon-time,
.icon-candidates1,
.icon-reports1,
.icon-faqs,
.icon-votingStations,
.icon-observe,
.icon-special,
.icon-results,
.icon-signup   
 {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.services-wrap li:hover .icon-popular,
.services-wrap li:hover .icon-reports,
.services-wrap li:hover .icon-regdetails,
.services-wrap li:hover .icon-pencil,
.services-wrap li:hover .icon-calendar,
.services-wrap li:hover .icon-news,
.services-wrap li:hover .icon-contact,
.services-wrap li:hover .icon-new {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

/*==============================================================================
404 ERROR PAGE STYLES
================================================================================*/
.error-page img{
    margin: 0 auto;
    width: 371px;
    display: block;
    margin-bottom: 30px;
}

.error-page p{
    text-align: center;
    margin-bottom: 30px;
}

form.error-search{
    width: 195px;
    height: 30px;
    border: 1px solid #ddd;
    background: #fafafa;
    margin: 0 auto; 
    overflow: hidden;
    position: relative;
}

form.error-search .search-input{
    background: #fafafa;
    width: 145px;
    padding: 8px;
    float: left;
    color: #aaa;
    border-right: 1px solid #ddd;
    border-top: none;
    border-left: none;
    border-bottom: none;
}

form.error-search .search-submit{
    border: none;
    background: #f6f6f6 url('../../images/search.png') no-repeat center;
    width: 33px;
    height: 33px;
    padding-top: 8px;
    text-indent: -9999px;
    cursor: pointer;
    position: relative;
    top: -1px;
}

form.error-search .search-submit:hover{
    background: #38BAF2 url('../../images/search-hover.png') no-repeat center;
}

/*==============================================================================
BLOG PAGES STYLES
===============================================================================*/

.grid_9.content-sidebar-right{
    width: 680px;
    padding-right: 20px;
    float: left;
}

.grid_9.content-sidebar-left{
    width: 680px;
    padding-left: 20px;
    float: left;
}

.grid_9.content-sidebar-left .blog-post,
.grid_9.content-sidebar-right .blog-post{
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #ececec;
    float: left;
}

.grid_9.content-sidebar-left .post-info-container,
.grid_9.content-sidebar-right .post-info-container{
    width: 370px;
    float: left;
    margin-right: 20px;
    position: relative;
}

.post-info-container img{
    float: left;
    border: 3px solid #ececec;
}


/* IFRAME FOR VIDEO
----------------------------------------------------------------------------- */
.post-info-container iframe{
    border: 3px solid #ececec;
}

.post-info-container iframe{
    width: 364px;
    height: 214px;
}



/* POST INFO
----------------------------------------------------------------------------- */
.post-info{
    position: absolute;
    top: 3px;
    left: 3px;
}

.post-info li.date{
    background: #38BAF2;
    width: 50px;
    height: 60px;
    border-bottom: 1px solid #cb3d3e;
}

.post-info li.date p{
    text-align: center;
    font-size: 2em;
    line-height: 22px;
    color: #fff;
    width: 100%;
    display: block;
    padding-top: 10px;
}

.post-info li.date .month{
    text-align: center;
    width: 100%;
    display: block;
    padding-top: 3px;
}

.post-info li.category{
    width: 50px;
    height: 50px;
    background: #38BAF2;
    border-top: 1px solid #e54647;
    cursor: pointer;
}

.post-info li.category.photo{
    background: #38BAF2 url('../../images/blog/category-photo.png') center 9px no-repeat;
}

.post-info li.category.video{
    background: #38BAF2 url('../../images/blog/category-video.png') center no-repeat;
}

.post-info li.category.text{
    background: #38BAF2 url('../../images/blog/category-text.html') center no-repeat;
}

.post-info li.category.quote{
    background: #38BAF2 url('../../images/blog/category-quote.html') center no-repeat;
}


.post-info li.category.status{
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    overflow: hidden;
}

/* POST-INFO FOR POST THAT HAS NO IMAGE */
.blog-post.no-img .post-info-container{
    width: 50px !important;
    margin-right: 20px;
}

.blog-post.no-img .post-info{
    float: left;
    position: relative;
}


/* POST BODY
----------------------------------------------------------------------------- */
.post-body{
    width: 290px;
    float: left;
}

/* POST BODY FOR POST THAT HAS NO IMAGE */
.no-img .post-body{
    float: left;
    width: 590px;
}



.post-body h3{
    margin-bottom: 2px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.post-body h4:hover,
.post-body h3:hover,
.post-body h5:hover{
    color: #38BAF2;
}

.post-body .meta{
    width: 100%;
    float: left;
    margin-bottom: 12px;
}

.post-body .meta li, .post-body .meta li a{
    float: left;
    display: block;
    padding-right: 3px;
    color: #aaa;
}

.post-body .meta li.author{
    border-right: 1px solid #ececec;
}

.post-body .meta li.author a{
    color: blue;
}

.post-body .meta li:hover a{
    color: blue;
}

.post-body .meta li.comments-numb{
    padding-left: 5px;
    padding-right: 0;
}

.post-body .video-credits{
    margin-top: 3px;
    color: #aaa;
}
.post-body .video-credits a{
    color: #aaa;
}

.post-body .video-credits a:hover{
    color: blue;
}

/* BLOG POST WITH VIDEO
----------------------------------------------------------------------------- */
.video-container{
    float: left;
    width: 100%;
}

.video-container a{
    text-indent: -9999px;
}

.btn-play{
    background: url('../../images/blog/play.png') center no-repeat;
    background-color: #38BAF2;
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    display: none;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn-play:hover{
    background-color: #315A9C;
}

.video-container:hover .btn-play{
    display: block !important;
}



/* BLOG POSTS STYLE 2 (TWO POSTS IN ONE ROW)
----------------------------------------------------------------------------- */

.grid_9.content-sidebar-left .blog-post.style2,
.grid_9.content-sidebar-right .blog-post.style2{
    width: 330px;
    padding-bottom: 0;
    border-bottom: none;
}

.blog-post.style2 .post-body{
    width: 100%;
}

.blog-post.style2:nth-child(3n+1){
    margin-right: 20px;
}

.grid_9.content-sidebar-left .style2 .post-info-container,
.grid_9.content-sidebar-right .style2 .post-info-container{
    width: 100%;
    margin-bottom: 20px;
}

.style2 .video-js{
    width: 330px !important;
    height: 196px !important;
}


.blog-post.style2 iframe{
    margin-bottom: -7px;
    width: 324px;
    height: 190px;
}

/* BLOG POST STYLE 2 THAT HAS NO IMAGE */
.style2.no-img .post-info-container{
    width: 50px !important;
    margin-right: 20px;
}

.style2.no-img .post-info{
    float: left;
    position: relative;
}

.style2.no-img .post-body{
    float: left;
    width: 260px;
}

/* BLOG POSTS STYLE 3 (FULL WIDTH POST)
----------------------------------------------------------------------------- */

.grid_9.content-sidebar-left .blog-post.style3,
.grid_9.content-sidebar-right .blog-post.style3{
    width: 100%;
}

.blog-post.style3 .post-body{
    width: 100%;
}

.blog-post.style3  iframe{
    width: 674px;
    height: 300px;
}

.grid_9.content-sidebar-left .style3 .post-info-container,
.grid_9.content-sidebar-right .style3 .post-info-container{
    width: 100%;
    margin-bottom: 20px;
}

.style3 .video-js{
    width: 100% !important;
}

/* blog post style3 THAT HAS NO IMAGE */
.style3.no-img .post-info-container{
    width: 50px !important;
    margin-right: 20px;
}

.style3.no-img .post-info{
    float: left;
    position: relative;
}

.style3.no-img .post-body{
    float: left;
    width: 590px;
}

/* BLOG POSTS SINGLE PAGE
----------------------------------------------------------------------------- */
.blog-post.single{
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0;
}

.single .post-info-container{
    width: 100% !important;
    margin-bottom: 20px !important;
}

.blog-post.single .post-body{
    margin-bottom: 40px !important;
    width: 100% !important;
}

.single .video-js{
    width: 100% !important;
}


/* BLOG POST SINGLE THAT HAS NO IMAGE */
.blog-post.single.no-img .post-body{
    width: 590px !important;
}

/* BLOG POSTS COMMENT
----------------------------------------------------------------------------- */
.grid_9.content-sidebar-left .post-comments,
.grid_9.content-sidebar-right .post-comments{
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

.grid_9.content-sidebar-left .post-comments h4,
.grid_9.content-sidebar-right .post-comments h4{
    border-bottom: 1px solid #ececec;
    padding-bottom: 5px;
}

.post-comments .comments-li{
    float: left;
    width: 100%;
    margin-top: 20px;
}

.post-comments .comments-li > li{
    float: left;
    width: 100%;
}

.post-comments .comments-li .comment{
    margin-bottom: 15px;
    padding: 15px;
    float: left;
    background: #f6f6f6;
    border: 1px solid #ececec;
    min-height: 116px;
}

/* COMMENT AVATAR
----------------------------------------------------------------------------- */
.mask{
    float: left;
    overflow: hidden;
    z-index: 100;
    position: relative;
}

.post-comments .comments-li .comment .avatar{
    width: 87px;
    height: 87px;
    margin-right: 15px;
    float: left;
}

.author-img{
    float: left;
    position: relative;
    top: -90px;
    left: 3px;
}

/* COMMENT META
----------------------------------------------------------------------------- */
.post-comments .comments-li .comment .comment-meta{
    color: #a9a9a9;
    margin: 0 0 10px 100px;
}

.post-comments .comments-li .comment .comment-meta a{
    border-bottom: none;
    width: 100%;
    display: block;
    margin-bottom: 3px;
    color: #707070;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.post-comments .comments-li .comment .comment-meta a:hover{
    color: blue;
}

.post-comments .comments-li .comment .comment-body{
    margin-left: 100px;
}

.comment-body .btn-small span{
    padding: 4px 10px 3px;
}

/* BLOG POSTS CHILD COMMENT
----------------------------------------------------------------------------- */
.child{
    margin-left: 100px;
    float: left;
}

/* BLOG POSTS COMMENT FORM
----------------------------------------------------------------------------- */
.grid_9.content-sidebar-left .blog-post #respond,
.grid_9.content-sidebar-right .blog-post #respond{
    float: left;
    width: 100%;
}

.grid_9.content-sidebar-left .blog-post #respond h3#reply-title,
.grid_9.content-sidebar-right .blog-post #respond h3#reply-title{
    border-bottom: 1px solid #ececec;
    padding-bottom: 5px;
    font-size: 14px;
    line-height: 21px;
}

#respond form{
    margin-top: 20px;
}

#respond label{
    width: 100%;
    color: #707070;
    display: block;
    margin-bottom: 7px;
}

#respond .name-container{
    margin-right: 20px;
    float: left;
}

#respond .email-container{
    float: left;
}

#respond .name-container input, 
#respond .email-container input{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    height: 30px;
    width: 308px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    color: #a9a9a9;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#respond .message{
    float: left;
    margin-top: 5px;
}

#respond .message textarea{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    width: 658px;
    line-height: 22px;
    padding: 10px;
    color: #a9a9a9;
}

#respond #comment-reply{
    color: #fff;
    cursor: pointer;
    padding: 5px 12px;
    border: none;
    float: right;
    margin-top: 10px;

    background: #38BAF2;

    -moz-box-shadow: 1px 1px 2px #aaa;
    -webkit-box-shadow: 1px 1px 2px #aaa;
    box-shadow: 1px 1px 2px #aaa;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#respond #comment-reply:hover{
    background: #38BAF2;
}

#respond .name-container input:focus, 
#respond .email-container input:focus, 
#respond .message textarea:focus{
    border-color: #aaa;
}

/*==============================================================================
CONTACT PAGE
===============================================================================*/
#map_canvas{
    float: left;
    height: 400px;
    margin-bottom: 30px;
}


/* CONTACT FORM SIMPLE
----------------------------------------------------------------------------- */
.contact-form.simple{
    border-right: 1px solid #ececec;
    width: 459px;
}

.contact-form.simple .textarea{
    width: 415px;
}

.info h5{
    margin-bottom: 10px;
}

.contact-form .submit{
    color: #fff;
    cursor: pointer;
    padding: 5px 12px 4px;
    border: none;
    float: right;
    margin-right: 20px;
}

/* CONTACT PAGE WITH TABS (DEFAULT STYLE)
----------------------------------------------------------------------------- */

.contact-tab{
    width: 100%;
    position: relative;
    background: url('../../images/divider.png') 0 50% repeat-x;
    height: 40px;
}

/* CONTACT TABS
----------------------------------------------------------------------------- */
.contact-tab .product, 
.contact-tab .newsletter, 
.contact-tab .support{
    position: absolute;
    width: 227px;
    height: 38px;
    float: left;
    border: 1px solid #ececec;
    background: #f6f6f6;
}

.contact-tab .product{
    left: 0;
}

.contact-tab .support{
    right: 0;
}

.contact-tab .newsletter{
    left: 50%;
    margin-left: -114px;
}

.contact-tab .product,
.contact-tab .newsletter{
    margin-right: 86px;
}

.contact-tab .product:hover, 
.contact-tab .newsletter:hover, 
.contact-tab .support:hover{
    background: #38BAF2;
}

.contact-tab .product:hover > .icon, 
.contact-tab .newsletter:hover > .icon, 
.contact-tab .support:hover > .icon{
    color: #fff;
}

.contact-tab .product .icon, 
.contact-tab .newsletter .icon, 
.contact-tab .support .icon{
    position: relative;
    height: 40px;
    display: block;
    overflow: hidden;
    left: 10px !important;

}

.contact-tab .product .icon span, 
.contact-tab .newsletter .icon span, 
.contact-tab .support .icon span{
    padding-top: 12px;
    padding-left: 42px;
    display: block;
}

.contact-tab .icon{
    top: 0 !important;
    left:0 !important;
    padding: 0;
    width: 200px;
    height: 40px;  
    float: left;
    color: #707070;
    overflow: hidden;
}

.contact-tab .icon:hover{
    color: #fff !important; 
}

.product .icon{
    background: url('../../images/contact/product-inq.png') no-repeat;
    background-position:  -0px -40px;
}

.newsletter .icon{
    background: url('../../images/contact/newsletter.png') no-repeat 0 2px;
    background-position:  -0px -40px;
}

.support .icon{
    background: url('../../images/contact/techsupport.png') no-repeat 0 2px;
    background-position:  -0px -40px;
}

.contact-tab .active{
    background: #38BAF2;
}

.contact-tab .active .icon{
    background-position: -0px -0px;
    color: #fff;
}


/* CONTACT INFORMATION SECTION
----------------------------------------------------------------------------- */
.contact-info .info{
    margin-bottom: 30px;
}

/* CONTACT FORMS
----------------------------------------------------------------------------- */
.contact-forms .forms{
    border-left: 1px solid #ececec;
    padding-left: 30px;
    width: 589px !important;
    overflow: hidden;
}

.contact-form .textarea{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    color: #999;
    padding: 10px;
    width: 566px;
}

.contact-form .textarea:focus{
    border: 1px solid #aaa;  
    color: #666 !important;
}

.contact-form .text{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    color: #999;
    height: 30px;
    margin-bottom: 15px;
    margin-right: 15px;
    padding-left: 10px;
    width: 330px;
    display: block;
}

.contact-form .text:focus{
    border: 1px solid #aaa;  
    color: #999 !important;
}

.contact-form label{
    color: #8f8f8f;
    line-height: 18px;
    margin-bottom: 5px;
    display: block;
}

.contact-form .checkbox{
    margin-bottom: 15px;
}

.contact-form select{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    color: #999;
    line-height: 29px !important;
    padding: 8px 8px 8px 0;
    margin-bottom: 15px;
    margin-right: 15px;
    text-indent: 5px;
    width: 341px;
    display: block;
}

.contact-form fieldset{
    margin-bottom: 15px;
    display: block;
}

.contact-form p{
    margin-bottom: 15px;
}

#form-products, #form-support, #form-newsletter{
    display: none;
    margin-left: -500px;
}

.contact-forms .active{
    display: block !important;
    margin-left: 0 !important;
}

/*SUBMIT BUTTON */
.contact-forms .submit{
    color: #fff;
    cursor: pointer;
    padding: 5px 12px 4px;
    border: none;
    float: left;
}

input#unsubscribe{
    float:left;
}
.contact-forms label.unsubscribe{
    float: left;
    top: 2px;
    display: block;
    position: relative;
}


/* CHECKBOX STYLE */
input[type="checkbox"]{
    display: inline-block;
}

input[type="checkbox"] + label span{
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    background: url('../../images/contact/check.png') left top no-repeat;
    cursor: pointer;
    margin: -4px 7px 0 0;
}

input[type="checkbox"]:checked + label span{
    background: url('../../images/contact/checked.png') left top no-repeat;
}

/*==============================================================================
SIDEBAR STYLES
================================================================================*/
.aside{
    float: right;
}

.aside.left{
    float: left;
}

.aside-widgets{
    float: left;
    width: 100%;
    margin-top: 3px;
}

ul.aside-widgets {
list-style:none;
     margin: 0;
     padding: 0;
}

ul.aside-widgets li ul {
list-style:none;
margin: 0;
     padding: 0;
}

.aside-widgets > li{
    margin-bottom: 40px;
}

.aside-widgets > li h5{
    border-bottom: 1px solid #ececec;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.aside-widgets li li{
    padding-bottom: 10px;
}

.aside-widgets li a{
    color: blue;
    line-height: 20px;
    display: block;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.aside-widgets li a:hover{
    color: blue;
}

.aside-widgets .arrow-list li{
    border-bottom: 1px dotted #eee;
    background: url('../../images/list-square-grey.png') no-repeat 0 12px;
    padding-left: 18px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.social-feed li{
    padding-bottom: 0 !important;
    position: relative;
}

.social-feed li{
    background: url('../../images/loading.gif') no-repeat center;
}

.social-feed .img-overlay{
    width: 40px;
    height: 40px;
    background: red url("../images/portfolio/detail.png") no-repeat center center;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.social-feed .img-overlay:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/* ASIDE TWITTER FEED
----------------------------------------------------------------------------- */

.tweets-list-container.aside ul.tweet-list li{
    background: url('../../images/twitt.png')  no-repeat;
    padding-left: 35px;
}

/*==============================================================================
FOOTER STYLES
================================================================================*/
#footer-wrapper{
    width: 100% !important;
    float: left;
    background-color: #F4F4F4 !important;
    position: relative;
    text-align: left;
}

#footer{
    padding-top: 0px;
    margin: 0 auto;
    float: none;
}

#footer h4{
    margin-bottom: 10px;
    color: #525252;
    font-size: 1.5em;
    text-transform: none;
}

/* COPYRIGHT 
----------------------------------------------------------------------------- */
.copyright-container{
    width: 100%;
    float: left;
    margin: 0 auto;
    padding: 10px 0;
    margin-bottom: 0;
    background: #707070;
    border-top: 2px solid #B8B8B8;
}

.copyright-container a {
color: #fff;
}
.copyright{
    margin-bottom: 0;
    width: 940px;
    float: none;
}

.copyright p{
    padding-top: 5px;
    color: #fff;
    float: left;
    width: 600px;
    margin-right: 15px;
}

.copyright .breadcrumbs{
    padding-top: 0;
}

.copyright .breadcrumbs li a{
    line-height: 11px;
    color: #fff;
}

.copyright .breadcrumbs li a:hover{
    color: blue;
}

.copyright .breadcrumbs li{
    border-right: 1px solid #ececec;
    padding-right: 7px;
    padding-left: 7px;
}

.copyright .breadcrumbs li:last-child{
    border-right: none;
    padding-right: 0;
}

.copyright .breadcrumbs li.active a{
    color: #fff;
}

/* PRESENTATION ELEMENTS
================================================================================ */

/* Columns presentation
----------------------------------------------------------------------------- */

.note.column-illustration{
    background: #f6f6f6 !important;
    margin-bottom: 40px !important;
}

.grid_12.column-illustration{
    margin-bottom: 20px;
}

.grid_12.column-illustration.last{
    background: #f6f6f6;
    margin-bottom: 40px  !important;
    cursor: pointer;
}

.column-illustration .grid_1, 
.column-illustration .grid_2,
.column-illustration .grid_3, 
.column-illustration .grid_4, 
.column-illustration .grid_5,
.column-illustration .grid_6, 
.column-illustration .grid_7,
.column-illustration .grid_8, 
.column-illustration .grid_9,
.column-illustration .grid_10,
.column-illustration .grid_11,
.column-illustration .grid_12{
    background: #f6f6f6;
    margin-bottom: 0;
    cursor: pointer;
}

.column-illustration .grid_1 span, 
.column-illustration .grid_2 span,
.column-illustration .grid_3 span, 
.column-illustration .grid_4 span,
.column-illustration .grid_5 span,
.column-illustration .grid_6 span, 
.column-illustration .grid_7 span,
.column-illustration .grid_8 span, 
.column-illustration .grid_9 span,
.column-illustration .grid_10 span,
.column-illustration .grid_11 span,
.column-illustration .grid_12 span, 
.grid_12.column-illustration.last span{
    text-align: center;
    display: block;
    padding: 7px 0;
}

.column-illustration .grid_1 .hover, 
.column-illustration .grid_2 .hover,
.column-illustration .grid_3 .hover, 
.column-illustration .grid_4 .hover,
.column-illustration .grid_5 .hover,
.column-illustration .grid_6 .hover,
.column-illustration .grid_7 .hover,
.column-illustration .grid_8 .hover, 
.column-illustration .grid_9 .hover,
.column-illustration .grid_10 .hover,
.column-illustration .grid_11 .hover,
.column-illustration .grid_12 .hover, 
.grid_12.column-illustration.last .hover{
    display: none;
}

.column-illustration .grid_1:hover .normal, 
.column-illustration .grid_2:hover .normal,
.column-illustration .grid_3:hover .normal, 
.column-illustration .grid_4:hover .normal, 
.column-illustration .grid_5:hover .normal,
.column-illustration .grid_6:hover .normal, 
.column-illustration .grid_7:hover .normal,
.column-illustration .grid_8:hover .normal,
.column-illustration .grid_9:hover .normal,
.column-illustration .grid_10:hover .normal,
.column-illustration .grid_11:hover .normal,
.column-illustration .grid_12:hover .normal, 
.grid_12.column-illustration.last:hover .normal{
    display: none;
}

.column-illustration .grid_1:hover .hover, 
.column-illustration .grid_2:hover .hover,
.column-illustration .grid_3:hover .hover, 
.column-illustration .grid_4:hover .hover,
.column-illustration .grid_5:hover .hover,
.column-illustration .grid_6:hover .hover, 
.column-illustration .grid_7:hover .hover,
.column-illustration .grid_8:hover .hover, 
.column-illustration .grid_9:hover .hover,
.column-illustration .grid_10:hover .hover,
.column-illustration .grid_11:hover .hover,
.column-illustration .grid_12:hover .hover, 
.grid_12.column-illustration.last:hover .hover{
    display: block;
    color: #fff;
    background: #d74141;
}

/* Services presentation
----------------------------------------------------------------------------- */
.services-presentation li{
    width: 75px;
    height: 75px;
    float: left;
    margin-right: 3px;
    margin-bottom: 5px;
}

.services-presentation li .icon{
    margin-left: 0;
}

/* Social icons presentation
----------------------------------------------------------------------------- */
.social.presentation li{
    float: left;
    margin-bottom: 5px !important;
}

 /* Footer icons
----------------------------------------------------------------------------- */
.icon_phone {
    background: url("../../images/icon_footer_phone.png") no-repeat scroll left 4px transparent;
    font-size: 13px;
    line-height: 24px;
    padding: 0 0 0 30px;
}

.icon_mail {
    background: url("../../images/icon_footer_mail.png") no-repeat scroll left 5px transparent;
    font-size: 13px;
    height: 24px;
    padding: 8px 0 0 30px;
}

.icon_mail img {
border: none;
}
.icon_loc {
    background: url("../../images/icon_footer_loc.png") no-repeat scroll left 3px transparent;
    font-size: 13px;
    line-height: 24px;
    padding: 0 0 0 30px;
}

 /* Loading animation
----------------------------------------------------------------------------- */
.ajaxloaderBKG,DIV.ToolTip {
	left:0;
	top:0
}

.ajaxloaderBKG,.ajaxloaderdiv {
	height:100%
}

.ajaxloaderdiv {
	background:Black url(../../Workarea/images/application/loading.gif) center no-repeat;
	padding:18px 12px 18px 18px;
	top:200px
}

div.ajaxloadingimage 
{
	display:none;
    position:fixed;
    z-index:99999;
    background-color:gray;
    background-image:url('../../images/loading.gif');
	background-position:center center;
    background-repeat:no-repeat;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:.6;
    filter:Alpha(Opacity=50);
}
.ajaxloadingimage 
{
	display:none;
    position:fixed;
    z-index:99999;
    background-color:gray;
    background-image:url('../../images/loading.gif');
	background-position:center center;
    background-repeat:no-repeat;
    left:0;
    top:0;
    right:0;
    bottom:0;
    opacity:.6;
    filter:Alpha(Opacity=50);
}

 /* Modal
----------------------------------------------------------------------------- */
.modalBackground {
	background:#000;
	filter:alpha(opacity=80);
	opacity:0.7;
}

.ModalPopupBG
{
	background-color: #666699;
	filter: alpha(opacity=50);
	opacity: 0.7;
}

.popup_Container {
	background-color:#fff;
	/*border:2px solid #000000;*/
	padding: 20px;
}

.popupConfirmation
{
	width: 350px;
	height: 200px;
}

.popup_Titlebar {
	background: url(../../Images/bg_tab_inactive.jpg);
	height: 29px;
    color:#fff;
}
.popup_TitleErrorbar {
	background-color: red;
	height: 29px;
    color:#fff;
}

.popup_Body
{
	padding:15px 15px 15px 15px;
	color:#000000;
	line-height:15pt;
	padding:20px;
}

.TitlebarLeft 
{
	float:left;
	padding-left:5px;
	padding-top:5px;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-weight:bold;
	font-size:12px;
	color:#fff;
}
.TitlebarRight 
{
	background:url(../../Images/cross_icon_normal.png);
	background-position:right;
	background-repeat:no-repeat;
	height:15px;
	width:16px;
	float:right;
	cursor:pointer;
	margin-right:5px;
	margin-top:5px;
}

.popup_Buttons
{
	margin:10px;
    padding-bottom:5px;
}

 /* Modal
----------------------------------------------------------------------------- */
.accordionHeaderSelected,.Calendar {
	background:#a84e4e
}

.accordionHeaderSelected {
	border:1px solid #2f4f4f;
	margin-top:5px
}

.accordionContent {
	border-top:none
}

.ListSearchExtenderPrompt {
	background:Gray;
	font-style:normal
}

.Calendar {
	border:1px solid #646464;
    color:rgba(168, 78, 78, 0.70);
}

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: #fff;
    color: blue;
    display: block;
     float: left;
     margin:0px;
     padding:10px;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight:bold;
}

 /* Dialog
----------------------------------------------------------------------------- */
/*!
 * jQuery UI Dialog 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

.rtIn
{
    font-family: Arial, sans-serif !important;
}

/* Results page
----------------------------------------------------------------------------- */

.leaderboardTable
{
    border: 1px #37b9f2 solid;
    width: 100%;
}

.leaderboardHeader
{
    background-color: #37b9f2;
    padding: 5px;
    color: #fff;
    font-weight: 900;
    vertical-align: bottom;
}

.leaderboardRow1
{
    padding: 5px;
    vertical-align: middle;
}

.leaderboardRow2
{
    background-color: #F7f4f4;
    padding: 5px;
    vertical-align: middle;
}

.resultsBorder
{
    border: solid 1px #e6e6e6;
    background-color: #f7f4f4;
}

.resultsBlock
{
    margin: 10px;
}

.statusLabel
{
    padding: 3px;
    font-weight: bold;
    text-align: right;
}

.statusField
{
    padding: 3px;
    vertical-align: bottom;
}

.note_elections2016{
    background: #135EAB;
    border: 1px solid #135EAB;
    padding: 0;
    text-align: left;
    margin: 0 auto 20px auto;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

.note_elections2016 h1{
    font-size: 2em;
    color: #305899;
    text-transform: none;
    min-width: 740px;
    width: 900px;
    text-align: left; 
    margin: 20px;
    float: left;
}

.note_elections2016 p {
    clear: left;
    margin: 20px;
    font-size: 1.2em;
    padding: 5px;
}    

.note .btn-big,
.note .btn-medium,
.note .btn-small{
    float: left;
    margin: -10px 20px 20px 20px;
}
.elections2016
{
background-color:#cedff3;
    width: 100%;
    background: #cedff3;
    border: 0px solid #ececec;
    padding: 0px!important;
    text-align: left;
    margin: 0 auto 20px auto;
    margin-left: -30px;
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.icon-details
{
background:url('/content/uploadedimages/Registration details icon.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}
.icon-time
{
background:url('/content/uploadedImages/time.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}
.icon-candidates
{
background:url('/content/uploadedimages/candidates.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}
.icon-observe
{
background:url('/content/uploadedImages/observers.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}
.icon-special
{
background:url('/content/uploadedImages/special.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.icon-results
{
background:url('/content/uploadedImages/results.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.icon-signup
{
background:url('/content/uploadedImages/pwonline.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.service-content .services-home3 {
    background: transparent;
    margin-top: 0;
    padding-top: 0;

}
.services-wrap-1{
    float: left;
}

.services-wrap-1 .icon{
      background: url('/content/uploadedImages/back.png') center 0 no-repeat;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    display: table;
    position: relative;
    overflow: hidden;

}

.services-wrap-1 .icon-calendar{
    background: url('http://www.elections.org.za/content/uploadedImages/calendar.png') center center no-repeat;
    display: block;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
}

.services-wrap-1 li:hover .icon-details,
.services-wrap-1 li:hover .icon-time,
.services-wrap-1 li:hover .icon-candidates1,
.services-wrap-1 li:hover .icon-reports1,
.services-wrap-1 li:hover .icon-reports,
.services-wrap-1 li:hover .icon-faqs,
.services-wrap-1 li:hover .icon-votingStations,
.services-wrap-1 li:hover .icon-observe,
.services-wrap-1 li:hover .icon-special,
.services-wrap-1 li:hover .icon-calendar,
.services-wrap-1 li:hover .icon-results,
.services-wrap-1 li.hover .icon-signup {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}



.icon-candidates1 {background:url('/content/uploadedImages/candidates.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.icon-reports1 {background:url('/content/uploadedImages/reports.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.icon-faqs {background:url('/content/uploadedImages/faq.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}

.icon-votingStations{background:url('/content/uploadedImages/icon_votingstation.png') center center no-repeat;
display: block;
width:75px;
height: 75px;
text-indent:-9999px;
}
/* added for countdown - Sharon */

.candidate_nominations {
    background-color: #03488d;
    width: 100%;
   
    border: 0px solid #ececec;
    padding: 0px!important;
    text-align: left;
    
   /*height: 130px;*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.candidate1
{
color: #ffffff;
font-size: 32px;
font-weight:bold;
float: right;
    line-height: normal;
    padding-top:6px;
}

.candidate2
{
color: #fb9a01;
font-size: 32px;
font-weight:bold;
float: right;
    line-height: normal;
       padding-top:6px;
}


.countdownPAD
 {
    padding-left: 20px;

}

@media screen and (max-width: 500px) {

.countdownPAD
 {
    padding-left: 0px;

}

.candidate_nominations {
   
    
   height: auto;
   
}

.AutoHeight{
     height: auto;
}

}


@media screen and (max-width: 767px) {

    .candidate_nominations h2{
        font-size: 1.8em;
    }

}

@media screen and (min-width: 768px) {

    .candidate_nominations {
        height: 130px;
    }

}