/* =============================================================================
   typography: with the exception of items with a specific font specified
               the theme font can altered in the body selector after the
               reset below.
   ========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
}

/* Reset the width attribute for every element with an inline style attached to it, as well as img and iframe tags with width attributes. (This should fix many problems with individual resources having their own styles attached.)*/
/* Reset the width attribute for every element with an inline style attached to it, as well as img and iframe tags with width attributes. (This should fix many problems with individual resources having their own styles attached.)*/
.body *[style], .body *[width] {
    width: initial ! important;
}

.body iframe[width],.body iframe[style]{
	width: 100% ! important;
}

/* fix the grey overlay on the ShareThis widget (affected by stripping out inline styles) */
#stOverlay {
    width: 100% ! important;
}

/* =============================================================================
   utilities
   =========================================================================== */
/* clearfix:Just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. (source:http://www.positioniseverything.net/easyclearing.html) */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	display:none;
}

/* additional clearfix elements are in ie.css */
.clearfix {
	display:inline-block; /* ie fix for mac */
}

.clear {
	clear:both; /* ie fix for mac */
}

.hidden {
	display:none !important;
}

/* unstyled lists */

.ns li {
	list-style-type:none;
	padding:0;
	margin:0;
}

.stmsg {
	position:absolute;
	top:0;
	left:50%;
	background-color:#ECD59C;
	width:40%;
	margin-left:-20%;
	text-align:center;
	padding: 1em;
	cursor:pointer;
}

.main .uniForm .buttonHolder button.wait {
	background: url('../images/spinner.gif') no-repeat 5px center;
	padding-left: 20px;
	color: #000;
	cursor:default;
}

a img {
	border:0;
}




/* =============================================================================
   body
   ========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

body {
	background:#F3F0E7;
}

body.minimal {
	background:#F3F0E7;
}

body.big {
	font-size:85%;
}

body.bigger {
	font-size:95%;
}

}

/* =============================================================================
   headings
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

h1 {
	font-style:normal;
}

h2 {
	font-style:normal;
}

h3 {
	font-style:normal;
}

h4 {
	font-style:normal;
}

h5 {
	font-style:normal;
}

h6 {
	font-style:normal;
}

}

/* =============================================================================
   text
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

p {
	margin:0.33em 0 1em 0;
}

small {
	font-size:85%;
}

big {
	font-size:115%;
}

sup {
	font-size:smaller;
	vertical-align:0.5em;
	line-height:1px;
}

em {
	font-style: italic;
}

}

/* =============================================================================
   standarized classes
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.article {
	padding: 1em 1.5em;
}

.items .article {
	padding: 0 1em;
	line-height: 1.5em;
}

.items .article .ly img {
	margin-top: 0em;
}

}


/* =============================================================================
   buttons
   =========================================================================== */
