* {
    margin: 0;
}

html>body #container 
{
    height: auto;
}

html, body, form
{
    border:0;		
    margin: 0;
    padding: 0;
    height:100%;   
    width:100%;       
}
            
body 
{
	margin: 0;
	padding: 0;
    background:#FFF;
	color: #343434;
	font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
	font-size:10pt;   
}

iframe
{
    border: none;
    margin:0; 
    padding:0; 
}

legend
{
	border: solid 1px #343434;
	background-color: #fff;
	color: #343434;
	font-size:10pt;
	font-weight: bold;
	padding: 3px;
}

fieldset
{
    padding: 5px; 
	color: #343434;
}
            
a 
{
	text-decoration: none;
	color: #4486C7;
	font-size:10pt;
}

select
{
	margin: 0;
	padding: 0;
	border: solid 1px #343434;
	background-color: #fff;
	font-size:10pt;
	color: #343434;
}

table
{
	 border: 0;
	 padding: 0;
	 border-collapse: collapse;
}

tr
{
	vertical-align : top;
}

input[type="button"], input[type="submit"], input[type="reset"], .custom-button
{
	border: solid 1px #000000;
	background-color: #369;
	color: #fff;
	font-size:10pt;
	font-weight: bold;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
}

input[type="image"]
{
    vertical-align: top;
}

input[type="text"], input[type="password"], textarea
{
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
   
	border: solid 1px #343434;
	background-color: #fff;
	font-size:10pt;
	color: #343434;
	padding: 1px;
}

input[type="file"]
{
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	
	background-color: #fff;
	color: #343434;
	border: solid 1px #343434;
	font-size:10pt;
	font-weight: bold;
	width:300px;
}


.required
{
  /*box-shadow: 0 0 5px rgba(255, 0, 0, 1);*/
  border: solid 1px rgba(255, 0, 0, 1);
}

.minorDob
{
  border: solid 1px rgba(255, 0, 0, 1) !important;
  background-color : #ffc !important;
}

.red
{
	background-color: #b94a48 !important;
}

.warningPanel
{
	border: solid 1px red !important;
	background-color: #ffc !important;
	color: red;
	font-weight: bold !important;
	margin: 0 auto 5px;
	padding: 10px;
}

.warningPanel > p
{
	text-align: center;
}
input[type="text"].required, textarea.required
{
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
   
    border: solid 1px rgba(255, 0, 0, 1);
	background-color: #fff;
	font-size:10pt;
	color: #343434;
	padding: 1px;
}
 
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus 
{
  /*box-shadow: 0 0 5px rgba(81, 203, 238, 1);*/
  border: solid 1px rgba(81, 203, 238, 1);
}

input[type="text"][readonly] , input[type="password"][readonly] , textarea[readonly] 
{
	border: 0;
}

input[type="checkbox"]
{
	border: 0;
	color: #343434;
	padding: 0;
    margin: 0;
}

a.button
{
	border: solid 1px #000000;
	background-color: #369;
	color: #fff;
	font-size:9pt;
	font-weight: bold;
    padding: 2px 5px 2px 5px;
    text-decoration: none;
    display:inline-block;
    vertical-align: top;
}

.tableheading th {
    padding: 2px 2px; 
    color: #fff; 
    background: #369; 
    font-weight: bold;
    border: 0;
}

.Grid { 
	background-color: #fff; 
	margin: 1px 0 1px 0;
	border-collapse:collapse; 
	color: #333333;
	font-size:10pt;
	width: 95%;
	padding: 0;
}

.Grid th { 
    padding: 2px 2px; 
    color: #fff; 
    background: #369; 
    font-weight: bold;
    border: 0;
}

.Grid th  a 
{
    color: #fff;
    text-decoration: none;
}

.Grid th  a:hover 
{
    color: #EAEA00;
}

.Grid td { 
    padding: 1px;
    border: solid 1px #c1c1c1; 
    color: #333333; 
    background: #F7F6F3;
}
 
.Grid .alt td
{
    color: #284775; 
    background: #fff;
}
 
.Grid .sel td
{
    color: #284775; 
    background: #ffffcc;
}

.Grid .pgr 
{ 
    background: #369; 
    color: #fff;
    text-align: center;
}

.Grid .pgr table 
{ 
    background: #369; 
    margin: 5px 0;
    border-collapse:collapse;
    border: 0;
    padding: 0;
}
 
.Grid .pgr td { 
    background: #369; 
    border-collapse:collapse;
    border: 0; 
    padding: 0 6px; 
    font-weight: bold; 
    color: #fff; 
    line-height: 12px; 
 } 
 


