/* General Template Settings
**********************************/
body {text-rendering:auto;}
body.mobile #wdn_wrapper {
    border:none;
    background:none;
    padding:0;
    margin:0;
    width:auto;
    min-width:0px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    overflow:hidden;
}
body.mobile #breadcrumbs,
body.mobile #wdn_tool_links,
body.mobile #header:after {
    display:none;
}
body.mobile #header {
    margin:0;
    display:inline-block;
    width:100%;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 92%, rgba(100,100,100,0.40) 99%, rgba(114,114,114,0.40) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(92%,rgba(0,0,0,0)), color-stop(99%,rgba(100,100,100,0.40)), color-stop(100%,rgba(114,114,114,0.40))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 92%,rgba(100,100,100,0.40) 99%,rgba(114,114,114,0.40) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 92%,rgba(100,100,100,0.40) 99%,rgba(114,114,114,0.40) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 92%,rgba(100,100,100,0.40) 99%,rgba(114,114,114,0.40) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(0,0,0,0) 92%,rgba(100,100,100,0.40) 99%,rgba(114,114,114,0.40) 100%); /* W3C */
}
body.mobile #header:before {
    content:'UNL Mobile';
    left: 45px;
    top:11px;
    font-family: 'URWGroteskCon-Lig', Helvetica, Arial, sans-serif;
    position:absolute;
    font-size:2em;
    color:#333;
    text-shadow:0px 1px 0px #fff;
    display:block;
    min-width:110px; /*Force a width so Android doesn't wrap the words */
}
body.mobile #header > a {
    background:none;
    display:inline-block;
    margin:0;
    padding:3px;
}
body.mobile #logo {
    width:40px;
    background-image:none;
    left:4px;
    top:4px;
}
body.mobile #header h1 {
    display:none;	
}
/*
*
* Search
*
*/
body.mobile #wdn_search {
    background: #fff;
    margin:0;
    margin-top:5px;
    padding:3px;
    max-height:45px;
    -webkit-border-radius:2em;
    -moz-border-radius:2em;
    border-radius:2em;
    display:inline-block;
    border:1px solid #b3b3b3;
}
body.mobile #wdn_search form label {
    display:none !important;	
}
body.mobile #wdn_search form #q {
    border:0;
    padding:0 0 0 20px;
    width:50px;
    height:25px;
    background:url('images/searchMagnifyGlass_mobile.png') no-repeat 5px 5px;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
body.mobile #wdn_search form #q:focus {
    width:200px;	
}
body.mobile #wdn_search .search {
    display:none;
}

