body
{
	margin: 0;
    font-family: Helvetica, Arial, sans-serif;
	background: #FFF;
	color: #000;
	-webkit-user-select: none;
	-webkit-text-size-adjust: none;
}

body[orient="landscape"] 
{
	min-height: 268px;
}
body > *[selected="true"]
{
	display: block;
}

a
{
	text-decoration: none;
	color: #084588;
}

a[selected], a:active
{
	background-color: #16478a !important;
	background-image: url(../images/m/nextselected.png) !important;
	background-repeat: no-repeat;
	background-position: right center;
	color: #FFF !important;
}
a[selected="progress"]
{
	background-image: url(../images/m/wait.gif) !important;
}

a[selected], a:active
{
	background-color: #16478a !important;
	background-image: url(../images/m/nextselected.png) !important;
	/*background-image: url(../images/m/nextselected.png), url(../images/m/controlbackground.png)  !important;*/
	background-repeat: no-repeat, repeat-x;
	background-position: right center,left top;
	color: #FFF !important;
}
a[selected="progress"]
{
	background-image: url(../images/m/wait.gif) !important;
}

.home
{
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0 0 0 0;
	padding: 0;
	background-color: #4685a9;
}
.home > li
{
	list-style: none;
	display: inline-block;
}
.home img
{
	width: 100%;
	margin: 0;
	border: none;
	max-width: 320px;
	max-height: 34px;
}

ul.MainList
{
	margin: 0;
	padding: 0;
}

