/* custom forms styles */
fieldset {
    background-color:transparent;
    margin:0px 0px 20px 0px;
    padding:15px 20px 30px;
}
/* inner fieldsets are largely used to give semantic meaning to list fields and questions groups so the style should be pretty lowkey*/
fieldset fieldset {
   /* border:1px solid #DDDDDD;
    background-color:#EEEEEE;*/
    padding:5px 5px 5px;
    margin:0;
}
/* we have bottom space issues with some fieldsets */
fieldset.compact {
    background-color:transparent;
    margin:0;
    padding:15px 20px 0px 20px;
}

fieldset fieldset legend
{
    padding:0;
    background-color:#FFFFFF;
    font-size:16px;
}

legend /* might need  */
{
    font-family: 'tires', serif;
	padding:  5px;
	color:#00255a;
	font-size: 18px;

}
/*
h3 {
    color: #333333;
    font-size: 16px !important;
    margin: 20px 0 5px 0;
    font-weight: bold;
    font-family: "open_sansregular", sans-serif;
    padding-bottom: 8px !important;
}
h3.spacebelow {
    padding: 0 0 0 5px;
    margin-bottom: 0;
    font-size: 15px !important;
}
*/

select {
    border: 1px solid #CCCCCC;
    color: #444444;
    font-size: 14px;
    padding: 2px;
}

input[type="text"], input[type="password"] {
    border: 1px solid #CCCCCC;
    color: #444444;
    font-size: 14px;
    padding: 2px;
    margin:0;
    /*width: 200px;*/
    border-radius: 3px;   
}

input[type="text"]:focus, input[type="password"]:focus {
    border: 1px solid #0099CC;    
    transition:all 0.3s ease-in-out 0s;
}

.checkBoxList ul li, largeFieldLabelSet ul li {
    list-style:none !important;
    padding-bottom: 0 !important;
}

.deleteButton{
	padding:20px 20px 10px 50px;
	font-weight: bold;
}

/* this is the container for the button row at the bottom of the page */
.submitButton{
	text-align:center; 
	margin-top: 50px;/* default the alignment to the bottom right */
	width:90%;
}

/* default button and link styles for the bottom of the form */
.submitButton input, .submitButton button, .deleteButton input, .deleteButton button, .submitButton > .linkButton{   
    color: White;
    font-family: "open_sansregular", sans-serif;
    font-size: 15px;
    /*padding: 1px 20px 8px 20px;*/ /*1-14-15*/
    padding:4px 20px 12px;
    border-radius:3.1px;	/*3.1 for rendering in IE*/
    cursor: pointer;
    margin:0;
   /* float:right; /* this should float the buttons right by default*/
}

/* default button hover color */
.submitButton input:hover, .submitButton button:hover, .deleteButton input:hover, .deleteButton button:hover{
	background-color:#326B00;
}

/* default disabled styles */
.submitButton input:disabled, .submitButton button:disabled, .deleteButton input:disabled, .deleteButton button:disabled{
	background-color:#debf74;
	color:#444444;
}

/* text color for links within the buttons - not sure if this is needed at all since that would be bad HTML  */
.saveButton a, .clearButton a, .previousButton a, .saveButton a:visited, .clearButton a:visited, .previousButton a:visited  
{
    color:#FFFFFF;
}

/* colors for the submit or next button */
.saveButton {
    border: 1px solid #255a00;
    background-color:#255a00;
    float:right;
}
/* this is the right facing arrow in the save button */
.saveButton:before 
{
    content: '\E804';
    font-family: "fontello";
    position:relative;
    font-size:25px;
    color:#FFFFFF;
    text-shadow: 0 0 1px #222222;
    left:-13px;
    top:3px;        
}
/* save button hover transition */
.saveButton:hover {
    background-color:#44a700;
    border: 1px solid #44a700;
    transition:all 0.2s ease-in-out 0s;  
} 

/* this is a style that makes links look like buttons.  Very helpfull when using them next to buttons for */
a.buttonLink, a.buttonLink:visited, a.buttonLink:active
{
    font-family: "open_sansregular", sans-serif;
    font-size: 15px;
    color:#ffffff;     
    background-color: #255a00;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    /*line-height:21px; */   
    cursor: pointer;
    margin:-7px 8px 0 0;
    display: inline-block;
    padding: 8px 20px 9px;
    text-align: center;
    vertical-align: middle;
}

a.buttonLink:hover {
    background-color: #326b00;
}

