/**
 * layout.css
 * Contains shared and responsive CSS
*/

/* Table of Content
==================================================
	#Site Styles
        #Generic Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

.container .to-right {float:right;}

    /* GENERIC
    ******************************/

    /* Elements */
    body {text-align:center;}
    b, strong {font-weight:bold;}
    i, em {font-style:italic;}
    /*hr {display:none;}*/
    iframe {display:block;}
    img {-ms-interpolation-mode:bicubic;}
	blockquote {margin:1em 0; padding:0.5em 1em;}

    /* Other */
    .container {text-align:left;}
    .clear {clear:both; display:block;}
    .clear2 {clear:both;}
    .noshow {display:block; text-indent:-4999px; height:0; width:0;position:absolute; overflow:hidden; border:0 !important;}
    .hidden, .js .hidden2, .printshow {display:none;}
    .error {color:#f00;}
    .nowrap {white-space:nowrap;}
	.content td {vertical-align:middle;}
	.content img, .homeModuleContent img {max-width:100%;} /* Scale images */
	
	/* vertically align anything in three parts "table" / "cell" / "content"
	   For standards browsers, the [class] definition overrides the quirky-IE definition */
	.valign-table {height:100%; overflow:hidden; position:relative; width:100%; /* border:1px solid gold; */}
	.valign-table[class] {display:table;}
	.valign-cell {position:absolute; top:50%; left:0; /* border:1px solid red; */} /* for quirk explorer only*/
	.valign-cell[class] {display:table-cell; vertical-align:middle; width:100%; position:static;}
	* + html .valign-cell {position:absolute !important;} /* ie7 fix */
	.valign-content {position:relative; top:-50%; /* border:1px solid pink; */} /* for quirk explorer only */


/* #Page Styles
================================================== */

    /* Block Positioning
    *******************************/
    .wrapper    {position:relative; margin:0 auto; text-align:left; height:100%}
    #header     {position:relative; overflow:hidden; background-color:#ECECEC;}
    #footer     {padding:15px 0 5px;}
    #container  {overflow:hidden;}
	
	/**
	 * Flexible layout, using #main as .row
	 */
	#main {margin-bottom:20px;}
	#main:before,
	#main:after {content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
	#main:after {clear:both;}
	#main {zoom:1;}

	/* four columns alpha sidebar */
	#main .navContainerSidebar {float:left; display:inline; margin-left:10px; margin-right:10px; width:220px; margin-left:0; margin-right:10px;}

    /* Block Colors/borders
    *******************************/
    .wrapper   {background:#fff;}
    html, body {background:#f2f2f2;}
    #header h1 {color:#fff; font-size:127%;}

    /* Header ****************/
    #navUserBar {background:#e5e5e5; border-bottom:1px solid #a8b7c9; min-height:44px; overflow:hidden; color:#476999; position:relative;}
    #navUserBar #username {text-transform:uppercase;}

    ul.socialLinks {margin:0;}
    ul.socialLinks li {display:inline;}
    ul.socialLinks img {vertical-align:text-bottom;}
    
    /* toggle menu button for mobile devices */
    .menu-toggle {background:#FBFBFB; border-color:#B4C2CC #7293B5 #6A82A0 #A1B8D3; border-radius:2px; border-style:solid; border-width:1px; color:#5A7EA8; cursor:pointer; float:left; font-size:254%; height:36px; line-height:17px; margin:6px 0 0 3%; overflow:hidden; padding:0; transition:all 0.4s ease 0s; vertical-align:top; width:32px;} 
    .menu-toggle.toggled {background:#efefef; border-color:#A6A6A6 #CFCFCF #B3B3B3 #989898; border-style:solid; border-width:1px; color:#636262;}
    .menu-toggle:hover {color:#2E59A9 }
    .menu-toggle.toggled:hover {color:#4A4A4A }


    /* Ex-bar ****************/
    #exbar {margin-top:10px; overflow:hidden; width:100%;}
    #exbar div {float:left; height:38px; line-height:38px; position:relative;}  /* line-height vertically aligns text */
    
    #exbar .logo {background:white; width:67%;}
    #exbar .logo h1, #exbar .logo .logo {padding-left:35px;}
    /*#exbar .logo a {background:url("/_layouts/unex/includes/images/unex.png") no-repeat scroll 0 46% transparent; display:block; float:left; text-indent:-500px; width:250px; height:100%; font-family:Times, sarif; font-size:140%; text-decoration:none; color:#fff }*/
    #exbar .logo img {vertical-align:middle;}
    #exbar .logo span {border-left:1px solid #fff; font-size:109%; margin-left:14px; overflow:hidden; padding-left:10px; padding-top:3px; vertical-align:middle;}
    #exbar .logo .logo {width:100%; background:none;}

    #exbar .explore {background:white; color:#fff; font-family:sans-serif; font-size:90%; font-weight:bold; text-align:center; text-indent:-4900px; text-transform:lowercase; margin-right:-48px; width:100%;}
    #exbar .explore h2 { margin-left:-48px;} /* negative margin to offset xArrows */

    #exbar .xGroup {width:33%;}

    #exbar .xArrows .arrow {float:left; height:0; margin:0; padding:0; width:0; -webkit-transform:rotate(360deg) /* smooth arrows for webkit */;}
    #exbar .xArrows .cleft {border-bottom:19px solid transparent; border-left:15px solid white; border-top:19px solid transparent;}
    #exbar .xArrows .cright {border-bottom:19px solid transparent; border-right:15px solid white; border-top:19px solid transparent;}
    
	#bottomXbarCont{
		overflow:hidden;
		margin-top: 10px;
	}
	
	#bottomXbar {
		float: right;
	}
    
	#progDtls{
		display: block;
	}
    
    /* Footer ****************/
    #footer                             {font-size:85%;}
    #footer a                           {color:#8d8d8d; text-decoration:none;}
    #footer a:hover                     {color:#5a7ea8; text-decoration:underline;}
    #footer .footerLinks                {display:inline; float:left;}
    #footer .footerLinks ul             {overflow:hidden; margin:0 0 .1em;}
    #footer .footerLinks ul li          {display:inline; margin-right:5px; padding-right:5px; border-right:1px solid #8d8d8d;}
    #footer .footerLinks ul li.last     {margin-right:0;   padding-right:0;   border-right:0px none;}
    #footer .copyright                  {display:inline; float:right; padding:4px 0 0; white-space:nowrap;}
    #footer .copyright a                {margin-left:5px; padding-left:5px; border-left:1px solid #8d8d8d;}
    #footer .appVer                     {color:#fff; text-align:right;}
    
    #footerExbar {margin:16px 0 20px; overflow:hidden; width:100%;}
    #footerExbar div {float:left; height:56px; line-height:56px; position:relative;}  /* line-height vertically aligns text */
    
    #footerExbar .logo {border-top: 2px solid white;border-bottom: 2px solid white; width:14%;}
    #footerExbar .logo h1, #exbar .logo .logo {padding-left:35px;}
    #footerExbar .logo a {background:url("/_layouts/unex/includes/images/bgLogo5.gif") no-repeat scroll 0 46% transparent; display:block; float:left; text-indent:-500px; width:250px; height:100%; font-family:Times, sarif; font-size:140%; text-decoration:none; color:#fff }
    #footerExbar .logo img {vertical-align:middle;}
    #footerExbar .logo span {border-left:1px solid #fff; font-size:109%; margin-left:14px; overflow:hidden; padding-left:10px; padding-top:3px; vertical-align:middle;}
    #footerExbar .logo .logo {width:100%; background:none;}

    #footerExbar .explore {border-top: 2px solid white;border-bottom: 2px solid white; color:#fff; font-family:sans-serif; font-size:90%; font-weight:bold; text-align:center; text-indent:-4900px; text-transform:lowercase; margin-right:-48px; width:99%;}
    #footerExbar .explore h2 { margin-left:-48px;} /* negative margin to offset xArrows */

    #footerExbar .xGroup {width:81%;}

    #footerExbar .xArrows .arrow {float:left; height:0; margin:0; padding:0; width:0; -webkit-transform:rotate(360deg) /* smooth arrows for webkit */;}
    #footerExbar .xArrows .cleft {border-bottom:28px solid transparent; border-left:24px solid white; border-top:28px solid transparent;}
    #footerExbar .xArrows .cright {border-bottom:28px solid transparent; border-right:24px solid white; border-top:28px solid transparent;}


/* #Media Queries
================================================== */

    .visible-mobile {display:none !important;}

    /* @media only screen and (min-width:960px) {} */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:959px) {

		.content img, .homeModuleContent img {height:auto !important;} /* Scale heights */
        .mainHome .eventsHomeModule {margin:0 -4%; padding:9px 37px;}
		#cartSocialHolder ul.socialLinks {margin-left:2%;}
		
		ul.socialLinks img {
			margin-top: 4px;
		}
		
		/*subsite*/
		.subsite #header .navContainerMain ul li {width:99px;font-size:90%;}

    }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width:768px) and (max-width:959px) {

		#main .navContainerSidebar   {width:172px;}
        .navContainerMain #searchbox {width:31%;}
    
        div.navSearchForm {width:30%;}
        
        .mainHome .homeLinks ul {padding:5px 0 3px;}
        .mainHome .homeLinks ul li {width:140px;}
        .mainHome .homeLinks ul li a {font-size:94%;}
		
		/* Main site SearchResultsControl */
		.searchWrapper {margin-top: 50px;}
		.searchWrapper2 {margin-top: 50px;}
		
		/* subsite */
		.subsite .navSidebar {width:163px;}
		.subsite .navSidebar ul li.level2 {background:url("/_layouts/UnexSubsite1/includes/images/bgSideNavSecondarySelected.gif") no-repeat scroll -37px 0 transparent; margin-right:-10px;}
		
		.homeModuleEventSlideDynamic {width:316px !important;}
        
    }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width:767px) {

        .hidden-mobile {display:none !important;}
        .visible-mobile {display:inherit !important;}

        #exbar .logo {width:80%;}
		#exbar .logo span {visibility:hidden;}
        #exbar .xGroup {width:20%;}
		

        /**
         * tweaks for site navigation and search box */

        /* main site  */
		#cart {right:3%;}
		
        .navContainerMain {background-repeat:repeat-x;}
        .navContainerMain ul.navMain {margin:0; width:100%;}
        .navContainerMain ul.navMain li {float:left; width:50%}
        .navContainerMain ul.navMain li a {float:none; padding-left:33px;}
        .navContainerMain ul.navMain li a strong {float:none; border:0 !important; display:block;}

		#main .navContainerSidebar       {width:298px; margin:0 2px 0 0;}
        .navContainerMain .navSearchForm {width:79%; margin:13px 0 11px 6%; float:left;}
		
		.navContainerSidebar h2 {cursor:pointer;}
		
		.searchContent {margin:0; font-size:85%;}

        .mainHome .homeLinks,
        .mainHome .eventsHomeModule {margin:0 3%;}
		
		.faq .faqItems .faqItem {background-position:0 11px;}
		.faq .faqItems .faqItem h4 {background-position:20px 10px; padding:10px 10px 10px 46px;}
		.faq .faqItems .faqItem .answer {background-position:20px 11px; padding:10px 10px 10px 46px;}

		/* Main site SearchResultsControl */
		.searchBorder {margin:5px 0 0 0;}
		.searchWrapper {margin-top: 70px;}
		.searchWrapper2 {margin-top: 70px;}
		.blockShadowedContainer {width: 99%;}
		.tabContent span{font-size: .9em;}
		.searchResultsSidebar {padding: 0 !important; width: 418px; border: 0 !important;}
		/*#ctl00_Body_SearchResults1_pnlFilterPrograms .searchResultsSidebar {margin-right: -20px !important;}*/
		.searchHead {cursor:pointer; margin: 0 !important;}
		.srchResFil {float: left; width: 50%;}
		
        /* sub-site */
        .subsite #header .navContainerGlobal ul {margin:0 6px }
        
        .subsite #header .navContainerMain ul.navMain li a {border:0}
        .subsite #header .navContainerMain ul.navMain li {padding:0 6%; width:88%;}
        .subsite #header .navContainerMain ul.navMain li.current {background:url("/_layouts/UnexSubsite1/includes/images/bgArrowNavBlue90.png") no-repeat scroll 0 33% transparent;}

        .subsite #header .navContainerMain .searchContainer {float:left; margin:-6px 0 12px 5%; position:relative; width:77%;}
        
		.homeModule {margin:1em 0 0; padding:0 4%;}
		
		.main2Cols .content .breadcrumbs {margin:0 auto 16px; width:94%;}
		
		.subsite .breadcrumbs {margin:10px 1% 20px 5%; width:94%;}
		
		.subsite blockquote.quote-box,
		.subsite blockquote.quote-box.quote-box-right {padding:0; margin:0; width:100% !important;}
        
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width:480px) and (max-width:767px) {
		#main .navContainerSidebar     {width:418px; margin:0 2px 0 0;} 
		
		/*request a catalog form */
		.inquiry .textbox { margin: 0 0 10px 5px;}
		
		.searchResultsSidebar{
			width: 387px;
		}
		
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width:479px) {
	
		/* main site */
		.navContainerMain .navSearchForm {width:75%;}
		.main2Cols .content .breadcrumbs {width:91%;}
		
		/* Main site SearchResultsControl */
		.searchWrapper {margin-top: 80px;}
		.searchResultsSidebar {width: 268px;}
		.searchContent ul.tabs li {
			margin-right: 3px;
		}

		/*request a catalog form */
		.inquiry .textbox { margin: 0 0 10px 5px;}
		
		
        /* tweak sizes for events */
        .mainHome .eventsHomeModule .eventsContainer .eventsContainerInner .event {width:100px; overflow:hidden;}
        .mainHome .eventsHomeModule .eventsContainer .eventsContainerInner .event img {height:71px;}
		
		/* Calendar */
		.calContent .day {font-size:70%;}
	
		
		/* subsite */
		.homeModuleEventSlideDynamic {width:280px !important;}

	
    }

/* Scale these images on smaller screens */
/*
.homeModule .imgHolder img,
.homeModuleFeatures .homeModuleContent img,
.calContent img,
.heroImg img {max-width:100%;}
*/