.mGrid { 
	background-color: #fff; 
	margin: 1px 0 1px 0;
	border-collapse:collapse; 
	color: #333333;
	font-size:16pt;
	width: 95%;
	padding: 0;
}

.mGrid th { 
    padding: 2px 2px; 
    color: #fff; 
    background: #369; 
    font-weight: bold;
    border: 0;
}

.mGrid th  a 
{
    color: #fff;
	font-size:16pt;
    text-decoration: none;
}

.mGrid th  a:hover 
{
    color: #EAEA00;
}

.mGrid td { 
    padding: 1px;
    border: solid 1px #c1c1c1; 
    color: #333333; 
    background: #F7F6F3;
}
 
.mGrid .alt td
{
    color: #284775; 
    background: #fff;
}
 
.mGrid .sel td
{
    color: #284775; 
    background: #ffffcc;
}

.mGrid .pgr 
{ 
    background: #369; 
    color: #fff;
    text-align: center;
}

.mGrid .pgr table 
{ 
    background: #369; 
    margin: 5px 0;
    border-collapse:collapse;
    border: 0;
    padding: 0;
}
 
.mGrid .pgr td { 
    background: #369; 
    border-collapse:collapse;
    border: 0; 
    padding: 0 6px; 
    font-weight: bold; 
    color: #fff; 
    line-height: 18px; 
 } 
 
 
 
.indexscroll {
    max-height: 400px;
    width: 100%;
    overflow: auto;
    padding: 0;
}

.frmViewer
{
    width: 80%;
    border: 0;
    padding: 2px;
    float: left;
}

.frmIndexPane
{
    float: left;
    width: 16%;
}

.frmIndexViewer
{
    float: right;
    width: 83%;
}

#detailscroll
{
    max-height: 500px;
    width: 19%;
    overflow: auto;
    padding: 0;
    float: right;
    margin-top: 20px;
}


#container
{
	width: 100%; 	
	margin: 0 auto; 
    background:fff;
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
	position: relative;    
    height: auto !important;
}

#header 
{
	clear:both;
	width: 100%;
	margin: 0;
	padding: 0;
    background-color: #369; 
	overflow: hidden;
	border-bottom: solid 2px #A3D9F5; 
}


#login
{
    background-color: #369; 
}


#login #logo 
{
	padding: 10px;
	float: left;
}

#login #logo img
{
    height: 90%;
}

.countylogo 
{
	margin-top:-15px;
	top: 0px;
	height: 42px;
	padding-right: 10px;
	float: left;
}

#login #loginsection
{
	float: left;
	padding: 10px;
}

#info a
{
    color: #fff;
    text-decoration: underline; 
}

#contentContainer
{	    
    /*margin: 0 auto 3em;	*/	
    padding: 0;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-bottom: 50px;
}

.defaultContent
{
    margin: 0 auto;
    width: 100%;
}

.wideContent
{
	width: 100%; 
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

.Grid
{
    width: 100% !important;
}

.CondensedGrid {
    width: 0% !important;
    padding: 2px !important;
}
    .CondensedGrid th {
        padding-right: 6px;
        text-align: left;
    }
    .CondensedGrid td {
        padding-right: 6px;
        text-align: left;
    }


#footer
{
	clear: both;
	width: 100%; 
	padding-top: 10px;
	padding-bottom: 5px;
	background: #ECECEC;
	border-top: 1px solid #DEDEDE;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt; 
	font-weight: bold; 
	text-align: center;   
	position: absolute;
    bottom: 0;
}

#message
{
    padding: 1px;
    color: #ff0000;
    font-weight: bold;
    text-align: center;
}


#errorPanel
{
    padding: 10px;
    color: #ff0000;
    font-weight: bold;
    width: 450px;
    margin: 0 auto;  
    margin-top: 50px;  
    border: solid 1px #ff0000;
}

#errorPanel table
{
	padding: 10px;
	border: 0;
	width: 100%;
}

.alert{
    padding: 3px;
    color: #ff0000;
    font-weight: bold;
    text-align: center;
}

.clickable:hover
{
    cursor: pointer;
}

#clientSelection
{
    padding: 3px;
    
}

#leftColumnIndex
{
    float:left;
    width:24%;
    height: auto !important;
    height: 100%;
    font-size: 10pt;
}

#leftColumnIndex .field
{
	width: 98%;
}

#rightColumnIndex
{
    float:right;
    width:75%;
    height: auto !important;
    height: 100%;
    /*border: solid 1pt #6094DB; */
}

#leftColumn
{
    float: left;
    width: 19%;
    height: auto !important;
    height: 100%;
    font-size: 10pt;
    border: solid 1pt #6094DB; 
}

#leftColumn table{
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

#leftColumn td.cell{
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
}