li.link
{
	position: relative;
	font-size: 1em;
	font-weight: 500;
	border-bottom: 1px dotted #c0c0c0;
	margin: 0 0 0 0;
	padding: 10px 0 10px 5px;
	color: #16478a;
	list-style: none;
}
li.link > a
{
	display: block;
	text-decoration: none;
	margin: -8px 4px -8px 0;
	padding: 9px 32px 10px 0;
	color: #084588;
	background: url(../images/m/next.png) no-repeat right center;
}
blockquote
{
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/***      Styles for BUTTONS (controls)      ***/
.controls {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.controls input[type="submit"], .controls a {
    margin-left: 2px;
    margin-right: 2px;
    font-weight: bold;
    border: 1px solid #3d568c;
	background-image: url(../images/m/next.png);
	background-repeat: no-repeat;
	background-position: right center;
}
.controls input[type="submit"] {
    padding: 1px;
    color: #3d568c;
}
.controls a:link, .controls a:active, .controls a:visited {
    padding: 2px 30px 2px 5px;
    color: #3d568c;
    text-decoration: none;
}
.controls a:hover {
    padding: 2px 30px 2px 5px;
	 color: #0033cc;
	 text-decoration: none;
}

.controls input.button-topsearchgo
{
	background-image: none;
	background-repeat: no-repeat;
	background-position: right center;
}

li.caption
{
	position: relative;
	white-space: normal;
	overflow: hidden;
	font-size: 1.3em;
	font-weight: 600;
	color: #000;
	padding: 2px 5px 2px 5px;
	border-bottom: 2px solid #c0c0c0;
	list-style: none;

}

.footer p
{
	margin: 0.3em;
	position: relative;
	white-space: normal;
	overflow: hidden;
	font-size: 0.85em;
	font-weight: 500;
	color: black;
	padding: 2px 5px 2px 5px;
}

.current
{
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
    background-image: none;
    background-color: #4584a8;
    padding: 4px 2px 6px 8px;
}

.current a
{
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
    /*cursor: pointer;*/
    padding: 4px 2px 6px 8px;
	text-decoration: none;
}

.expanded, div.TopList h2
{ 
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #82020b;
    background-position: top;
    background-repeat: repeat-x;
    cursor: pointer;
    padding: 4px 2px 6px 8px;
    border-bottom-style: solid; 
    border-bottom-width: thin; 
    border-bottom-color: #C0C0C0; 
}


.expanded a, div.TopList h2 a
{
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    padding: 4px 2px 6px 8px;
	text-decoration: none;
}

ul.TopList, ul.leftnavsub
{
	margin: 0;
	padding: 0;
}

ul.TopList li, ul.leftnavsub li
{
	position: relative;
	font-size: 1em;
	font-weight: 500;
	border-bottom: 1px dotted #c0c0c0;
	margin: 0 0 0 0;
	padding: 10px 0 10px 5px;
	color: #16478a;
	list-style: none;
	top: 0px;
	left: 0px;
}

ul.TopList li > a, ul.leftnavsub li > a
{
	display: block;
	text-decoration: none;
	margin: -8px 4px -8px 0;
	padding: 9px 32px 10px 0;
	color: #084588;
	background: url(../images/m/next.png) no-repeat right center;
}

div.TopList
{
	margin: 0;
	padding: 0;
}

div.TopList ul
{
	margin: 0;
	padding: 0;
}

div.TopList ul li
{
	position: relative;
	font-size: 1em;
	font-weight: 500;
	border-bottom: 1px dotted #c0c0c0;
	margin: 0 0 0 0;
	padding: 10px 0 10px 5px;
	color: #16478a;
	list-style: none;
	top: 0px;
	left: 0px;
}

div.TopList ul li > a
{
	display: block;
	text-decoration: none;
	margin: -8px 4px -8px 0;
	padding: 9px 32px 10px 0;
	color: #084588;
	background: url(../images/m/next.png) no-repeat right center;
}

div.TopList table
{
	position: relative;
	font-size: 1em;
	font-weight: 500;
	margin: 0 0 0 0;
	padding: 10px 0 10px 5px;
	color: #16478a;
}

div.TopList table tr td
{
	border-bottom: 1px dotted #c0c0c0;
	vertical-align: top;
}


div.TopList table td > a
{
	display: block;
	text-decoration: none;
	margin: -8px 4px -8px 0;
	padding: 9px 32px 10px 0;
	color: #084588;
	background: url(../images/m/next.png) no-repeat right center;
}

div.TopList img.justforyouimage {
	border: 0;
}

h1
{
	color: #000000;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	padding: 2px 2px 0px 8px;
}

.ContentPage
{
	font-size: 1em;
	font-weight: 500;
	margin: 0;
	padding: 0;
}

.ContentPage p
{
	clear: both;
    padding-left: 8px;
    padding-right: 8px;
}

.ContentPage h1, h1.subject
{
    color: #000000;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ECF4F8;
    background-position: top;
    background-repeat: repeat-x;
    padding: 4px 2px 6px 8px;
}

.ContentPage h1 a
{
    color: #000000;
}


.ContentPage h2
{
    color: #000000;
    font-size: 1em;
    font-weight: bold;
    line-height: 1em;
    font-family: Arial, Helvetica, sans-serif;
    color: #1e1e1e;
    background-position: top;
    background-repeat: repeat-x;
    cursor: pointer;
    padding: 4px 2px 6px 8px;
}

.ContentPage h2 a
{
    color: #000000;
}

.ContentPage > li
{
	list-style: none;
	display: inline-block;
}
.ContentPage img
{
	margin: 0;
	border: none;
}

.ContentPage ul
{
	margin: 0;
	padding: 0;
}

.ContentPage ul li
{
	font-weight: 500;
	border-bottom: 1px dotted #c0c0c0;
	margin: 0 0 0 0;
	padding: 10px 0 10px 5px;
	list-style: none;
}

.ContentPage ul li strong
{
    display: block;
}

.ContentPage ul li > a
{
	display: block;
	text-decoration: none;
	margin: -8px 4px -8px 0;
	padding: 9px 32px 10px 0;
	color: #084588;
	background: url(../images/m/next.png) no-repeat right center;
}

.searchwatermark
{
   clear: both;
   background-image: url('../images/m/SearchWatermark.png');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle;
   color: #606060;
}

.searchnormal
{
   clear: both;
   background-image: url('../images/m/Search.png');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle;
}

.justforyouimage
{
	border-width: 0px;
}

#newsline
{
	border-top-width: 1px;
	border-top-color: Gray;
	border-top-style: dotted;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

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

.right
{
	text-align: right;
} 

.bold
{
	font-weight: bold;
}


/* Styles from the public web */

/* ALERT STYLES */
div.alert
{
    background-color: #f3f1d7;
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
}

div.alert a, div.alert a:link, div.alert a:visited, div.alert a:active, div.alert a:hover
{
    color: #990000;
    text-decoration: underline;
}

.alerttext
{
    color: #8d0000;
}

div.alert p
{
    text-indent: 0;
}

/*HIGHLIGHT STYLE 
The class below defines areas/boxes to highlight in the content area */
.highlight
{
    border: 1px solid #b8b8b8;
    margin: 0px 8px 2px 4px;
    padding: 3px;
    background-color: #f7f3ef;
    width: 97%;
}

.highlight1
{
    border: 1px solid #b8b8b8;
    margin: 0px 8px 2px 4px;
    padding: 3px;
    background-color: #ecf4f8;
    width: 97%;
}

.highlight2
{
    border: 1px solid #b8b8b8;
    margin: 0px 8px 2px 4px;
    padding: 3px;
    background-color: #f3eed2;
    width: 97%;
}

.highlight3
{
    border: 1px solid #b8b8b8;
    margin: 0px 8px 2px 4px;
    padding: 3px;
    background-color: #cee3c4;
    width: 97%;
}

.highlight4
{
    border: 1px solid rgb(184, 184, 184);
    margin: 0px 8px 2px 4px;
    padding: 3px;
    background-color: rgb(255, 255, 255);
    width: 97%;
}

.highlight ul li, .highlight1 ul li, .highlight2 ul li, .highlight3 ul li, .highlight4 ul li
{
	border-bottom: 0px dotted #c0c0c0;
	margin: 0 0 0 0;
	padding: 0 0 8px 10px;
	list-style: disc;
    list-style-position: inside;
}

.highlight ul li > a, .highlight1 ul li > a, .highlight2 ul li > a, .highlight3 ul li > a, .highlight4 ul li > a
{
	display: inline;
	text-decoration: none;
	margin: 0;
	padding: 0;
	color: #084588;
	background-image: none;
}

/* LINE "hr" STYLE */
hr
{
    background-image: url(/resources/public/web/templates/images/interface/bos1.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    margin: 5px 0;
    padding: 0;
    border-top: 1px solid #999999;
    border-style: none;
    width: 100%;
}


/* DATA TABLE - TABLES PURELY FOR THE PURPOSE OF SHOWING INFORMATION 
Add ' class="data" ' to any table which charts a list of information.
This class adds a line in between each row and column in the chart/table. */

table.data {
	background-color: #FFFFFF;
	border-bottom: 0px solid #AAAAAA;
	border-left: 1px solid #AAAAAA;
	border-right: 0px solid #AAAAAA;
	border-top: 1px solid #AAAAAA;
    margin: 5px 0 10px 0;
}

table.data td {
	background-color: #FFFFFF;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #AAAAAA;
	border-top: 1px solid #FFFFFF;
}
table.data td.alternate, table.data tr.alternate td {
	background-color: #ECF4F8;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #AAAAAA;
	border-top: 1px solid #FFFFFF;
}

table.data th
{
	background-color: #266182;
	color: #ffffff;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #AAAAAA;
	border-top: 1px solid #FFFFFF;
}
/*START - Styles to change "A" link text to white when using alt bg color within table class data*/
table.data th a, table.data th a:link, table.data th a:visited
{
	color: #ffffff;
}

table.data th a:hover, .altbgcolor a:hover, .altbgcolor2 a:hover
{
	text-decoration: underline;
}
/*END - Styles to change "A" link text to white when using alt bg color within table class data*/

/* ****************Fairfax County Original CSS file**************** */
/* BELOW ARE THE STYLES SPECIFIC TO THE ORIGINAL FAIRFAX COUNTY CSS FILE THAT ARE NOT REFERENCED ELSEWHERE.
These styles have been reformatted and slightly edited to fit in the new design and should be included to 
enable a smoother transition to the new design for the custom content pages. */

/* ****************End style-contentarea.css**************** */
#textonlytoparea, #headerLogoTextVersion, #textonlytopareaFooter, #icononly
{
    display: none;
}

/* NEW STYLES POST WCM DESIGN */
.altbgcolor
{
    background-color: #82020b;
    color: #ffffff;
}

.altbgcolor2
{
    background-color: #266182;
    color: #ffffff;
}

/*START Styles created to change link color to white when used with alt bg clors in tables includes table data class*/
.altbgcolor a, .altbgcolor a:link, .altbgcolor a:visited
{
    color: #ffffff;
}

.altbgcolor2 a, .altbgcolor2 a:link, .altbgcolor2 a:visited
{
    color: #ffffff;
}

.altbgcolor a:hover, .altbgcolor2 a:hover
{
	text-decoration: underline;
}
/*END Styles created to change link color to white when used with alt bg clors*/

.altlightcolor
{
    color: #e7f0f8;
}

/* used for emergency text or validation/application error messages */
.text-alert {
	color: #FF0000;
}