/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.btn-link {
	display:inline-block;
	line-height:1.5em;
	min-height:1.5em;
	text-align:center;
	color:#000;
	padding:.3em .6em;
	font-weight:bold;
	text-decoration:none;
	margin:.5em 0;
	border:1px solid #d5d5d5;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	/* Safari 4-5, Chrome 1-9 */
	background:-webkit-gradient(linear, left top, right top, from(#fff), to(#dbdbdb));
	/* Safari 5.1, Chrome 10+ */
	background:-webkit-linear-gradient(left, #fff, #dbdbdb);
	/* Firefox 3.6+ */
	background:-moz-linear-gradient(left, #fff, #dbdbdb);
	/* IE 10 */
	background:-ms-linear-gradient(left, #fff, #dbdbdb);
}

.btn-link:hover {
	/* Safari 4-5, Chrome 1-9 */
	background:-webkit-gradient(linear, left top, right top, from(#f5f5f5), to(#cccccc));
	/* Safari 5.1, Chrome 10+ */
	background:-webkit-linear-gradient(left, #f5f5f5, #cccccc);
	/* Firefox 3.6+ */
	background:-moz-linear-gradient(left, #f5f5f5, #cccccc);
	/* IE 10 */
	background:-ms-linear-gradient(left, #f5f5f5, #cccccc);
}

a.button span {
	background:url(../images/bg-donate-link.png) right 5px no-repeat;
	padding:0 10px 0 0;
}

}

/* =============================================================================
   buttons: vertical (hide visit / learn more)
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.vertical-buttons {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.vertical-buttons {
	z-index:100;
	position:absolute;
	right:-32px;
	top:158px;
	overflow:hidden;
	width:31px;
	display: block;
}

.vertical-buttons span {
	display:block;
	position:fixed;
	width:31px;
}

.vertical-buttons a {
	display:block;
	text-indent:-9999px;
}

.vertical-buttons .btn-hide {
	background:#256c8b url(../images/btn-hide-visit.png);
	height:136px;
	margin-bottom:4px;
}

.vertical-buttons .btn-hide-es {
	background:#256c8b url(../images/btn-hide-visit-ES.png);
	height:136px;
	margin-bottom:4px;
}

.vertical-buttons .btn-hide:hover {
	background-color:#1c5978;
}

.vertical-buttons .btn-learn-more {
	background:#256c8b url(../images/btn-learn-more.png);
	height:121px;
}

.vertical-buttons .btn-learn-more:hover {
	background:#1c5978 url(../images/btn-learn-more.png);
}

}

/* =============================================================================
   icons: resource type
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {


.resource-type {
	display:inline-block;
	width:16px;
	height:16px;
	text-indent:-9999px;
	background-image:url(../images/bg-resource-type.png);
}

.resource-type.video {
	background-position:left top;
}

.resource-type.pdf {
	background-position:left -16px;
}

.resource-type.doc {
	background-position:left -32px;
}

.resource-type.image {
	background-position:left -48px;
}

.resource-type.audio {
	background-position:left -64px;
}

.resource-type.word {
	background-position:left -80px;
}

.resource-type.gif {
	background-position:left -96px;
}

}

/* =============================================================================
   layout / containers
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {
 
.wrapper {
	max-width:945px;
	margin:0 auto;
	text-align:left;
}

.wrapper > .section > .header {
	height:157px;
	position:relative;
}

.navigation {
}

.body {
	position:relative;
	display: table;
	overflow: hidden;
	width:  100%;
}

.main {
	width:100%;
	float:left;
	background:#fff;
	padding-bottom: 99999px;
    margin-bottom: -99989px;
}

.sidebar {
	display: none;
	padding-bottom: 99999px;
    margin-bottom: -99999px;
}

.footer {
	clear:both;
	height: auto;
	margin-bottom: 80px;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.main {
	width:72%;
}

.sidebar {
	width:28%;
	float:left;
	background-color:#f8f6f1;
}

.footer {
	margin-bottom: 0px;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.main {
	width:72%;
	min-height: 500px;
}

}

/* =============================================================================
   ada508
   =========================================================================== */
.ada508 {
	display:none;
}

/* =============================================================================
   header: "powered by probono.net"
   =========================================================================== */
/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.pro-bono-net {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.pro-bono-net {
	display:block;
	float:left;
	font-family:'Georgia';
	font-size:11px;
	color:#8d8d8d;
	font-style:italic;
	text-decoration:none;
	margin:1.2em 5em 0 5em;
}

.pro-bono-net span {
	font-style:normal;
	color:#ff0000;
}

}

/* =============================================================================
   header: branding
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {
	
.header .header-bar > * {
	position: relative;
	top: 1px;
}

.titlebar {
	float:left;
	width:100%;
	margin: 45px 1em 10px 0;
}

.titlebar > * {
	margin: auto;
	width: 100%;
}

.titlebar > a {
	float:left;
}

.titlebar > a img {
	width: 100%;
}

#visitHide {
    background: #E20028;
    display: table-cell;
    padding: 5px 8px 4px 8px;
    position: absolute;
    top: 10px;
    right: 0px;
    float: right;
    max-width: 125px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    color: white;
}


#visitHide a {
    color: white;
    font-weight: bold;
}

.header .header-bar {
	height:1.5em;
	position: fixed;
	width: 100%;
	max-width: 945px;
	top: 0px;
	margin-left: 0px;
	padding-left: 10px;
	z-index: 1000;
	box-sizing: border-box;
	display: table;
	background: #fffff8;
	border-bottom: 1px solid #ecd59c;
	min-height: 32px;
}

.header h1 {
	font-size:300%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
	font-weight: bold;
	float:left;
	clear:both;
	box-sizing: border-box;
}


.wrapper .header-bar > h2 {
	display: none;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

@media screen and (min-width: 525px) {
	
.header .header-bar > * {
	top: 8px;
}

#visitHide {
	top: 17px;
}

.titlebar > a {
	width: 40%;
}

.wrapper .header-bar > h2 {
	margin:0 20px 0 0;
	float:left;
	display: block;
}

.header h1 {
	margin:10px 0px 0px 10px;
	width: auto;
	box-sizing: normal;
	
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.titlebar {
	width:100%;
	box-sizing: border-box;
}

.titlebar > a img {
	width: 360px;
}

}


/* =============================================================================
   state menu
   =========================================================================== *

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

#statemenu {
	float:left;
	position:relative;
}

.choose-state {
	color:#443320;
	background:url(../images/bg-download-arrow.png) right top no-repeat;
	font-weight:bold;
	display:block;
	height:30px;
	line-height:38px;
	padding:0 13px 0 0;
	text-decoration:none;
}

}

/* =============================================================================
   state menu: states "visit another state site"
   =========================================================================== */
/* are these used */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

table.states {
	width:100%;
	margin-bottom:2em;
}

table.states td {
	padding:.5em .2em;
}

}

/* =============================================================================
   header: language tabs
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

ul.languages {
	font-weight:bold;
	color:#134666;
	float:left;
	position:relative;
	height:30px;
	line-height:38px;
	margin:0;
}

.languages ol, .languages li {
	float:left;
}

.languages li {
	margin:0 .5em;
}

.languages a {
	color:#134666;
	text-decoration:none;
}

.languages .current {
	display: table-cell;
}

.languages .current > span {
	line-height:4em;
	padding:.5em 1em 0 1em;
	font-weight:bold;
	color:#144766;
	text-decoration:none;
	background:#FFFFEF;
	text-align:center;
	height:28px;
	border-top:3px solid #EBD198;
	border-left:1px solid #F8F0DD;
	border-right:1px solid #F8F0DD;
}

.languages a span, .languages .current > span span, .languages .other span span {
	display: none;
}

.languages a {
	margin:1em 0;
	display:block;
}

.languages .other {
	display:inline-block;
	z-index:9999;
}

.languages .other > a > span {
	padding-right: 10px;
	cursor:pointer;
	position:relative;
	display:inline-block;
	background:url(../images/bg-download-arrow.png) right center no-repeat;
}

.languages .dropdown-menu {
	font-weight: normal;
	display:none;
	margin-top: -10px;
	padding:1em;
	line-height:1.5em;
	background-color: #FFFFF5;
	border-bottom:1px solid #F8F0DD;
	border-left:1px solid #F8F0DD;
	border-right:1px solid #F8F0DD;
}

.languages .dropdown-menu li {
	float:none;
}

.languages .dropdown-menu li span {
	font-weight: bold;
}

.languages .dropdown-menu a {
	margin: 0;
}

}

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

.languages a span, .languages .current > span span, .languages .other span span {
	display: inline;
}

}

/* =============================================================================
   language search box
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

form.langsearch {
	padding: 1em 1.5em;
	background:url(../images/bg-box-1.png) left top repeat-x;
}

form.langsearch div.field {
	color: #fff;
}
form.langsearch div.field input{
	width: 80%;
}
form.langsearch div.field button {
	line-height:2em;
	height:2em;
	display:inline-block;
	background-color:#216382;
	color:#fff;
	font-weight:bold;
	border:0;
	padding:.2em;
}

}

/* =============================================================================
   header: site text size selector
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.text-size {
	display: none;
}

}


/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.text-size {
	display: block;
	font-weight:bold;
	color:#44331F;
	padding:11px 0 0;
	float: left;
	margin: 0px 7px 7px 14px;
	position: relative;
	margin-top: 2px;
}

.text-size a {
	color:#44331F;
}

.text-size .current-size {
	color:#2C7692;
}

.text-size .size-1 {
	font-size:.8em;
}

.text-size .size-2 {
	font-size:1em;
}

.text-size .size-3 {
	font-size:1.2em;
}

}

/* =============================================================================
   header: nav / dropdown "understand your legal issue", "find legal help"
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.nav.header a {
	display:inline-block;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
}

.nav.header {
	background-color:#FFFFE4;
	font-size:130%;
	float:left;
	width:100%;
}

.nav.header > ul > li > a {
	line-height:2.5em;
}

.nav.header .menu {
	z-index:597;
}

.nav.header .menu > li {
	margin-left: 0px;
	line-height:2.7em;
	width:33%;
}

.nav.header .menu li:first-child {
	margin:0;
}

.nav.header .understand-issue,
.nav.header .find-legal-help,
.nav.header .page-dropdown {
	background:    #206180;
	background:    -webkit-linear-gradient(#206180, #294765);
	background:    linear-gradient(#206180, #294765);
}

.nav.header .understand-issue.dropdown,
.nav.header .find-legal-help.dropdown,
.nav.header .page-dropdown.dropdown {
	background-color:    #206180;
	background-color:    -webkit-linear-gradient(#206180, #294765);
	background-color:    linear-gradient(#206180, #294765);
}

.nav.header .understand-issue.dropdown::after, 
.nav.header .find-legal-help.dropdown::after, 
.nav.header .page-dropdown.dropdown::after { 
	content: ""; 
	background-image: url('../images/nav-down-arrow.png'); 
	background-size: 60%; 
	background-repeat: no-repeat; 
	float: right; 
	position: relative; 
	top: -42px; 
	right: 0px; 
	margin-bottom: -40px; 
	padding-right: 10px;
	clear: none; 
	z-index: 9999; 
	width: 13px; 
	height: 20px; 
	display: inline-block; 
	background-position: center;
	padding-top: 20px;
} 

.nav.header .understand-issue.dropdown a,
.nav.header .find-legal-help.dropdown a,
.nav.header .page-dropdown.dropdown a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	box-sizing: border-box;
}

.nav.header .find-legal-help a.title {
	width:100%;
	text-align:center;
	margin:0;
}

.nav.header .find-legal-help > li > a {
	text-align:left;
	font-weight:bold;
}

.nav.header .dropdown-menu {
	box-sizing: border-box;
}

.nav.header .find-legal-help .dropdown-menu li,
.nav.header .page-dropdown .dropdown-menu li  {
	text-align:left;
}

.nav.header .menu > li.one-column,.nav.header .menu > li.two-column,.nav.header .menu > li.three-column {
	width: 100%
}

.nav.header .understand-issue .dropdown-menu td {
	box-sizing: border-box;
}

.nav.header #searchnav {
	width:100%;
	border:0;
	height:1.33em;
}

.nav.header #search {
	width: 65%;
}

.nav.header form {
	background:#69ADCA;
	float:left;
	position:relative;
	width:100%;
}

.nav.header form label {
	color:#fff;
	font-weight:bold;
	display: none;
}

.nav.header form legend {
	display:none;
}

.nav.header form fieldset {
	white-space:nowrap;
}

.nav.header .save-location {
	color:#fff;
	font-weight:bold;
	width:165px;
	height:31px;
	font-size:1.2em;
	padding:20px 0 0 77px;
	background:url(../images/bg-sidebar-header.png);
	line-height:normal;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

@media screen and (min-width: 525px) {
	
.nav.header form label {
	display: inline;
}

.nav.header .menu > li.two-column {
	width: 49.5%;
}

.nav.header .menu li.two-column:first-of-type,.nav.header .menu li.three-column:nth-of-type(1),.nav.header .menu li.three-column:nth-of-type(2) {
	margin-right: 1%;
}

.nav.header .menu li.two-column:nth-of-type(2),.nav.header .menu li.three-column:nth-of-type(3) {
	float: right;

}

.nav.header .menu > li.three-column {
	width: 32.6%;
}

.nav.header .understand-issue.dropdown a,
.nav.header .find-legal-help.dropdown a,
.nav.header .page-dropdown.dropdown a {
	white-space: nowrap;
}


}


/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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


.nav.header .menu > li {
	margin-left:.4%;
}

.nav.header .menu > li:first-of-type {
	margin-left: 0px;
}

.nav.header .menu li.two-column:first-of-type,.nav.header .menu li.three-column:nth-of-type(1),.nav.header .menu li.three-column:nth-of-type(2) {
	margin-right: 0px;
}

.nav.header .menu li.two-column:nth-of-type(2),.nav.header .menu li.three-column:nth-of-type(3) {
	float: left;

}


.nav.header .menu > li.one-column {
	width:66%;
}

.nav.header .menu > li.two-column {
	width: 33.3%;
}

.nav.header .menu > li.three-column {
	width:22.07%;
}

.nav.header #searchnav {
	width:32.59%;
}


.nav.header #search {
	width:11em;
	padding:.2em;
}


.nav.header form button {
	line-height:1.5em;
	background-color:#216382;
	color:#fff;
	font-weight:bold;
	border:0;
	padding:.2em;
	margin-left:-.5em;
}

.nav.header form label {
	padding:0 .2em 0 .5em;
}


}

/* =============================================================================
   header: navigation "help", "about us", "feedback"
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {
 
.navigation {
	font-weight:bold;
	border-top:1px solid #F7ECC8;
	border-bottom:1px solid #F4E5B7;
	float:right;
	width: 100%;
}

.navigation span {
	display: none;
}

.navigation li {
	float:left;
	color:#443320;
	border-right:1px solid #443320;
	text-align:center;
	display: inline-block;
}

.navigation li:last-child {
	border-right:none;
	text-align:left;
}


.navigation li a {
	text-decoration:none;
	color:#443320;
	margin:0 .5em;
}

.navigation ul {
	display: table;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.navigation {
	width: 60%;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.navigation {
	width: initial;
	margin:20px 1em 0 3em;
	padding:.5em 0;
}

.navigation span {
	display: block;
	color:#134666;
	font-style:italic;
	font-size:14px;
}


.navigation li {
	margin:.2em 0;
}

.navigation ul {
	margin:.5em 0;
}

}

/* =============================================================================
   header: drop down menus / search
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

ul.menu,
ul.menu li,
ul.menu ul {
	list-style:none;
	margin:0;
	padding:0;
}

ul.menu > li {
	float:left;
	zoom:1;
	text-align:center;
}

ul.menu li.dropdown > a {
	padding-right:30px;
}

ul.menu li ul li.hover,
ul.menu li ul li:hover {
	position:static;
	z-index:599;
	cursor:default;
}

ul.menu > li > ul {
	position:absolute;
	top:100%;
	left:0;
	z-index:598;
}

ul.menu .understand-issue.dropdown {
	position:relative;
	z-index:999;
}

ul.menu .find-legal-help.dropdown {
	position:relative;
	z-index:998;
}

ul.menu .page-dropdown.dropdown {
	position:relative;
	z-index:997;
}

ul.menu .dropdown-menu {
	background-color:#294765;
	position:absolute;
	font-size:85%;
	display:none;
	left:0;
	width: 100% ! important;
}

ul.menu .dropdown-menu table, ul.menu .dropdown-menu tbody {
	width: 100%;
	height: 100%;
	background-color:#294765;
}

ul.menu .dropdown-menu table td {
	display: block;
	width: 100%;
	line-height:1em;
	padding:0 .5em;
}

ul.menu .dropdown-menu li {
	line-height:1em;
	padding:0 .5em;
}

ul.menu .dropdown-menu a {
	background:none;
	line-height:2em;
}

ul.menu .find-legal-help .dropdown-menu,
ul.menu .page-dropdown .dropdown-menu {
	/* min-width:281px; */
	text-align:center;
}

ul.menu ul li {
	float:none;
}

/*
ul.menu ul .column-1 {
	left:51px;
}

ul.menu ul .column-2 {
	left:261px;
}

ul.menu ul .dropdown-column {
	position:absolute;
	top:32px;
	display:block;
	width:190px;
}

ul.menu ul .dropdown-column li {
	width:190px;
	overflow:hidden;
}

ul.menu ul .dropdown-column a {
	font-weight:bold;
	color:#fff;
	padding:0;
}
*/


}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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


ul.menu .dropdown-menu table {
	padding:1em;
	top:3em;
}

ul.menu .dropdown-menu table td {
	display: table-cell;
}

}

/* =============================================================================
   sidebar
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar {
	display: none;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.sidebar {
	background:#F8F6F1;
	display: block;
}

.sidebar > div:first-child {
	margin-top:1em;
}

.sidebar > .section > * {
	margin: .5em 0;
	display: none;

}

.sidebar > .section:nth-of-type(1) > *, .sidebar > .section:nth-of-type(2) > *,.sidebar > .section:nth-of-type(3) > *,.sidebar > .chat > *,.sidebar > .section:nth-of-type(3) > *,.sidebar > .section .setlocation {
	display: block;
}

.sidebar h3, .sidebar h4 {
	font-size:1.2em;
	font-weight:bold;
	color:#443321;
	line-height:1.2em;
}

.sidebar h5 {
	color:#333;
	font-weight:bold;
}

.sidebar p {
	line-height:1.5em;
	margin-bottom:.5em;
}

.sidebar legend {
	display:none;
}

.sidebar input {
	color:#000;
	padding:.2em;
	border:0;
	height:1.5em;
	border:1px solid #ccc;
	border-right:0;
}

.sidebar button {
	background:#216382;
	height:2em;
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
	border:0;
	cursor:pointer;
	text-align:center;
	position:relative;
	top:1px;
}

.sidebar label {
	color:#333333;
	display:inline-block;
	font-weight:bold;
	margin:0 0 0.2em;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.sidebar > .section > * {
	display: block;
}

}

/* =============================================================================
   sidebar popout - fixed buttons (location form & chat button)
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

#fixed-buttons {
    position: fixed;
    right: 4px;
    bottom: 4px;
}

#fixed-buttons > div {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    float: right;
    margin-left: 4px;
}

#fixed-buttons .mobile-location {
    background: #164A69;
}

#fixed-buttons .mobile-location a, #fixed-buttons .mobile-chat a {
    display: block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50px;
    color: transparent;
}

#fixed-buttons .mobile-location a {
    background-image: url('/lh3/lawhelp/includes/theme/default/images/bg-globe.png');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 5;
}

#fixed-buttons .mobile-location.pinned a {
    background-image: url('/lh3/lawhelp/includes/theme/default/images/bg-globe-set.png');
}

#fixed-buttons #mobile-location-form {
	position: relative;
    right: 290%;
    bottom: 44px;
    height: 20px;
    background: #3F7C9A;
    margin: 0px;
    padding: 4px;
    z-index: 0;
    border-radius: 10px 0px 0px 10px;
   	display: none;
   	width: 300% ! important;
}


#fixed-buttons #mobile-location-form input {
    border-radius: 0px 10px 10px 0px;
    float: left;
    clear: none;
    margin: 0px;
    padding: 0px 0px 0px 3px;
    width: 70%;
}

#fixed-buttons #mobile-location-form label {
    display: none;
}

#fixed-buttons #mobile-location-form button {
   border-radius: 10px 0px 0px 10px;
   float: left;
   clear: none;
}

#fixed-buttons .mobile-chat {
    background: #639F43;
}

#fixed-buttons .mobile-chat a {
    background-position: center;
    background-repeat: no-repeat;
}

#fixed-buttons .mobile-chat a img {   
    border-radius: 50px;
	padding: 10px;
}

#fixed-buttons .mobile-chat strong, #fixed-buttons .mobile-chat span {
    display: none;
}

#fixed-buttons .mobile-chat a.offline {
	background-image: url('/lh3/lawhelp/includes/theme/default/images/livehelp/repoffline.gif');
}

#fixed-buttons .mobile-chat a.online {
	background-image: url('/lh3/lawhelp/includes/theme/default/images/livehelp/reponline.gif');
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

#fixed-buttons .mobile-location, #fixed-buttons .mobile-chat {
	display: none;
}

}


/* =============================================================================
   sidebar: chat
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar .section div.chat {
	background:url(../images/bg-chat-header.png) top right no-repeat;
	float:left;
	clear:both;
	width:100%;
	padding:0;
	border:0;
}

.sidebar .section div.chat div {
	font-weight:normal;
	font-size:1em;
	float:left;
	width:100%;
}

.sidebar .section div.chat a {
	color: #fff;
	text-decoration:none;
}

.sidebar .section div.chat div a {
	float:left;
	width: 95%;
	padding: 1em 0 1em 75px;
}

.sidebar .section div.chat a * {
	padding-right:70px;
}

.sidebar .section div.chat a {
	background-repeat:no-repeat;
	background-position: 15px center;
}

.sidebar .section div.chat a.offline {
	background-image: url('/lh3/lawhelp/includes/theme/default/images/livehelp/repoffline.gif');
}
.sidebar .section div.chat a.online {
	background-image: url('/lh3/lawhelp/includes/theme/default/images/livehelp/reponline.gif');
}
.sidebar .section div.chat a span {
	display:block;
}

.sidebar .section div.chat strong {
	font-size:1.2em;
	display:block;
}

}


/* =============================================================================
   sidebar: set location / user location
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar .section div.setlocation {
	background:url(../images/bg-grad-two-blues.png) left bottom no-repeat;
	padding:.1em;
	color:#fff;
	clear:both;
	padding: .2em 0;
	border:0;
}

.sidebar .section div.setlocation h3, .sidebar .section div.setlocation h3 a {
	font-size:1.2em;
	font-weight:bold;
	overflow:visible;
	position:relative;
	color:#fff;
}

.sidebar .section div.setlocation h3 span.shim {
	display:block;
	width:45px;
	height:46px;
	background:url(../images/bg-globe.png);
	position:absolute;
	top:-15px;
	left:10px;
}

.sidebar .section div.setlocation h3 a {
	display:block;
	margin:.5em .5em .5em 75px;
}

.sidebar .section div.setlocation h3 a span {
	width: .75em;
	display: inline-block;
}

.sidebar .section div.setlocation #userlocation {
	padding:1em 0 0 80px;
	min-height:50px;
	position:relative;
	background:url(../images/bg-globe.png) no-repeat 10px center;
}

.sidebar .section div.setlocation #userlocation a {
	font-weight:normal;
}

.sidebar .section div.setlocation a {
	color:#fff;
	text-decoration:none;
}

.sidebar .section div.setlocation #locationform {
	background-color:#334C6C;
	padding:1.6em;
	display:none;
}

.sidebar .section div.setlocation #locationform #remove-location-form {
	display:none;
	text-align:center;
}

.sidebar .section div.setlocation #locationform #remove-location-form label {
	cursor:pointer;
}

.sidebar .section div.setlocation #locationform.open {
	display:block;
}

.sidebar .section div.setlocation #locationform label {
	color:#fff;
	padding:0 0 .2em;
}

.sidebar .section div.setlocation #locationform input {
	color:#000;
}

.sidebar .section div.setlocation #locationform .msg {
	color:red;
	margin:.5em 0;
}

.skip {
	text-indent: -9999em;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
}

}

/* =============================================================================
   sidebar: panels
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar .section {
	width:100%;
	float:left;
	clear:both;
}

.sidebar .section .content
	, .sidebar .section > div {
	padding:1.2em;
	border-bottom:1px solid #ECD393;
}

.sidebar .section .amptb {
	border: 0;
	padding-top:0;
	padding-bottom:0;
	margin-bottom:-.2em;
}

}


/* =============================================================================
   sidebar: languages "more languages?"
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar .altlang {
	padding: 0;
	margin: 0;
	list-style-type:none;
}

.sidebar .altlang li {
	color:#134666;
	font-size:1.1em;
	line-height:138%;
	margin:0;
}

.sidebar .altlang li a {
	color:#134666;
	text-decoration:none;
}

}


/* =============================================================================
   sidebar: content lists
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar .content.list ul {
	list-style-type: none;
	margin:0 0 .5em 0;
	padding: 0;
}

.sidebar .content.list ul li {
  font-size: 1.1em;
	margin: 0;
}

}


/* =============================================================================
   sidebar: use "how to use this site"
   =========================================================================== */
/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.sidebar-use ul {
	margin:0 0 26px;
}

.sidebar-use img {
	float:left;
	margin:0 .5em 0 0;
	width:120px;
	height:65px;
}

}

/* =============================================================================
   page utilities
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.page-utilities {
	overflow:hidden;
	border-bottom:1px solid #ecd393;
	padding:.75em;
	color:#134666;
	text-transform:uppercase;
	font-size:83%;
}

}

/* =============================================================================
   page-utilities: breadcrumbs
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.page-breadcrumbs {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.page-breadcrumbs {
	display: block;
	float: left;
	max-width:63%;
	padding: .25em;
}

.page-breadcrumbs a {
	margin:0 .5em;
}

}

/* =============================================================================
   temporary: old container for breadcrumbs
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.breadcrumb {
	color:#134666;
	text-transform:uppercase;
	font-size:83%;
	border-bottom:1px solid #ecd393;
	padding:1em 1em;
	position:relative;
}

.breadcrumb a {
	margin:0 .5em;
}

}

/* =============================================================================
   page utilities: actions
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.page-actions {
	float:right;
}

.page-actions * {
	background-image:url(../images/bg-page-action.png);
	display:block;
	float:left;
	background-repeat:no-repeat;
	padding:0 0 0 23px;
	margin:0 0 0 9px;
	height:16px;
	line-height:17px;
	cursor:pointer;
}

.page-actions:first-child {
	margin-left:0;
}

.page-actions .email {
	background-position:left top;
}

.page-actions .print {
	background-position:left -16px;
}

.page-actions .share {
	background-position:left -32px;
}

.page-actions .rss {
	background-position:left -48px;
}

/* Force the share window, which is set by an inline width, to display */
div#stwrapper {
    width: 514px ! important;
}

}

/* =============================================================================
   intro
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.intro h2 {
	color:#fff;
}

.intro .content {
	background-color:#277291;
	width:100%;
	color:#fff;
	font-weight:bold;
	padding: 4px;
	box-sizing: border-box;
}


.intro .content h2 {
	font-size:1.6em;
	line-height:120%;
	color: #fff;
	margin-top: 0;
}

.intro .content p {
	line-height:120%;
	margin: 1em 0;
}

.intro a {
	color: #C7E3EF;
	text-decoration:underline;
}

.intro a:hover {
	text-decoration:none;
}

.intro .article {
	display: none;
}

.intro .article:first-of-type {
	display: block;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.intro {
	background:url(../images/bg-intro-content-bottom.png) 1.5em bottom no-repeat;
	padding:0 0 13px;
}

.intro .article {
	display: table-cell;
}

}

/* =============================================================================
   topics: overview
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.topics-content {
	display: block;
	clear:both;
	margin-bottom:2em;
}

.topics-overview .topics-content {
	display: none;
}

.topics-content th {
	width: 100%;
	display: list-item;
	list-style-type: none;
}

.topics-content th h3 > a {
	display: block;
	padding: 8px;
}


.topics-content ul {
	display: none;
}



}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.topics-overview .topics-content {
	display: block;
	clear:both;
	margin-bottom:2em;
}

.topics-content th {
	vertical-align:top;
	padding: 0 .5em;
	width: 33%;
	display: table-cell;
}

.topics-content th h3 {
	margin:0;
	line-height:1em;
	margin-top:10px;
	color:#154867;
}

.topics-content th h3 a {
	display: block;
	padding: 0px;
	padding-bottom: 70px;
	position: relative;
	z-index: 5;
}

.topics-content td {
	padding: 0 .5em .5em .5em;
	width:33%;
	height: 60px;
	position: relative;
	top: -70px;
	z-index: 0;
}

.topics-content td:first-child, .topics-content th:first-child {
	padding-left:0;
}

.topics-content li {
	margin:.5em 0;
	line-height:1.2em;
}

.topics-content li a {
	color:#44331F;
	text-decoration:none;
}

.topics-content li a:hover {
	text-decoration:underline;
}

.topics-content td a.more {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

@media screen and (min-width: 870px) {
	
.topics-content th h3 a {
	display: inline;
	padding-bottom: inherit;
	position: inherit;
	z-index: inherit;
}

.topics-content td {
	position: inherit;
	z-index: inherit;
}

.topics-content ul {
	display: block;
	list-style-type: none;
	padding-left:65px;
}

.topics-content li {
	margin:.5em 0;
	line-height:1.2em;
}

.topics-content li a {
	color:#44331F;
	text-decoration:none;
}

.topics-content li a:hover, .topics-content td a.more:hover {
	text-decoration:underline;
}

.topics-content td a.more {
	background:url(../images/bg-more-content.png) right center no-repeat;
	padding-right:10px;
	display:inline;
}

}

/* =============================================================================
   topics: list
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {
 
.topics-content .topiclist {
	border-top: 1px solid #134666;
	padding: 10px 10px 0 10px;
	line-height:1.5em;
	font-size: 1.2em;
}

.topics-content .topiclist a {
	color:#134666;
	text-decoration:none;
	font-weight: bold;
}

.topics-content .topiclist .more a {
	font-weight:bold;
}
.topics-content .topiclist a:hover {
	text-decoration:underline;
}

.topics-content .topiclist .more a {
	padding-right:10px;
	background:url(../images/bg-more-blue.png) right center no-repeat;
}

.topics > .header {
	background-repeat: no-repeat;
	background-position: left 0;
	padding-left: 80px;
	min-height: 64px;
}

.topics > .article > div:first-child {
	margin-left: 80px;
}

/*
replaced by bulleted-list
.topics > .article ul {
	list-style-type: disc;
	color:#13488a;
	margin-left:1.35em;
	width:46%;
}
*/


.topics > .article li {
	margin:.5em 0;
}

.alttopics li {
	background-repeat: no-repeat;
	background-position: left top;
	padding: .2em 0 .2em 50px;
	font-size:140%;
	font-weight:bold;
	margin: .5em 0;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.topics-content .topiclist strong, .topics-content .topiclist > a {
	display: none;
}

.topics-content .topiclist {
	color: white;
}

.topics-content .topiclist .more {
	margin-top: -20px;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.topics-content .topiclist strong, .topics-content .topiclist > a {
	display: inline;
}

.topics-content .topiclist {
	color: inherit;
}

.topics-content .topiclist .more {
	margin-top: 0px;;
}

}



/* =============================================================================
   boxes
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.box-content {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.box-content .article {
	padding: 0;
}

.box-content {
	display: block;
	float:left;
	width:47.5%;
	margin:0 0 2em 0;
}

.boxes-content {
	clear:both;
	float:left;
	margin-bottom: 1em;
	width:100%;
}

.boxes-content h3.title {
	height:28px;
	background:url(../images/bg-boxes-header.png) no-repeat;
	color:#fff;
	font-size:1.1em;
	line-height:1.1em;
	font-weight:bold;
	padding:.5em;
}


.boxes-content .content ul+div {
	margin-top:1em;
}

.boxes-content .box-row {
	clear:both;
}

.boxes-content .c1 {
	margin-right:5%;
}

.boxes-content div h4 {
	font-weight:bold;
	color:#134666;
	margin:0;
	font-size:1em;
}

.boxes-content div li {
	margin:0 0 1em 0;
}

.boxes-content div p {
	line-height:1.5em;
	margin:0;
}

.box-content.list li {
	list-style:disc;
	line-height:138%;
	margin:.8em 0 0em 1em;
}

.box-content .list li a {
	font-weight:bold;
	color:#134666;
	text-decoration:none;
}

.box-content.full {
	margin:0;
	width:100%;
}

.box-content a.all {
	margin-left: 1.5em;
}

/* Original had these in h3, but need to be h4 to match sidebar style */
.boxes-content h4.title {
	background:url("../images/bg-boxes-header-bottom.png") no-repeat 2em bottom;
	color:#fff;
	font-size:1.1em;
	line-height:1.1em;
	font-weight:bold;
	padding-bottom:9px;
}

.boxes-content h4.title span {
	background:url(../images/bg-boxes-header.png) repeat-x bottom left;
	padding:.5em;
	display:block;
}

}



/* =============================================================================
   main
   =========================================================================== */

/* =============================================================================
   main: page containers
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.topics-overview {
	float:left;
	width: 100%;
}

.inner,
.htmlpage,
.topics-index,
.feedback,
.locations {
	margin:1em;
	float:left;
	width:100%;
}


/* topic heading w/icon */
h2.topic {
	padding-right: 40px;
	float:left;
	background-position: right center;
	background-repeat:no-repeat;
}

h2.topic.lft {
	padding-left: 40px;
	padding-right: 0;
	float:left;
	background-position: left center;
	background-repeat:no-repeat;
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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

.topics-overview {
	margin:1em;
	box-sizing: border-box;
	padding-right: 2em;
}

.topics-overview .topiclist {
	color: white;
}

.topics-overview .topiclist strong, .topics-overview .topiclist > a {
	display: none;
}

.topics-overview .topiclist .more {
	margin-top: -25px;
}


}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.topics-overview .topiclist {
	color: inherit;
}

.topics-overview .topiclist strong, .topics-overview .topiclist > a {
	display: inline;
}

.topics-overview .topiclist .more {
	margin-top: 0px;
}


}


/* =============================================================================
   main: text
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.main p {
	line-height:1.5em;
}

}

/* =============================================================================
   main: icons: external links
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

a.go {
	background: url('../images/link-external.png') no-repeat right center;
	padding-right: 20px;
}

}

/* =============================================================================
   lawhelp interactive links
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

a.lhi {
	background: url('../images/lhi_link.png') no-repeat right center !important;
	padding-right: 20px !important;
}

}

/* =============================================================================
   main: forms
   **TEMPORARY UNTIL UNIFORM IS FACTORED OUT**
   =========================================================================== */
/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.main form .field {
	margin-bottom:1em;
}

form.aux {
	display: inline;
}
input[type=image] {
	width:auto;
	height:auto;
	border:0;
	padding:0;
}

.main form .field input, .main form .field select, .main form .field textarea {
	width:100%;
}

.main form .field label input {
	width:auto;
	height:auto;
}

.main form .field label span {
	margin-left: 25px;
	font-weight:normal;
	display:block;
}


.main form .field label {
	display:block;
	line-height:1.5em;
}

.main .uniForm {
	z-index:initial;
}

.main .uniForm label em, .main .uniForm .label em {
	color:red;
	font-size:1.1em;
}

.main .uniForm label, .main .uniForm .label {
	color:#432;
	font-size:1.1em;
}

.main .uniForm .textInput, .main .uniForm .captchaImage input.textInput {
	height:19px;
	padding:6px;
}

.main .uniForm .captchaImage input.textInput {
	font-size:1.1em;
}

.main .uniForm .buttonHolder .button {
	background:url(../images/bg-button-brown.png);
	color:white;
	padding:0 23px;
	border:0;
	font-weight:bold;
	text-transform:uppercase;
	min-height:2.4em;
	line-height:2.4em;
	margin:1px 0 0 6px;
	font-size:1.1em;
}

.main .uniForm .buttonHolder .green {
	background:url(../images/bg-button-green.png);
}

.main .uniForm .buttonHolder .blue {
	background:url(../images/bg-button-blue.png);
}

}

