﻿@charset "utf-8";
/* CSS Document */

/*html {
    height:100%;
}*/

td {
    vertical-align:top;
}

label {line-height:1.2em;}
label {margin-bottom:10px;}

body {
    overflow-y:auto;
    height:100%;
    font-size:12px;
}

.main .container {
    max-width:800px;
}

.instruction {
    color:#AAA;
    font-size:11px;
}

.bg01 { 
	background: #FFFFFF; 
	margin: 0 auto; 
    width: 100%; 
    position: relative; 
}
.bg02 { 
	background: #F3F3F3; 
	margin: 0 auto; 
    width: 100%; 
    position: relative; 

}

.height20 {
    height:10px;
}

.main .header
{
	background:#069;
	color:white;
	padding:20px;
}

.main .content
{
	padding:20px 10px;
}

.main .form-group
{
	border:0px;
}

.main .form-control
{
    background:transparent;
	border:0px;
	border-bottom:1px solid #CCCCCC;
	box-shadow:none;
	padding:0px;
    margin-bottom:10px;
    border-radius:0px;
    font-size:16px;
}

.main .form-control.textarea
{
	border:1px solid #CCCCCC;
    margin-top:10px;
    min-height:60px;
    padding:10px;
    font-size:12px;
}

.main .form-control.dropdown
{
	border:1px solid #CCCCCC;
    margin-top:10px;
    padding:5px;
    font-size:12px;
}

@media all and (max-width: 420px) {
    .main input[type=checkbox], .main input[type=radio] {
        display:block;
    }
}

.main input[type=checkbox], .main input[type=radio] {
background:white;
border:0px;
margin-bottom:10px;
margin-right:10px;
}

.main input[type=checkbox] + label, .main input[type=radio] + label {
display:inline-block;
vertical-align:middle;
cursor:pointer;
color:#666;
margin-right:30px;
font-size:12px;
}

.main label {
    color:#888;
    font-weight:normal;
    display:block;
}

.main .row {
    
}

.main h3,h4,h5 {
    padding:0px;
    margin:0px;
}

.main h1 {
    text-transform:uppercase;
    margin:10px 10px 15px 0;
}

.main h4,
.main .h4 {
    margin-bottom:10px;
    text-transform:uppercase;
    font-weight:900;
    color:#2C4999;
}

.main h5 {
    font-weight:bold;
}

.main h6 {
    color:#2684C4;
    line-height:1.3em;
}

.ajax-combobox .ajax__combobox_inputcontainer
{
    
}
.ajax-combobox .ajax__combobox_textboxcontainer
{
    width:100%;
}
.ajax-combobox .ajax__combobox_textboxcontainer input
{
    background:transparent;
    width:100%;
    border:0px;
	border-bottom:1px solid #CCCCCC;
	padding:5px 0 !important;
    color:#333;
    font-size:14px;
    font-weight:bold;
    margin-bottom:10px !important;
}

.ajax-combobox .ajax__combobox_textboxcontainer input:focus
{
    outline:0;
    border-bottom:1px solid #CCCCCC;
}
.ajax-combobox .ajax__combobox_buttoncontainer
{

}
.ajax-combobox .ajax__combobox_buttoncontainer button
{
    margin-bottom:10px !important;
}
.ajax-combobox .ajax__combobox_itemlist
{
    width:100% !important;
    position:absolute !important;
    top:35px !important;
    left:0px !important;
}
.ajax-combobox .ajax__combobox_itemlist li
{
    white-space: nowrap;
    padding:5px;
    border-bottom:1px solid #EEE;
}

.txt_electorate {
    border-top:1px solid #FFF;
    border-bottom:1px solid #FFF;
    display:inline-block;
    width:auto;
    text-transform:uppercase;
    margin:0 5px 5px 0;
}

.photo {
    box-shadow:2px 2px 8px #333333;
}

.main .footer {
    font-size:11px;
    color:#666;
	line-height:1.2em;
}

.required {
}

.validation {
    color:red;
}

.validation.green {
    color:green;
}

/*BUTTON*/


.button {
        
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
        
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
        
    background-color:#007dc1;
        
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
        
    border:1px solid #124d77;
        
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:normal;
    padding:6px 15px;
    text-decoration:none;
        
    text-shadow:0px 1px 0px #154682;

    white-space: normal;
        
}
.button:hover {
        
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
    background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
    background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
        
    background-color:#0061a7;
    text-decoration:none;
    color:#FFFFFF;
}
.button:active {
    position:relative;
    top:1px;
}