/*
*
* Navigation
*
*/
body.mobile #wdn_navigation_wrapper {
	background: #fff;
	margin-top:-2px;
	position:relative;
}
body.mobile #wdn_navigation_wrapper > a, body.mobile #navigation:before {
    text-align:right;
    border:1px solid #8c0100;
    padding:3px;
    color:#fff;
    -webkit-border-radius:3px;
    -moz-border-radius:5px;
    border-radius:5px;
    margin-right:5px;
    background: rgb(181,45,45); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(181,45,45,1) 0%, rgba(155,38,38,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,45,45,1)), color-stop(100%,rgba(155,38,38,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(181,45,45,1) 0%,rgba(155,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(181,45,45,1) 0%,rgba(155,38,38,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(181,45,45,1) 0%,rgba(155,38,38,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b52d2d', endColorstr='#9b2626',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(181,45,45,1) 0%,rgba(155,38,38,1) 100%); /* W3C */
	-webkit-box-shadow: inset 1px 1px 2px 0px #df7a7a;
	-moz-box-shadow: inset 1px 1px 2px 0px #df7a7a;
	box-shadow: inset 1px 1px 2px 0px #df7a7a;
}
body.mobile #navigation:before {
    content: 'Site Navigation \002B';	
}
body.mobile #navigation.disabled:before {
    content: '';	
}
body.mobile #wdn_navigation_wrapper > a {
    position:absolute;
    z-index:11;
    padding:4px;
    top:3px;
    left:3px;
    cursor:pointer;	
    text-shadow:0px 1px 1px #333;
}
body.mobile #navigation {
    background: #b70302; /* Old browsers */
    background: -moz-linear-gradient(top, #b70302 0%, #9d0201 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b70302), color-stop(100%,#9d0201)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b70302 0%,#9d0201 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b70302 0%,#9d0201 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #b70302 0%,#9d0201 100%); /* IE10+ */
    background: linear-gradient(top, #b70302 0%,#9d0201 100%); /* W3C */
    color:#fff;
    width:100%;
    text-align:center;
    font-size:1em;
    text-shadow:0px 1px 1px #333;
    height:25px;
    position:relative;
    text-align:right;
    padding:8px 0 0 0;
    cursor:pointer;
}
body.mobile #navigation.disabled {
    cursor:default;	
}
body.mobile #navigation ul {
	position:absolute;
	left:100%;
	top:100%;
	width:100%;
	text-align:left;
	z-index:10;
	border-bottom:2px solid #d6d6d6;
	-webkit-box-shadow: 0px 2px 3px 0px #8a8a8a;
	-moz-box-shadow: 0px 2px 3px 0px #8a8a8a;
	box-shadow: 0px 2px 3px 0px #8a8a8a;
	-webkit-transition: left 0.5s ease;
	-moz-transition: left 0.5s ease;
	-o-transition: left 0.5s ease;
	transition: left 0.5s ease;
}
body.mobile #navigation:hover > ul {
    left:0;  
}
body.mobile #navigation ul li {
    width:100%;
    background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
	font-family: Helvetica,Arial,sans-serif;
    font-weight:bold;
    text-shadow:0 1px 1px #fff; 
    border:1px solid #d6d6d6;
    border-width:1px 0 0 0;
    position:relative;
}
body.mobile #navigation ul li a {
	text-decoration:none;
    color:#333;
    padding:1em;
    display:block;
}
body.mobile #navigation ul li.hasSecondary a {
    display:inline-block;
}
body.mobile #navigation > ul > li.hasSecondary:after {
    background: rgba(0,0,0,.4) url('images/icons-18-white.png') no-repeat -108px 50%;
    content: '';
    width:1.2em;
    height:1.2em;
    display:block;
    position:absolute;
    right:1em;
    top:1em;
    -webkit-border-radius:1em;
    -moz-border-radius:1em;
    border-radius:1em;	
}
body.mobile #navigation > ul ul {
    z-index:11;
    bottom:0;
    border-top:3px solid rgba(0,0,0,.4);
}
body.mobile #navigation ul ul li {
    padding-left:10%;
    font-size:1em;	
}
body.mobile #navigation ul ul li a {
    width:100%;	
}
body.mobile #navigation > ul > li:hover ul {
    left:0;
}
/* End Navigation */

body.mobile #titlegraphic {
    display:none;	
}
body.mobile #pagetitle {
    margin:0.5em 0 0 3px;
}
body.mobile #pagetitle h2 {
    font-size:1.5em;
    color:#333;
    margin:0;
    font-family: Helvetica,"Lucida Grande",Verdana,Arial;
    font-weight:bold;
}
body.mobile #pagetitle h2 a {
    color:#000;
    text-decoration:none;	
}
body.mobile #wdn_content_wrapper {
    background:#fff;
    clear:both;
    width:100%;
}
/* Maincontent overrides
**********************************/
#maincontent {
    font-size:1em;
    width:auto;
    padding:3px;
}
#maincontent img, #maincontent video {
    height:auto;
    max-width:100%;
    width:100%;
}
#maincontent img.frame {
    border:0;
    padding:0;	
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
}
#maincontent p.caption {
	padding:0;
	border:0;
}
#maincontent .right, #maincontent .left{float:none;}
#maincontent .col,
#maincontent .two_col,
#maincontent .three_col,
#maincontent .four_col,
#maincontent .grid1,
#maincontent .grid2,
#maincontent .grid3,
#maincontent .grid4,
#maincontent .grid5,
#maincontent .grid6,
#maincontent .grid7,
#maincontent .grid8,
#maincontent .grid9,
#maincontent .grid10,
#maincontent .grid11,
#maincontent .grid12

{
    width:auto !important;
    margin:0px;
}
#maincontent p.caption {z-index:0;}

/*
*
* WDN Content Areas
*
*/
#maincontent figure {
    
}

/* Footer overrides
**********************************/
body.mobile #footer, body.mobile #footer .footer_col {
    display:none;
}

body.mobile #footer #wdn_copyright {
    border:none;
}

/* 
* ------------------------------------------------
*
* This is the template for smart CSS media queries 
*
* ------------------------------------------------
*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {

}

/* Smartphones (landscape) ----------- */
@media only screen 
    and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
    and (max-width : 320px) {
    
    body.mobile #wdn_search form #q:focus {
        width:130px;    
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) {
    * {
        max-width:100%;
    }
}

/* iPads (landscape) [device width doesn't change when rotated, so we have to include orientation as well] ----------- */
@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {

}

/* iPads (portrait) [device width doesn't change when rotated, so we have to include orientation as well]  ----------- */
@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
	
}

/* Desktops and laptops ----------- */
@media only screen 
    and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen 
    and (min-width : 1824px) {

}

/* iPhone 4 ----------- */
@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {

}