/* =============================================================================
   main: lists
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.main dl {
	float:left;
	clear:both;
	margin:.5em 0;
	width:100%;
}

.main dl dt, .main dl dd {
	margin:0;
}

.main dl dt {
	float:left;
	clear:left;
	color:#999;
	font-weight:bold;
	width:30%;
	margin-right:2%;
}

.main dl dd {
	float:left;
	clear:right;
	width:68%;
}

dl.meta dd {
	float:left;
	clear:right;
	background:url(../images/bg-more-content.png) left .3em no-repeat;
	padding-left:10px;
	margin-right: 1em;
	margin-left: 1em;
}

.results dl.meta dd {
	clear:right;
	background: none;
	padding-left:0;
}

.main div.resource dl dt {
	width: auto;
}

.main div.resource dl dd {
	float:left;
	width:auto;
	margin-right: .5em;
}


.main div.resource dl dd:after {
	content:", ";
}

.main div.resource dl dd:last-child:after {
	content:"";
}

.main div.resource p {
	margin: 1em 0;
}

}

/* =============================================================================
   content: column 1 (typically sidebar area)
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.filters h2 { font-size:120%; }

.main .content-column-1 {
	border-bottom:1px solid #ecd393;
	border-right:1px solid #ecd393;
	padding: 0 1em;
	overflow: hidden;
}

}

/* =============================================================================
   content: column 2 (typically main content area)
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.main .content-column-2 {
	padding:0 1.7em 1em 1.7em;
}

}

/* =============================================================================
   form
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.form .field {
	padding:.25em 0;
}

.form .field:first-child {
	padding-top:0;
}

.form .field label {
	color:#432;
	font-size:1.1em;
	font-weight:bold;
	margin-bottom:.15em;
}

.form .field label em {
	color:red;
	font-size:1.1em;
	margin-left: .25em;
}

.form .field input {
	height:1.5em;
}

.form .field textarea {
	margin-bottom:0;
}

.form .field select {
	height:2.6em;
	padding:3px 3px 3px 1px;
}

.form .field .subselect {
	height:inherit;
	padding:8px 3px;
}

.form .field input, .form .field textarea {
	width:98%;
	max-width:98%;
	padding:6px 4px;
}

.form .field input, .form .field textarea, .form .field select {
	border:1px solid #CFCFCF;
}

.form .controls button {
	background:url(../images/bg-button-brown.png);
	color:white;
	padding:0 23px;
	border:0;
	font-weight:bold;
	text-transform:uppercase;
	min-height:2.4em;
	line-height:2.4em;
	margin:0;
	cursor:pointer;
}

.form .controls button:active {
	position:relative;
	top:1px;
	left:1px;
}

.form .controls button.green {
	background:url(../images/bg-button-green.png);
}

.form .controls button.blue {
	background:url(../images/bg-button-blue.png);
}

.form .supplement {
	margin-top:1em;
	color:#999;
}

.form .supplement span {
	clear:both;
	display:block;
}

.form .supplement span+span {
	margin-top:1em;
}

.form .supplement .required {
	color:red;
}

}

/* =============================================================================
   filters
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.dp30.filters,.dp20.filters {
	width: 100%;
	box-sizing: border-box;
}

.filters > div {
	border-bottom:1px solid #ecd393;
	border-right:1px solid #ecd393;
	padding:10px 12px 12px 12px;
}

.filters h2 a {
	color:#3f762b;
}

.dp80 {
	clear: left;
	width: 100%;
}

.filters ul.channels {
	padding: 0px;
	width: inherit;
	text-align: left;
}


.filters ul.channels > li {
	display: block;
}

.filters ul.channels > li h5 {
	display: block;
}

.filters ul.channels > li h5::before {
	content: "";
}

.filters ul.channels:after {
	content: '';
	display: initial;
	width: inherit;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.dp30.filters {
	width: 30%;
}

.dp20.filters {
	width: 20%;
}

.dp80 {
	clear: none;
	width: 80%;
}


}

/* =============================================================================
   filters: topic
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.filters .topic div {
	border:1px solid #d8d8d8;
	color:#134666;
	font-size:.9em;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;
	width:100%;
	padding:.5em 0;
	-webkit-box-shadow:0 2px 3px 0 #d8d8d8;
	-moz-box-shadow:0 2px 3px 0 #d8d8d8;
	box-shadow:0 2px 3px 0 #d8d8d8;
	min-height:30px;
	background-position: right center;
	background-repeat: no-repeat;
}

.filters .topic a {
	padding:1em 40px 1em 15px;
	display:block;
	line-height:1.2em;
	background:url(../images/back-bullet.png) 5px center no-repeat;
}

}

/* =============================================================================
   filters: categories
   =========================================================================== */