/* this is the clear the form and cancel style*/
.clearButton {
    background-color:#8e0c00 !important;/* Added important, because these are a final style and something before was messing it up */
    border: 1px solid #8e0c00 !important;
    /*float:left;
    clear:both;
    margin:auto;*/
}

.clearButton:hover { 
    border: 1px solid #c11000 !important;
    background-color:#c11000;
}
/* this is the X in the cancel button */
.clearButton:before 
{
   content: '\E802';
    font-family: "fontello";
    font-size:25px;
    color:#FFFFFF;
    text-shadow: 0 0 1px #222222;
    left:-13px;
    top:3px;    
    position:relative;
}

/* previous and back buttons styled here */
.previousButton, .backButton {
     background-color:#00255a !important;/* Added important, because these are a final style and something before was messing it up */
    border: 1px solid #00255a !important;
    float:left;
}

.previousButton:hover, .backButton:hover  {
     background-color:#0044a7 !important;
     border: 1px solid #0044a7 !important;
}
/* Left Arrow at the start of the button */
.previousButton:before, .backButton:before
{
    content: '\E803';
    font-family: "fontello";
    position:relative;
    font-size:25px;
    text-shadow: 0 0 1px #222222;
    left:-13px;
    top:3px;    
}

/* This adjusts the links in the submitButton container to top align with the buttons.  This is probably a stype that can be fixed elsewhere */
a.clearButton, a.previousButton
{
 position:relative;
 top:7px;   
}

/*back button shares all styles with the previous button except it sits on the left where the cancel button does*/
.backButton 
{
    float:left !important; 
}

/* this is in the Voter lookup area and may cause issues.  I'll have to look at it later */
.previous_link 
{
    float:left;   
}

/* does this get used at all? */
.submit {
	background-color:#00255a;
	/*width: 150px;*/
	height:25px; /*45* RV 1-9-15*/
	color: #FFFFFF;
	font-family: 'GandhiSerifRegular',serif;
	font-size:18px;
	text-transform:uppercase;
	border: 1px solid #FFFFFF;
	margin-top: 45px;
	float: right;
}

.submit:hover {
	background-color: #BBBBBB;
	border: 1px solid #777777;
}

/* 
    Big print buttons
*/

.printButton
{
min-width:200px;
}

/* side button used on navigation form search results page
    Lots of man-handling going on here*/
.resultForm .checkBoxList 
{
    float:left;
    margin-bottom:10px;
}

.sidebutton 
{
    float:left;
    width:190px !important;
    margin-top:0px;
}

.sidebutton>.saveButton
{
    width:190px !important;
}

/*
    adding content load button
*/
.button-contentload:before
{
    color:#000000 !important;
    /*content: '\E804';*/
    content: '+';
    font-family: "fontello";
    position:relative;
    font-size:25px;
    text-shadow: 0 0 1px #222222;
    right:-220px;
    top:3px;
}

.button-contentload
{
    text-align:left !important; /* lot's of mess to fight ;-)*/
    width:250px;
}
.button-contentload {
    background-color:#dddddd !important;/* Added important, because these are a final style and something before was messing it up */
    border: 1px solid #656565 !important;
    color:#000000 !important;
    /*float:left;
    clear:both;
    margin:auto;*/
}

.button-contentload:hover { 
    border: 1px solid #656565 !important;
    background-color:#bbbbbb;
    color:#000000 !important;
}



label{
	color:#000000;
	font-size:14px;
	font-family: "open_sansregular", Sans-Serif;
	padding-right:5px;
}
label>span.conditional, .conditional{
    color:Blue; 
    font-weight:bold;display:none; 
}

label>span.conditionalContact{
    color:Blue;
    font-weight:bold; 
    display:none;  
}
label>span.alert{
    color:Red;    
}
.alert{ color:Red; }
textarea,input, select, button
{
	font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
	}
textarea{
	border: 1px solid #CCCCCC;
    color: #444444;
    font-size: 1.2em;
}
/* this is in the main sheet, but it's not working so i added an important notation */
.input-validation-error {
    border: 1px solid #FF0000 !important;
}

.formRow {
    display:block;
    clear:both;
    overflow:hidden;
    min-height:80px;
   /*white-space:nowrap;*/
}
.subRow {
    padding-left:20px;
}
.smaller_row
{
 min-height: 60px !important;   
}

.formRow>.fieldLabelSet, .formRow>.checkBoxLabelSet, .formRow>.radioButtonLabelSet, .formRow>.optionFieldLabelSet{
    float:left;
}