#leftColumn td.heading{
    color: #333333;
    background-color: #EAEEFA;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#leftColumn td.search{
    text-align: right;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#leftColumn .field
{
	width: 90%;
}

#rightColumn
{
    float: right;
    width: 80%;
    height: auto !important;
    height: 100%;
    /*border: solid 1pt #6094DB; */
}

#imagePanel
{
    float:left;
	border: solid 1pt #6094DB; 
	padding: 3px;
	margin: 0 auto;
    height: auto !important;
    height: 100%;
    width: 99%;
}

#resultPanel {
    max-height: 145px;
    width: 99%;
    overflow: auto;
    float: left;
    border: solid 1pt #6094DB; 
    padding: 3px;
	margin: 0 auto;
	margin-bottom: 4px;
}

.listbox
{
    width: 100px;
    padding: 0;
    margin: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.selectionPanel {
    max-height: 100px;
    width: 100%;
    padding: 0;
    float: left;
    overflow: auto;
    overflow-x: hidden; 
    overflow-y: auto;
}

.indexPopup
{
    z-index: 9999;
    width: 175px;
    height: 200px;
    background-color: #FFFFFF;
    border: solid 1pt #000000;
    padding: 3px;
    overflow: auto;
    overflow-x: hidden; 
    overflow-y: auto;
}

.validatorPopup
{
    z-index: 9999;
    left: -100; 
}


/*Modal Popup*/
.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
    position: absolute; 
    left: 0;
    top: 0;
    width:100%;
    height:100%;
}

.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:5px;
    
}  

.modalPopupLoading {
    background-color:#ffffff;
    border-width:3px;
    border-style:solid;
    border-color:black;
    padding:5px;
	position:relative; 
	top:40%;
	left: 45%;
    width:200px;
	text-align: center;
}  


/*Print selection*/
.panelPrintSelection
{
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:10px;
    width:400px;
}

.panelPrintSelection td
{
	padding: 5px;
	border: 0;
}

        
    .DetailTable { 
        background-color: #ffffff; 
        margin: 1px 0 1px 0;
        border-collapse:collapse; 
        color: #333333;
	    font-size:10pt;
	    width: 98%;
	    padding: 0;
    }

    .DetailTable th { 
        padding: 4px 4px; 
        color: #fff; 
        background: #369; 
        font-weight: bold;
        border: 0;
        text-align: left;
    }

    .DetailTable td { 
        padding: 2px;
        border: 0; 
        color: #333333; 
        background-color: #ffffff; 
    }
    
    .Label
    {
		border: solid 1px #333333;
		padding: 0px 5px;
    }
    
    .LabelWhite
    {
    	border: solid 1px #333333;
		 padding-right: 5px;
		 margin-right: 5px;
		 background-color: White;
		 
    }

    .TextWhite
    {
    	border: solid 1px #3333FF;
		 padding-right: 5px;
		 margin-right: 5px;
		 background-color: White;
		 
    }

@media print
{
	.PageBreak  
	{
		border: 0;
		margin: 0;
		padding: 0;
		height: 0;
		display:block;
		page-break-before: always; 
	}
}
        
/*
.CustomValidator {position:relative;margin-left:-80px;} 
 
.CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; position:relative;} 
 
.CustomValidator td {border:solid 1px Black;background-color:LemonChiffon;} 
 
.CustomValidator .ajax__validatorcallout_popup_table {display:none;border:none;background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_popup_table_row {vertical-align:top;height:100%;background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_callout_cell {width:20px;height:100%;text-align:right;vertical-align:top;border:none;background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_callout_table {height:100%;border:none;background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_callout_table_row {background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_callout_arrow_cell {padding:8px 0px 0px 0px;text-align:right;vertical-align:top;font-size:1px;border:none;background-color:transparent;} 
 
.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {font-size:1px;position:relative;left:1px;border-bottom:none;border-right:none;border-left:none;width:15px;background-color:transparent;padding:0px;} 
 
.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div {height:1px;overflow:hidden;border-top:none;border-bottom:none;border-right:none;padding:0px;margin-left:auto;} 
 
.CustomValidator .ajax__validatorcallout_error_message_cell {font-family:Verdana;font-size:10px;padding:5px;border-right:none;border-left:none;width:100%;} 
 
.CustomValidator .ajax__validatorcallout_icon_cell {width:20px;padding:5px;border-right:none;} 
 
.CustomValidator .ajax__validatorcallout_close_button_cell {vertical-align:top;padding:0px;text-align:right;border-left:none;} 
 
.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none;text-align:center;width:10px;padding:2px;cursor:pointer;} 
 
*/ 