/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.filters .cat h5, .filters .alpha h5 {
	display:block;
	border:1px solid #d8d8d8;
	color:#3f762b;
	font-size:.9em;
	font-weight:bold;
	text-transform:uppercase;
	min-height:16px;
	padding:9px 0 .5em;
	clear:both;
	margin:0 0 1em 0;
	-webkit-box-shadow:0 2px 3px 0 #D8D8D8;
	-moz-box-shadow:0 2px 3px 0 #D8D8D8;
	box-shadow:0 2px 3px 0 #D8D8D8;
	white-space: normal;
}

.filters .cat h5 span, .filters .alpha h5 span {
	position:relative;
	float:left;
	top:-1px;
	left:-4px;
	height:17px;
	width:17px;
	min-height:17px;
	background:url('../images/section-closed.png') left top no-repeat;
	cursor:pointer;
}

.filters .cat h5 span.single, .filters .alpha h5 span.single {
	background:url('../images/section-single.png') left top no-repeat;
}

.filters .cat h5 span.opened, .filters .alpha h5 span.opened {
	background:url('../images/section-opened.png') left top no-repeat;
}

.filters .cat .channels h5.selected a, .filters .cat .categories .selected, .filters .alpha a.selected {
	padding-right: 8px;
	background:url('../images/bullet-right.png') right center no-repeat;
	font-weight: bold;
}