.fieldLabelSet{
    margin: 6px 0px 0px 0px;
}
.fieldLabelSet label {
    display:block;
    white-space:nowrap;
    margin: 0px 0px 2px 0px;
}
.formOptionHalfColumn{
    float:left;
    width:426px;
    padding:0;
    margin:0;
}
.checkBoxList ul
{
	list-style: none;
	margin-left:0;	
}
.checkBoxList li
{
	line-height:2em;
}
.checkBoxList input
{
	display:inline !important;	
}
.checkBoxList label
{
	display:inline !important;
}

.checkBoxLabelSet .check-box{
    border: 1px solid #CCCCCC;
    color: green;
    font-size: 1.2em;
    float:left;
    margin: 4px 0px 0px 0px;
}
.checkBoxLabelSet{
    margin: 6px 0px 0px 0px;
    height:29px;
}
.checkBoxLabelSet.longText {
    height:auto;
}
.checkBoxLabelSet.longText .headerlabel {
    float:none;
    white-space: normal;
}
.checkBoxLabelSet.longText .check-box {
    margin-right: 5px;
    margin-top: 0;
    margin-left:10px; /*RLV 10-9-15 for search form - hopefully this does not cause problems elsewhere*/
}
.formContainer .checkBoxLabelSet{
    padding-top:24px;
    height:20px;
}
.checkBoxLabelSet label 
{
    display:block;
    /*width:165px; take this out for now*/
    float:left;
    margin: 0px 7px 0px 7px;
    cursor: pointer;
    white-space:nowrap;
    overflow:visible;
}

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

ul.legendButtonList, legend>ul{
	list-style: none;
	padding:0;
	margin:0 0 0 0 !important;
	float:right;
	font-size:12px;
	line-height:14px !important;
	
}

ul.legendButtonList li, legend>ul>li{
	display:inline;
}
ul.legendButtonList label, legend>ul>li>label{
	color:#ffffff !important;
}
ul.legendButtonList span{
	padding: 0 5px !important;
}
.officeType
{
	margin: 0;
	padding: 0px 0px 0px 5px;
	height:50px;
	width:200px;
}
.officeType ul{
	list-style: none;
	padding:0;
	margin:0 0 0 0 !important;
	font-size:12px;
	line-height:14px !important;
}
.officeType ul>li {
	display:inline;
}
.fieldErrorMessage{
    display:block;
    /*overflow:hidden;
    white-space:nowrap;*/
    min-height:1.5em;
    font-family:"open_sansregular", Sans-Serif;
}
.fieldErrorMessageNoBreak{
    display:block;
    overflow:visible;
    white-space:nowrap;
    min-height:1.5em;
}
.currentField{
	border: 1px solid green;	
}

.repeatingFormSection{
    clear:both;
    margin-top:10px;
    position:relative;
}

.repeatingFormSection .formOptionHalfColumn{
    width:425px !important;
}
.closeButton{
	width:16px;
	height:16px;
	border:none;
	background-image:url(images/icon_close.png) !important;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:top left !important;
	color:transparent;
	font-size:0;
	overflow:hidden;
	position:absolute;
	left:100%;
	top:-8px;
	margin-left:-8px;
}
.closeButton:hover{
	background-position:bottom left !important;
	background-image:url(images/icon_close.png) !important;
}
div.centerForm {
    margin-left: auto;
    margin-right:auto;
    width: 320px;
}

select.loading{
	/*background-image:url(images/loading_bar.gif);
	background-repeat:no-repeat;
	background-position:center center;*/
	color:Blue;
	/*font-weight:bold;*/
}


/****
    each field label set is created to have standard sizes and layout characteristics 
*/


.mediumFieldLabelSet {
    margin:0px 10px 0px 10px;
    width:192px;
    /*overflow:hidden;   */    
}