.ui-combobox {
	position: relative;
	display: inline-block;
}
.ui-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
	/* adjust styles for IE 6/7 */
	*height: 1.7em;
	*top: 0.1em;
}
.ui-combobox-input {
	margin: 0;
	padding: 0.3em;
}

.ui-autocomplete {
		max-height: 180px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
}

/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
	height: 180px;
}

#videos {
    position: relative;
    width: 800px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    background-color: gray;
    border-color: black;
    border-width: 2px;
    border-style: solid;
}

#subscriber {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#publisher {
    position:relative;
    width: 240px;
    height: 135px;
    top: -141px;
    left: 3px;
    z-index: 100;
    border: 3px solid white;
    border-radius: 3px;
}

.startbutton {
    position:relative;
    width: 240px;
    height: 40px;
    top: -400px;
    left: 280px;
    z-index: 150;
    border-radius: 10px;
}

.videoStart {
    position:absolute !important;
    width: 240px !important;
    height: 40px !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 150 !important;
    border-radius: 10px !important;
    background-color: green;
}

.controlbar {
    position:relative;
    width: 52px;
    height: 52px;
    top: -245px;
    left: 740px;
    z-index: 150;
}

.videoLeave {
    position:relative !important;
    width: 52px !important;
    height: 52px !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 150 !important;
}


/* Styling for the home page on-duty warrant judge panes */
.warrantJudgeParentPanel {
    width: 475px;
    padding: 15px;
}
.nextJudgePanel {
    background-color: lightyellow;
    padding: 15px;
    border: 1px solid #808080;
}

.contactJudgePanel {
    border: 1px solid #808080;
    padding: 15px 15px 0px 15px;
    margin-bottom: 15px;
}
    .contactJudgePanel > div {
        margin-bottom: 15px;
    }
    .contactJudgePanel > div > div {
        margin-bottom: 15px;
    }
    .contactJudgePanel h3 {
        margin-bottom:10px;
    }
    .contactJudgePanel .alertInfo {
        color: blue;
    }
    .contactJudgePanel .smallHeader
    {
        font-weight:bold;
    }
    .contactJudgePanelDisabled {
        background-color: #ccc;
        color: #838383;
    }
        .contactJudgePanelDisabled .alertInfo {
            color: #838383;
        }

        .contactJudgePanelDisabled .specialInstructions {
            color: #838383;
        }

.contentPanelArea {
    padding: 15px;
}

    .contentPanelArea h1 {
        margin-bottom: 10px;
    }

.homePageNotifications {
    margin: 25px 25px 25px 0px;
    padding: 15px;
    border: solid 1px #000000;
    width: 627px;
}

.notificationMaintenance {
    background-color: #ccc;
}

.notificationWelcome {
    background-color: #9CDBF3;
}

.notificationPasswordExpired {
    background-color: #eaaea4;
}

.chargeTable {
    margin-top: 10px;
    border: 1px solid #000000;
}

    .chargeTable td {
        border: 1px solid #000000;
        padding: 5px;
        background-color: #fff;
    }

    .chargeTable th {
        padding: 2px 2px;
        color: #fff;
        background: #369;
        font-weight: bold;
        border: 1px solid #000000;
    }

.warrantFormSection {
    margin-top: 20px;
}
.warrantFormSectionBanner {
    padding: 2px 2px;
    color: #fff;
    background: #369;
    font-weight: bold;
    border: 0;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}

.warrantFormFieldSet {
    display: inline-block;
    margin-right: 10px;
    float: left;
}
    .warrantFormFieldSet input {
        margin-bottom: 5px;
    }
    .warrantFormFieldSet label {
        display: block;
    }

.warrantFormMaxWidth {
    width: 675px;
}

.warrantCheckBoxFormFieldSet {
    display: inline-block;
    margin-right: 25px;
    float: left;
}
    .warrantCheckBoxFormFieldSet table {
        margin-left: 10px;
    }

    .warrantCheckBoxFormFieldSet table th {
        font-weight: normal;
        padding-right: 15px;
    }

.warrantRadioFormFieldSet {
    display: inline;
    margin-right: 25px;
    float: left;
}
    .warrantRadioFormFieldSet input[type=radio] {
        margin-left: 10px;
    }

.warrantFormRow {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.warrantSpecialAlert {
    color: red;
    font-weight: bold;
}