.filters .cat h5, .filters .alpha h5 {
	color:#3f762b;
	padding-left: 4px;
}

.filters .alpha h5 {
	cursor:pointer;
	display:block;
	border:1px solid #d8d8d8;
	color:#3f762b;
	font-size:.9em;
	font-weight:bold;
	text-transform:uppercase;
	min-height:16px;
	padding:9px 0 .5em;
	clear:both;
	margin:0 0 1em 0;
	-webkit-box-shadow:0 2px 3px 0 #D8D8D8;
	-moz-box-shadow:0 2px 3px 0 #D8D8D8;
	box-shadow:0 2px 3px 0 #D8D8D8;
}

.filters .alpha h5 span {
	position:relative;
	float:left;
	top:-1px;
	left:-4px;
	height:17px;
	width:17px;
	min-height:17px;
	background:url('../images/section-closed.png') left top no-repeat;
	cursor:pointer;
}

.filters .alpha h5 span.single {
	background:url('../images/section-single.png') left top no-repeat;
}

.filters .alpha h5 span.opened {
	background:url('../images/section-opened.png') left top no-repeat;
}

.filters .alpha a.selected {
	padding-right: 8px;
	background:url('../images/bullet-right.png') right center no-repeat;
	font-weight: bold;
}

.filters .cat h5 span + a {
	color:#3f762b;
}