.mediumFieldLabelSet input[type="text"], 
.mediumFieldLabelSet input[type="password"],
.mediumFieldLabelSet textarea {
    width:186px;
    padding: 3px 2px 3px 2px;
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.mediumFieldLabelSet select {
    width:195px;         
}
html > /**/ body 
.mediumFieldLabelSet select { /* for other browsers */
    width: 192px;
}


.dateFieldLabelSet{
    margin:0px 10px 0px 10px;
    width:192px;
}
.dateFieldLabelSet input[type="text"]{
    width:164px;
    padding: 3px 2px 3px 2px;
}

.dateLargeLabelFieldLabelSet{
    margin:0px 10px 0px 10px;
    width:264px;
}
.dateLargeLabelFieldLabelSet input[type="text"]{
    width:168px;
    padding: 3px 2px 3px 2px;
}

.optionFieldLabelSet
{
	margin:0px 10px 0px 10px;
    width:406px;
}



/* 
    Large field  
*/
.largeFieldLabelSet {
    margin:0px 10px 0px 10px;
    padding:0;
    overflow:hidden;
    min-width:400px;
}
.largeFieldTextSet {
    margin:0px 10px 5px 10px;
    padding:0;
    width:404px;
}
.largeFieldSpacer{
	margin:0px 10px 0px 10px;
    padding:0;
    width:404px;
}
.largeFieldLabelSet input[type="text"], 
.largeFieldLabelSet input[type="password"]{
    width:400px;
    padding: 3px 2px 3px 2px;       
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.largeFieldLabelSet select {
    width:408px;         
}
html > /**/ body 
.largeFieldLabelSet select { /* for other browsers */
    width: 406px;
}

.largeFieldLabelSet textarea {
width:400px;    
}

/* 
    3/4s of the screen wide 
*/
.largerFieldLabelSet {
    margin:0px 10px 0px 10px;
    padding:0;
    overflow:hidden;
    min-width:610px;
}
.largerFieldLabelSet input[type="text"], 
.largerFieldLabelSet input[type="password"]{
    width:610px;
    padding: 3px 2px 3px 2px;       
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.largerFieldLabelSet select {
    width:618px;         
}
html > /**/ body 
.largerFieldLabelSet select { /* for other browsers */
    width: 616px;
}

.largerFieldLabelSet textarea {
width:610px;    
}

/*
* Display set styles
*/
.fieldLabelSetDisplay{
    min-height:25px;
}

.fieldLabelSetDisplay span{
    position:absolute;
}

.fieldLabelSetDisplay div{
    margin-left:200px;
}

.details{
    border: none;
    border:1px solid #c0c0c0;
    color: #000000;
    font-size: 1.1em;
    /*height:1.2em;*/
    padding:3px 0px 3px 3px;
    margin-bottom:6px;
    min-height:25px;
    width:100%;
    overflow:hidden;
}

.largeFieldLabelSet .details{
    width:400px;
}

.largerFieldLabelSet .details {
    width:610px;    
}

.field-validation-error
{
    color: #cd0a0a/*{fcError}*/;
    font-size: 12px;
    
    padding-left:20px;
    display:inline-block;
     background-image:url("images/alert.png");
     background-position:2px 3px;
     background-repeat:no-repeat;
    
}
.field-validation-valid{
    display:none;
}

/* a quick style to fix long check or radio lists to give them padding at the bottom.  They don't work with the regular flow of the form sets */
.longList 
{
    padding-bottom:20px !important; /*this is the final word on this, don't use lightly ;-) */
}
.longList ul
{
   padding-bottom:0px !important;     
}

.ajaxOverLay {
    background-color: White;
    background-image: url("Images/round_loader.gif");
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.7;
    filter: alpha(opacity = 70);/*IE hack for security reasons*/
    position: absolute;    
}

.transparentOverLay {
    background-color: White;
    opacity: 0.6;
    filter: alpha(opacity = 60);/*IE hack for security reasons*/
    position: absolute;
    
}

.disabled {
    color: #EFEFEF !important;
    background-color: #EFEFEF;
}

noscript {/* not sure why these were styled like this remove for now.  later clean up ;-0*/
    /*color: #FF0000;
    font-size: 17px;*/
}

/* this will work with modernizer to add additional instructions to pages without javascript */
.js .showWhenNoScript { display:none;}

.headerlabel 
{
    font-family:'tires', Sans-Serif;
    font-size: 16px;
    color:#00255a;
}

.headerlabelinline 
{
    font-family:'tires', Sans-Serif;
    font-size: 16px;
    color:#00255a;
    display:inline !important;    
}


.nopadding ul
{
    padding:0px !important;
}

.verticalalign 
{
    padding-top:22px;
}

.verticalalignless 
{
    padding-top:3px;
}

.dmvidpics 
{
    background-image: url("Images/dmvidpics.png") ;
    /*margin:auto;
    width:60%;*/
    height:200px;
    min-width:200px;
    background-repeat:no-repeat;
    background-size:contain; /*1-14-15*/
}

.additionalinformation 
{
    background-color:#F7F7F7;
    border: 1px solid #CCCCCC; 
    max-width:45%;
    margin:5px 0 20px 20px;   
}

.additionalinformation legend 
{
    font-size:14px;
    font-family: "open_sansregular", Sans-Serif;   
    font-weight:bold;
    letter-spacing: .3px; 
    color:#FFFFFF;
   /* background-color:#449fe5;*/background-color:#333;
    border: 1px solid #333; /*#2989D8;  */ 
    padding: 3px 18px;
   /* border-radius:16px; */
}
/* this is for labels that sit at the beginning of small lists.  makes them line up better */
.checkBoxList label.leadingLabel
{
	display:inline-block !important;
	width:80px;
	padding-left:10px;
}
.inlineList
{
    line-height:2.5em;
    white-space:nowrap; /* keep the list together */
}
.buttonList label
{
    border:1px solid #cccccc;
    padding:2px 10px 2px 10px;
    margin: 1px 10px 1px 0px;
}
.buttonList label.checked
{
    border:1px solid #2989D8;
    color:#ffffff;
    background-color:#2989D8;
}
.buttonList input
{
    display:none !important;    
}

#PreferedContact
{
    /* this is just for padding the prefered contact box */
    padding-bottom:30px;
}

.finished {text-align:left !important;}

/* this is just for shrinking some of the bigger elements to smooth the transition */
@media (max-width: 780px)   
{
    /* labels need to break if they are too long*/
	label
	{
	    font-size: 14px !important; /* breaking labels upset the flow of form fields - reducing label size to compensate*/
	    white-space:normal !important;
	}
}

@media (max-width: 690px)  {	
	/* 
        This awesome name was created because we just had large, medium, and small.  
        Then we needed bigger and I came up with Larger rather than X-large or whatever.
    */
	.largerFieldLabelSet 
	{
	    min-width:98%;
	}
	
	.largerFieldLabelSet input[type="text"], .largerFieldLabelSet input[type="password"] {
	    width:98%;   
	} 
	
	.largerFieldLabelSet select {
        width:95%;         
    }
    html > body > .largerFieldLabelSet select { 
        width: 95%;
    }

    .largerFieldLabelSet textarea {
        width:98%;    
    } 
    
    
    
}

/* this is the next size transition */
@media (max-width: 540px) {  
    
	/*.formRow > .fieldLabelSet, .formRow > .checkBoxLabelSet, .formRow > .radioButtonLabelSet, .formRow > .optionFieldLabelSet {
	    float: none !important;
	    margin: 5px auto;
	    width:98%;
	}*/
	
	.clearButton, .saveButton, .previousButton, .buttonLink, a.buttonLink, a.buttonLink:visited, a.buttonLink:hover, a.buttonLink:active, .submitButton input, .submitButton button, .deleteButton input, .deleteButton button, .submitButton > .linkButton {
	    float: none !important;
	    display:block !important;	  
	    margin: 20px auto;   
	    width:75%;
	    /* 
            setting the padding to 0 on the right and left allows links and buttons to be the same size, 
            because padding is part of a button's width, but added to a links width
        */
	    padding-left:0px; 
	    padding-right:0px;
	}
	
	.verticalalign {
        padding-top:0;
        width:80%;
        margin:0 auto;
    }
    
	a.clearButton 
	{
	    top: 0;
	}	

}
@media (max-width: 480px)   
{
    /* drop all margins to min to keep left line straight */
    .largerFieldLabelSet, .largerFieldLabelSet input[type="text"], .largerFieldLabelSet input[type="password"] 
    {
        margin: 0 auto;
    }
    
    /* oddly these get bigger now */
    .mediumFieldLabelSet, .mediumFieldLabelSet input[type="text"], .mediumFieldLabelSet input[type="password"], .mediumFieldLabelSet textarea {
        width:98%;
        margin: 0 auto;
    }
    
    /* these need 100% width to loo right in FF.  looks right in Chrome too */
    .mediumFieldLabelSet select{
        width:100% !important;
        margin: 0 auto;
    }
    
    /* resizing kicks in here for this */
    .largeFieldLabelSet { 
        min-width:98%;
        margin: 0 auto;
    }
    .largeFieldLabelSet input[type="text"], .largeFieldLabelSet input[type="password"] {
        width:98%;   
        margin:0 auto;
    }
    
    /*RLV 101015 - may break other DOB fields*/
    .dateFieldLabelSet{
           
        margin:0;
    }
    
}