.button.orange {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
        box-shadow:inset 0px 1px 0px 0px #ffe0b5;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
        background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
        background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
        background-color:#fbb450;
        border:1px solid #c97e1c;
        text-shadow:0px 1px 0px #8f7f24;
}
.button.orange:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
        background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
        background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
        
        background-color:#f89306;
}
.button.green {
        -moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
        -webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
        box-shadow:inset 0px 1px 0px 0px #9acc85;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
        background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
        background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
        background-color:#74ad5a;
        border:1px solid #3b6e22;
        text-shadow:0px 1px 0px #92b879;
}
.button.green:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
        background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
        background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
        background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
        background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
        background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
        background-color:#68a54b;
}

    .button.inactive {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #DDDDDD), color-stop(1, #cacaca));
        background:-moz-linear-gradient(top, #DDDDDD 5%, #cacaca 100%);
        background:-webkit-linear-gradient(top, #DDDDDD 5%, #cacaca 100%);
        background:-o-linear-gradient(top, #DDDDDD 5%, #cacaca 100%);
        background:-ms-linear-gradient(top, #DDDDDD 5%, #cacaca 100%);
        background:linear-gradient(to bottom, #DDDDDD 5%, #cacaca 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#cacaca',GradientType=0);
        background-color:#DDDDDD;
        border:1px solid #cacaca;
        text-shadow:0px 1px 0px #ffffff;
    }

    .button.inactive:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cacaca), color-stop(1, #DDDDDD));
        background:-moz-linear-gradient(top, #cacaca 5%, #DDDDDD 100%);
        background:-webkit-linear-gradient(top, #cacaca 5%, #DDDDDD 100%);
        background:-o-linear-gradient(top, #cacaca 5%, #DDDDDD 100%);
        background:-ms-linear-gradient(top, #cacaca 5%, #DDDDDD 100%);
        background:linear-gradient(to bottom, #cacaca 5%, #DDDDDD 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#DDDDDD',GradientType=0);
        background-color:#cacaca;
    }

    
    .button.red {
        
        -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
        -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
        box-shadow:inset 0px 1px 0px 0px #cf866c;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
        background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
        background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
        background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
        background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
        background-color:#d0451b;
        border:1px solid #942911;
        text-shadow:0px 1px 0px #854629;
        
    }
    .button.red:hover {
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
        background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
        background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
        background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
        background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
        background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
        background-color:#bc3315;
    }

        .button.xsmall {
    font-size:11px;
padding:3px 5px;
}

    .button.small {
    font-size:12px;
padding:3px 8px;
}

.button.large {
    font-size:16px;
font-weight:bold;
padding:12px 24px;
}

.button.xlarge {
    font-size:18px;
font-weight:bold;
padding:24px 12px;
}

/* RESPONSIVE TABLE
-------------------------------------------------*/

@media only screen and (max-width: 892px) {
	
	/* Force table to not be like tables anymore */
	.no-more-tables table, 
	.no-more-tables thead, 
	.no-more-tables tbody, 
	.no-more-tables th, 
	.no-more-tables td, 
	.no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.no-more-tables tr { /*border: 1px solid #DDD;*/ margin-bottom:10px; }
 
	.no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;
		white-space: normal;
		text-align:left;
        padding: 5px 5px 5px 50%;
        width:100% !important;
	}
 
	.no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

    .table-normal table { 
		display:table;
	}

    .table-normal tr { 
		display:table-row;
	}

    .table-normal td { 
		display:table-cell;
        width:inherit !important;
	}

	/*
	Label the data
	*/
	.no-more-tables td:before { content: attr(data-title); }

    .flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	.flip-scroll * html .cf { zoom: 1; }
	.flip-scroll *:first-child+html .cf { zoom: 1; }
	
	.flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 
	.flip-scroll th,
	.flip-scroll td { margin: 0; vertical-align: top; }
	.flip-scroll th { text-align: left; }
	
	.flip-scroll table { display: block; position: relative; width: 100%; }
	.flip-scroll thead { display: block; float: left; }
	.flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	.flip-scroll thead tr { display: block; }
	.flip-scroll th { display: block; text-align: right; }
	.flip-scroll tbody tr { display: inline-block; vertical-align: top; }
	.flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
 
 
	/* sort out borders */
 
	.flip-scroll th { border-bottom: 0; border-left: 0; }
	.flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
	.flip-scroll tbody tr { border-left: 1px solid #babcbf; }
	.flip-scroll th:last-child,
	.flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}