.filters .cat h5 span.opened + a {
	color:#134666;
}

.filters .cat .categories, .filters .alpha ul {
	list-style-type:disc;
	margin-left: .5em;
	font-weight: bold;
	clear:both;
}

.filters div .alpha ul {
	margin-left: 1.5em;
}

.filters .cat .categories a, .filters .alpha ul a {
	font-size:.9em;
	color:#134666;
}

.filters .cat > ul > li, .filters .alpha li {
	margin:.5em 0;
	line-height:1.2em;
}

.filters .cat .channels h5.selected a {
	color:#134666;
}

.filters select {
	width:100%;
}

}

/* =============================================================================
   filters: subtopics
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.filters ul.subtopics {
	list-style-type: none;
	font-weight: bold;
}

.filters ul.subtopics.tabbed {
	margin-top: 0;
	height: 30px;
}

.filters ul.subtopics.tabbed li {
	display: none;
}

.filters ul.subtopics.tabbed li.selected {
	display: block;
	background: transparent;
}

.filters ul.subtopics.tabbed li.selected .subtopic {
	color: #40762B;
	font-size: 1.5em;
}

.filters ul.subtopics li {
	border-bottom: 1px solid #287191;
	background-color: white;
	padding: .5em .3em .5em .5em;
	margin: 0 !important;
}

.filters ul li:last-child {
	border-bottom: none;
}

.filters ul.subtopics a {
	font-size:.9em;
	color:#134666;
}

.filters ul.subtopics li.selected {
	border-bottom: none;
	background-color: #23637F;
	padding: 1.2em .3em 1.2em .5em !important;
}

.filters div.subtopics + .facets {
	margin-top: .5em;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.filters ul.subtopics.tabbed {
	height: auto;
}

.filters ul.subtopics.tabbed li {
	display: block;
}

.filters ul.subtopics.tabbed li.selected {
	display: block;
	background: #23637F;
}

.filters ul.subtopics.tabbed li.selected .subtopic {
	color:#134666;
	font-size: .9em;
}

.filters ul.subtopics.tabbed li.selected a.subtopic {
	color: #fff;
}

}

/* =============================================================================
   filters: facets
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.filters .facets {
	visibility:hidden;
}

.filters .facets h4 {
	text-transform:uppercase;
	font-style:italic;
	color:#443321;
	font-size:.9em;
	margin:0 0 6px;
}

.filters .facets .applied, .filters .facets .available {
	margin-top:3px;
	padding:5px;
	background:#f7f6ef;
	padding:12px 10px 10px 16px;
}

.filters .facets .applied ul {
	color:#134666;
}

.filters .facets .applied span {
	font-weight:bold;
}

.filters .nav > ul {
	margin: 1em 0;
}

}

/* =============================================================================
   results
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.results .dp70 {
	width: 100%;
	clear: both;
}

.results h3 {
	clear:both;
}

.lscfunded {
	background:url("../images/lscMini.gif") no-repeat;
	text-indent:-9999px;
	display:inline-block;
	width:32px;
	height:12px;
}


.results .items > h2 {
	display: none;
}

 .results .items > h3 {
 	text-align: right;
 	font-style: italic;
 	font-weight: normal;
 	border-bottom: 1px solid;
 	width: 100%;
 	margin-bottom: 8px;
 	padding-right: 8px;
 	box-sizing: border-box;
 }


.results .listing {
	margin: 0 1em;
}

.results .listing li {
	margin:0;
	padding:.5em 0 .5em 25px;
	background:url("../images/content-list.png") no-repeat left .6em;
	clear:both;
	list-style-type:none;
}

.results .listing li h3 {
	margin:0;
	position:relative;
}

.results .listing li h3 {
	margin:0;
	position:relative;
	line-height: 1.1em;
}

.results .listing li dl dd {
	width:auto;
}

.listing p {
	margin:0;
}

.items .listing dl, .items .listing dl dt, .items .listing dl dd {
	margin: 0;
}

.items .listing li dl dd {
	margin-right: .5em;
}

.listing li dl dd:after {
	content:", ";
}

.listing li dl dd:last-child:after {
	content:"";
}


.cp .items ul.listing {
	margin: 0;
}
.cp .items .listing li {
	margin: 0;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.results .dp70 {
	width: 70%;
	clear: none;
}

.results .items h2, .results .items h3 {
	margin: .5em .7em;
	display: block;
}

 .results .items > h3 {
 	text-align: inherit;
 	font-style: initial;
 	font-weight: bold;
 	border-bottom: none;
 	width: 100%;
 	margin-bottom: inherit;
 	padding-right: inherit;
 	box-sizing: inherit;
 }

}

/* =============================================================================
   results: Tabbed channels
   =========================================================================== */


/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {
   
.dp100 > .topic {
	border:1px solid #d8d8d8;
	text-transform:uppercase;
	text-decoration:none;
	padding:.5em;
	-webkit-box-shadow:0 2px 3px 0 #d8d8d8;
	-moz-box-shadow:0 2px 3px 0 #d8d8d8;
	box-shadow:0 2px 3px 0 #d8d8d8;
	background-position: right 5px center;
	background-repeat: no-repeat;
	margin: 8px 8px 0 15px;
}
 
.results .channel-tabs {
	margin: 10px 0 10px 0;
	padding:0 10px 0 10px;
}

.results .channel-tabs ul {
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 5px auto 0 auto;
	padding: 0;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	width: 100%;
}

.results .channel-tabs li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 4px 0 0;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	border-bottom: 4px solid #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.results .channel-tabs li:last-child {
	margin: 0;
}

.results .channel-tabs li.selected {
	background: #579637;
	border-bottom: 4px solid #569636;
}

.results .channel-tabs li.selected a {
	background-color: #569636;
	color: #ffffff;
}

.results .channel-tabs li a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 3em;
	background-color: #d2e3c9;
	color: #579637;
	padding: 0 10px 0 10px;
	font-size: 1.2em;
	font-weight: bold;
}

.results .channel-tabs li a:hover {
	background-color: #569636;
	color: #ffffff;
	text-decoration: underline;
}

.results .channel-count {
	background-color: #569636;
	color: #ffffff;
	line-height: 3em;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 10px 0 10px;
}

.results .items h4.expand {
	color: #fff;
	/*background-color: #569636;*/
	background-color: #23637F;
	font-size: 130%;
	margin: 10px 10px 0 10px;
	text-align: left;
	padding: 10px;
	font-size: 120%;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.results .items h4.expand span {
	float: right;
	margin: 0 10px 0 0;
	font-size: 150%;
}

.results .items ul.collapse {
	display: none;
	overflow: hidden;
	padding: 10px 0 10px 0;
}

.results .items ul.collapse[aria-hidden="true"] {
	display: none;
}

.results .items ul.collapse[aria-hidden="false"] {
	display: block !important;
}

}

/* =============================================================================
   results: listing: metadata
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.results .listing dl dt {
	font-weight:bold;
	width:auto;
	color:#000;
	margin-right:.5em;
}

}

/* =============================================================================
   pagination
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.pagination {
	float:right;
	padding:5px 15px 0 0;
	margin:0 0 22px;
	clear:both;
}

.pagination a {
	float:left;
	line-height:19px;
	color:#41762b;
	margin:0 0 0 9px;
	font-weight:bold;
}

.pagination strong {
	float:left;
	margin:0 0 0 9px;
	font-weight:bold;
	font-size:1.5em;
}

.pagination .previous {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url(../images/pagination.png) left top no-repeat;
	height:18px;
	width:18px;
}

.pagination .next {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	background:url(../images/pagination.png) left -18px no-repeat;
	height:18px;
	width:18px;
}

}

/* =============================================================================
   organization detail
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.organization {
	float:left;
	width:100%;
}

.section .section .org-detail {
	margin-bottom:.5em;
	border-top:1px solid #ccc;
	overflow:hidden;
}

.org-detail .section:first-child {
	border-top:0;
}

.org-detail .section:last-child {
	margin-bottom:0;
}

.org-detail .section h5 {
	margin:0;
}

.org-detail h4 + div.section {
	border-top:none;
}

.org-detail dl {
	line-height:1.5em;
	overflow:hidden;
	clear: both;
}

.org-detail dl dl dt, .org-detail dl dl dd {
	width:auto;
}

.org-detail dd > dl {
	margin: 0;
}

.org-detail dl dl dt {
	margin-right:.5em;
}

.org-detail ul {
	list-style-type:disc;
	color:#134666;
	font-size:1.1em;
	line-height:1.2em;
	font-weight: bold;
	margin:0 0 2em 1.3em;
}

.org-detail dl > ul {
	margin:0;
	font-weight: normal;
}

.org-detail .section {
	margin: 0 0 .75em 0;
}

}

/* =============================================================================
   addresses
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

h5.org {
	margin:0;
	padding:0;
}

.adr {
	line-height:1.5em;
}

address .locality {
	clear:left;
}

}

/* =============================================================================
   footer
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.footer {
	font-weight:bold;
}

.footer h6 {
	color:#443321;
	margin:0 0 .5em;
}

.footer ul {
	margin:0 0 1em;
}

.footer li {
	font-size: 1em;
	color:#134666;
	line-height:160%;
	padding-right: 10px;
}

.footer li a {
	color:#134666;
}

.footer .article {
	padding:0;
}

.footer > div {
	float:left;
	padding:1em;
	border-left:1px dotted #E3CB8D;
}

.footer > div:first-child {
	border:0;
}

.footer > div > div:first-child {
	border:0;
}

.footer img {
	margin:0 .5em;
}

.footer div {
	display: none;
}

.find-issue, .find-help {
	display: none;
	height: auto;
}

.footer .national-site-tools {
	height: auto ! important;
	display: block;
}

.national-site-tools h6 {
	display: none;
}

.national-site-tools ul li {
	float: left;
	margin-right: 4px;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.footer {
	padding:2em 0 1em;
}

.footer div {
	display: block;
}

.footer li {
	font-size:.8em;
	padding-right: inherit;
}

.find-issue, .find-help {
	display: block;
}	

.national-site-tools h6 {
	display: block;
}

.national-site-tools ul li {
	float:none;
}


}

/* =============================================================================
   footer: sponsors / awards
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.footer div div.article div {
	display: none;
}



}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.footer div div.article div {
	display: block;
	padding: 0 0 1em 0;
}

.footer div img {
	margin:1em;
}

}

/* =============================================================================
   footer: copyright
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.copyright {
	display: block;
	clear:both;
	text-align:right;
}

.copyright a:first-of-type {
	display: block;
}

.copyright a {
	display: none;
}

}


/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.copyright a {
	display: block;
}

}

/* =============================================================================
   message boxes
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.error, .errors {
	background-color:#f6cbca;
	color:#d84549;
	border:solid 1px #d84549;
	font-weight:bold;
	padding:1em;
	margin:.5em 0;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-khtml-border-radius:4px;
}

}

/* =============================================================================
   ckeditor
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

img.fleft {
	float:left;
	margin-right:.5em;
}

.toggle {
	cursor:pointer;
	font-weight:bold;
}

.toggle:hover {
	text-decoration:underline;
}

}

/* =============================================================================
   ajax popup menu
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.aj-menu {
	display:none;
	background:url(../images/ajax-large.gif) center center no-repeat;
	min-width:250px;
	min-height:60px;
	position:absolute;
	background-color:#FFFFFA;
	border-left:1px solid #ECD59C;
	border-right:1px solid #ECD59C;
	border-bottom:1px solid #ECD59C;
	z-index:999;
}

.aj-menu table {
	margin:.2em;
	width:100%;
}
.aj-menu table td {
	white-space:nowrap;
	padding:.4em .2em;
}

.aj-menu.loaded {
	background-image:none;
}

/* this should be merged with .ajmenu */
/* popmenu is used in lh3/modules/lhstate/views/viewlets/theme/sitelanguages.cfm */
.popmenu {
	display:none;
	position:absolute;
	background-color:#FFFFFA;
	border-left:1px solid #ECD59C;
	border-right:1px solid #ECD59C;
	border-bottom:1px solid #ECD59C;
	z-index:999;
}

}

/* =============================================================================
   toggle menu
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.tglMenu h5 {
	background:url(../images/bullet-right.png) left center no-repeat;
	padding-left:11px;
	cursor:pointer;
	font-size:.9em;
	color:#134666;
}

.tglMenu h5.open {
	background:url(../images/bullet-down.png) left center no-repeat;
}

.tglMenu ul {
	padding-left:11px;
	font-size:.9em;
	display:none;
	color:#134666;
}

}

/* =============================================================================
   login
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.loginform {
	max-width:400px;
	position:relative;
	margin:0 auto;
}

}

/* =============================================================================
   admin
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.tbSort {
	padding:.5em;
	display:none;
}

.tbSort > div {
	margin:.5em;
}

.tbSort input {
	border:0;
	color:#A6C2D9;
	font-weight:bold;
	background-color:transparent;
}

.tbSort .ui-state-highlight {
	padding: 0 .5em;
	float:right;
}

.tbSort .ui-state-highlight span {
	font-size: .9em;
	font-weight: normal;

}

.tbSort .alt {
	font-weight: normal;
}

.tbSort .strs {
	float: right;
}

.amptb,.tglSort {
	display: none;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.amptb,.tglSort {
	display: block;
	position: relative;
}

/* Editing boxes for CKEditor have their width set to 100% by inline styles that we overrode earlier. This will sort them out */
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ampDialogMin.ui-resizable textarea, .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ampDialogMin.ui-resizable iframe {
    width: 100% ! important;
}

}

/* =============================================================================
   debug
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

/* p.debug {
	visibility:hidden;
} */

ul.listing li:hover p.debug {
	visibility:visible;
}

}

/* =============================================================================
   alt languages
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.alt-languages p {
	margin-bottom:1.8em;
}
.alt-languages .section {
	margin: 0 1em 1em 1em;
	float:left;
	clear:both;
	width:100%;
}

.alt-languages .bulleted-list a {
	font-weight: normal;
}

.alt-languages .bulleted-list li span {
	font-weight: bold;
}

}

/* =============================================================================
   malo
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

ul.dp50 {
	width:46%;
}

.wrapper > .header {
	padding-bottom: 1em;
	display: table;
	background: #ffffdc;
	background: -webkit-linear-gradient(#fffff9,#ffffdc);
	background: linear-gradient(#fffff9,#ffffdc);
	width: 100%;
}

}

/* =============================================================================
   lists
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.alt-languages ul {
	list-style-type:disc;
	color:#134666;
	font-size:1.1em;
	line-height: 1.2em;
	margin:0 0 2em 0;
}

.topics-list div.dp100, .topics-list ul.dp50 {
	list-style-type: none;
	clear: left;
	width: 100%;
	margin: 0px;	
}

.topics-list ul li {
	margin: 1px;
	font-weight: bold;
}

.alt-languages ul {
	margin-left: 1em;
	font-weight: bold;
	font-size: 1.1em;
}
.topics-list ul.st li {
	font-weight:normal;
}
.alt-languages ul li {
	margin: .5em 0;
}
.alt-languages ul li a {
	color: #134666;
}

.comma-list {
	list-style:none;
	margin:0;
	padding:0;
}
.comma-list li {
	display:inline;margin-left:0;
}

.comma-list li:after {
	content:',';
}

.comma-list li:last-child:after {
	content:'';
}

}

/* =============================================================================
   mid-size: these styles make changes to take advantage of mid-size screens.
   ========================================================================== */

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


.topics-list ul.dp50 {
	clear: none;
	margin: 0;
	width: 42.5%;
	margin-right:2.5%;
}

.topics-list ul li {
	font-weight: bold;
	font-size: 1.1em;
	color: #134666;
}

}

/* =============================================================================
   full-size: these styles make changes to take advantage of full-size screens.
   ========================================================================== */

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

.topics-list div.dp100 {
	padding-left: 95px;
}

}

/* =============================================================================
   header box (1)
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

h3.header-box-1 {
	padding:14px 0 16px 18px;
	margin:0 0 10px;
	font-weight:bold;
	font-size:1.25em;
	line-height:1.2em;
	text-transform:uppercase;
	color:#fff;
	background:url(../images/bg-header-green.png) left bottom no-repeat;
}

}

/* =============================================================================
   alternate header
   =========================================================================== */

/* =============================================================================
   basic: these are the styles that will work with any screen size (as the
          screen expands, additional sets with "min-width" will kick in, below).
   ========================================================================== */

@media screen {

.althead {
	margin:1em;
	padding: 2em 2em 1em 2em;
	background:url(../images/bg-box-1.png) left top repeat-x;
}

.althead h2{
	color:#134666;
	font-size:2.5em;
	line-height:1.2em;
	margin:0 0 13px;
}


.althead .form .field,
.althead .form .controls {
	display:inline-block;
}

.althead .form .field {
	margin:0 .4em 0 0;
	width:40%;
}

.althead .form .field label {
	display:none;
}

}