/* MEDIA SCREEN CSS*/

@media only screen and (max-width: 340px) {
	#nav-utility-list li a .icon{
		display: none !important;
		}
		
	#site-header ul#nav-utility-list li a {
    padding: 2px 8px !important;
		}
		
   .background-dark-semi-transparent {
		background-image: none;	
		}
		
	#social-links.col50 {
    	float: none !important;
    	width: 48% !important;
		}
	.copyright ul {
		padding:0;
		}
}

@media only screen and (max-width: 769px){
	
/* grid */
            .col100,
            .col90,
            .col80,
            .col70,
            .col66,
            .col60,
            .col50,
            .col40,
            .col33,
            .col30,
            .col25,
            .col20,
            .col10				   { display: inline-block;
            					     *display: inline; 
            					     margin-right: 16px;    
            					   }           
            
 /*         #footer .col50		   { width: 100%; }
            #footer .col50 .section .col33 {  width: 31%;  }
            
            .media-wrap.col50	   { margin-left: 16px; }
                        
            .media-wrap.left-align { margin-left: 0; 
            						 margin-right: 16px;
            					   }
            
            
            .no-margins .col100,
            .no-margins .col90,
            .no-margins .col80,
            .no-margins .col75,
            .no-margins .col70,
            .no-margins .col66,
            .no-margins .col60,
            .no-margins .col50,
            .no-margins .col40,
            .no-margins .col33,
            .no-margins .col30,
            .no-margins .col25,
            .no-margins .col20,
            .no-margins .col10		{ margin-right: 0; }
                        
            .no-margins .col50      { width: 50%;  } */
body #s4-workspace.fixed-width {
	width: 100% !important;
    top: 50px;
} 


#site-header a#main-nav-reveal.selected, #site-header a#search-reveal.selected {
    background-color: #23323B;
}

#site-header .section.background-dark-semi-transparent {
	background-image: none !important;
}

#site-header #logo-connect{
	background-position: 50% -100px;
	background-repeat:no-repeat;
	min-height: 29px;
	height: auto !important;
	height: 29px;
	max-height: 29px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #515e67;
	width: 100%;
	}
	
#site-header #logo-connect:hover{
	background-position: 50% -129px;
	}
	
#site-header .section .col50 {
    width: 100%;
}
	
#site-header ul#nav-utility-list {
    border-bottom: 1px solid #515E67;
    text-align: center !important;
}

#site-header ul#nav-utility-list li a { 
 	padding: 0 8px;
}

#site-header #search-form-wrap {
    background-color: #23323B;
    padding: 8px 12px;
    top: 50px;
    width: 100%;
    z-index: 6;
}


/* MAIN TOP NAVIGATION BIG BUTTONS*/	
#site-header #nav-main-list{
		-webkit-column-count: 2; -webkit-column-gap: 0;
		-moz-column-count: 2; -moz-column-gap: 0;
		-ms-column-count: 2; -ms-column-gap: 0;
		-o-column-count: 2; -o-column-gap: 0;
		column-count: 2; column-gap: 0;
		background-color: #23323B;
		margin-top: 49px;
		position: absolute;
   	 	z-index: 15;
   	 	width:100%;
}

#site-header ul#nav-main-list li a {
    display: block;
    float: none;
    line-height: 32px;
}

.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {
    display: block;
}


.ms-core-listMenu-horizontalBox ul.static {
    display: inherit;
}

.menu ul, .menu li {
    margin: inherit;
    padding: inherit;
}

.ms-core-listMenu-horizontalBox li.static, .ms-core-listMenu-horizontalBox a.static, .ms-core-listMenu-horizontalBox span.static {
    float: inherit;
}

#site-header ul#nav-main-list li:first-child a {
    border-radius: 0;
}

.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text {
    display: inherit;
}

.ms-core-listMenu-horizontalBox {
    display: inherit;
}

.panel .panel{
		border-right: none;
		border-bottom: 1px solid #e6e6e6;
		}
.background-dark-semi-transparent {
	background-image: none;
	box-shadow: none;
}
           
#nav-utility-list li a .icon{
		display: inline-block;
		}
		
#ncdot_SearchBox {
    width: 100%;
}

#simple-footer ul li {
    display: block;
}

#social-links.col50{
	width:43.5%;
}

#section-navigation {
	display:block;
	position:absolute;
}

#section-navigation select {
    left: 10%;
    position: absolute;
    top: 5px;
    width: 75%;
}

#nav-sub-list .ms-core-listMenu-horizontalBox ul.static {
    display: none;
}

 
.col50.panel .button{
	bottom: 16px; 
	left: 16px; 
	margin-left: 0; 
	width: 140px; 
}

.secondary a.panel.col20{
		width: 19%;
		} 
		
.home .col50 .alert,
.home .col50 .home-page-help .item-list{
		margin-left: 0;
    	margin-top: 0;
    	width: 100%;	
		}
		
.col66 #CSR .srch-results,
.your-team-sites-wrap #CSR .srch-results{
		-webkit-column-count: 1;	-webkit-column-gap: 0;
		-moz-column-count: 1;	    -moz-column-gap: 0;
		-ms-column-count: 1;	    -ms-column-gap: 0;
		-o-column-count: 1;	    	-o-column-gap: 0;
		column-count: 1;	    	column-gap: 0;
	    margin-left: 0;
	    width: 100%;
		}
		
ul.study-header.horizontal-list li {
    display: block;
}	

ul.study-header li strong{
    padding-right: 5px;
}	

ul.study-header.horizontal-list li:first-child {
	min-height: inherit;
	overflow:visible;
}

.ms-breadcrumb-dropdownBox {
	display:none;
}

}

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

#site-header #logo-connect{
    height: auto !important;
    max-height: 45px;
    min-height: 45px;	
    width:243px;
	}
	
#site-header #search-form-wrap {
    background: none;
    margin: 0;
    padding: 2px 0 0;
    top: 0;
}


#site-header a#search-reveal,
#site-header a#main-nav-reveal{ 
	display: none;  
	}

#site-header #search-form-wrap,
#site-header ul#nav-main-list{ display: block; }


#site-header ul#nav-main-list li a{ 
	font-size: 16px; 
	line-height: 45px; 
	padding: 0 10px; 
	}

#site-header #logo-connect{
	background-position: 0 0;
	min-height: 45px;
	height: auto !important;
	height: 45px;
	max-height: 45px;
	border: 0;
	}
	
#site-header #logo-connect:hover{
	background-position: 0 -50px;
	}
						
#site-header ul#nav-main-list li a{
		display: inline-block !important;
		float: left;
		line-height: 50px;
		}
		
#site-header ul#nav-main-list li a.first, #site-header ul#nav-main-list >j li:first-child a{
		border-bottom-left-radius: 8px;
		}
		
#site-header .section {
    max-height: 52px;
}

#site-header .section > .col50.last {
	float:right;
	margin-right: 11px;
}


/* MAIN TOP NAVIGATION BIG BUTTONS*/
#site-header #nav-main-list{
		margin-top: 0;
		-webkit-column-count: 1; -webkit-column-gap: 0;
		-moz-column-count: 1; -moz-column-gap: 0;
		-ms-column-count: 1; -ms-column-gap: 0;
		-o-column-count: 1; -o-column-gap: 0;
		column-count: 1; column-gap: 0;
		background-color: transparent;
		float:left;
		position: relative;
   	 	z-index: 2;
}

/* grid */
            .col100						  { width: 98%;         }
            
            .col90						  { width: 89%;         }
           
            .col80						  { width: 78%;         }
           
            .col75						  { width: 74%;         }
           
            .col70						  { width: 69%;         }
            
            .col66						  { width: 64.666666%;  }
            
            .col60						  { width: 59%;         }
            
            .col50						  { width: 48%;        }
            
            .col40						  { width: 38%;         }
           
            .col33          			  { width: 31.333333%;  }
            
            .col30					      { width: 28%;         }
             
            .col25					      { width: 23%;         }
            
            .col20						  { width: 18.333333%;  }
            
            .col10					      { width: 8%;          }
            
            .no-margins .col100			  { width: 100%;        }
            .no-margins .col90			  { width: 90%;         }
            .no-margins .col80			  { width: 80%;         }
            .no-margins .col75			  { width: 75%;         }
            .no-margins .col70            { width: 70%;         }
            .no-margins .col66            { width: 66.666666%;  }
            .no-margins .col60            { width: 60%;         }
            .no-margins .col40            { width: 40%;         }
            .no-margins .col33            { width: 33.333333%;  }
            .no-margins .col30            { width: 30%;         }
            .no-margins .col25            { width: 25%;         }
            .no-margins .col20            { width: 18.5%;         }
            .no-margins .col10			  { width: 10%;         }
                                   
        
            #simple-footer .col50				{ width: 48%; }
            #simple-footer .col50 .section      { padding-top: 0; }

            .primary .col70 p,
            .primary .col75 p,
            .primary .col80 p,
            .primary .col90 p,
            .primary .col100 p{ width: 80%; }

            .panel .panel.no-margins .col20{ width: 19.333333%;}
            
            .cbq-layout-main li.dfwp-item .col70 {
            	width: 98%;
			}
            

.col100, .col90, .col80, .col70, .col66, .col60, .col50, .col40, .col33, .col30, .col25, .col20, .col10 {
	margin-right:16px;
}

.no-margins .col20 {
	margin:0;
}


/* design */

#right-plain.col80						  { width: 93%;}

#billboard h1{ margin-top: 145px; }

#billboard.image{ background-size: 100%; }

.panel{ display: inline-block; *display: inline; }

#ncdot_SearchBox {
	float:right;
	border-radius: 4px;
	padding: 7px 0;
}

#simple-footer ul {
	float: left;
}
       
#simple-footer ul li{
		display: inline !important;
		}
#simple-footer ul#social-links{
		text-align:right;
		}
		
ul#nav-utility-list li a.nav-utility-important {
    background-color: #4db24c !important;
    border: 1px solid #4db24c;
    border-radius: 4px;
    display: block;
    font-family: "helvetica","arial",sans-serif;
    font-size: 13px !important;
    height: 16px;
    line-height: 16px !important;
    max-height: 16px;
    min-height: 16px;
    text-align: center;
    width: 120px;
}

ul#nav-utility-list li a.nav-utility-important:hover {
    background-color: #4db24c !important;
    background-image:none !important;
}
					
#s4-ribbonrow{
		display: block;
}


#section-navigation select{
		display: none;
		}
	
#SRSB .ms-sbgo a{
		top: 9px;
		right: 1px;
		}

#s4-workspace.section{
		padding-top: 16px;
		}
		
.ms-dialog #s4-workspace.section{
		padding-top: 0;
		}
		
#page-header h1 small{
		width: 90%;
		}
		
.height90,
.height180,
.height270,
.height360,
.height450{ height: auto !important; overflow: hidden; }

.height90 { min-height:  90px; height:  90px; max-height:  90px; }

.height180 { min-height: 180px; height: 180px; max-height: 180px; }

.height270 {min-height: 270px; height: 270px; max-height: 270px; }

.height360 { min-height: 360px; height: 360px; max-height: 360px; }

.height450 {min-height: 450px; height: 450px; max-height: 450px; }

.height90 .button, 
.height180 .button,
.height270 .button,
.height360 .button,
.height450 .button{  
	position: absolute; 
	bottom: 0; 
	left: 16px; 
	}

#footer.pinstripe-dark .panel:first-child{ margin-left: 0;}

#footer.pinstripe-dark .panel{ margin-top: 0;}

#footer.pinstripe-dark .col100{ width: 100%;}

#footer.pinstripe-dark .panel .col20{width: 18%;}

	
.toc-layout-main ul.dfwp-column.dfwp-list ul.dfwp-list{
		width: 92%;
		-webkit-column-count:	2; -webkit-column-gap: 16px;
		-moz-column-count:		2; -moz-column-gap: 16px;
		-ms-column-count:		2; -ms-column-gap: 16px;
		-o-column-count:		2; -o-column-gap: 16px;
		column-count:			2; column-gap: 16px;
		margin-right: 164px;
		}

.toc-layout-main .dfwp-list .level-header a{
		min-height: 32px;
		height: auto !important;
		height: 72px;
		}
		
.toc-layout-main .dfwp-list .level-header a .title{
		line-height: 32px;
		min-height: 32px;
		height: auto !important;
		height: 32px;
		max-height: 72px;
		}
.toc-layout-main .dfwp-list .level-header a .description{
		padding-right: 16px;
		}


.toc-layout-main ul.dfwp-column.dfwp-list{
		margin:  0 32px; 
		width: 88% !important;
		}
		
	
.content .col66 .alert,
.home .col50 .alert,
.home .col50 .home-page-help .item-list{
		margin-left: 32px;
    	margin-top: 0;
    	width: 85%;	
		}
		
.col66 #CSR .srch-results,		
.your-team-sites-wrap #CSR .srch-results{
		-webkit-column-count: 2;	-webkit-column-gap: 16px;
		-moz-column-count: 2;	    -moz-column-gap: 16px;
		-ms-column-count: 2;	    -ms-column-gap: 16px;
		-o-column-count: 2;	    	-o-column-gap: 16px;
		column-count: 2;	    	column-gap: 16px;
	    margin-left: 32px;
	    width: 85%;
		}
		
#document-categories .col33{
	width: 31%; 
	border-bottom: 0; 
	border-left: 1px solid #e6e6e6;
	}

#document-categories .col33:first-child{ 
	border-left: 0;
	}

.col100 .dfwp-list li a.document-grid-item{
		width: 25% !important;
		min-height: 125px;
		}
		
.col66 .dfwp-list li a.document-grid-item{
		width: 38% !important;
		min-height: 135px;
		}
		
.col66 .dfwp-list li a.document-grid-item.sml{
		width: 33.333333% !important;
		min-height: 64px;
		height: 105px;
		max-height: 105px;
		overflow: hidden;
		}
		
.media-wrap{
		position: relative;
		overflow: hidden;
		border-top-left-radius: 8px;
		}

.media-wrap .caption{
		position: absolute;
		display: block;
		bottom: -52px;
		left: 0;
		padding: 8px 32px;
		background-color: #e6e6e6;
		color: #000 ;
		opacity: 0;
		-webkit-transition: all linear .25s;
		-moz-transition: all linear .25s;
		-ms-transition: all linear .25s;
		-o-transition: all linear .25s;
		transition: all linear .25s;
		text-shadow: 0 1px 0 rgba(255,255,255,1);
		}
		
.media-wrap:hover .caption{
		bottom: 0;
		opacity: 1;
		}
		
.media-wrap .icon{
		text-shadow: 0 1px 0 rgba(255,255,255,1);
		border-bottom-right-radius: 8px;
		top: -4px;
		left: 0;
		margin-left: 0;
		color: #4DB24C !important;
		visibility: visible !important;
		max-height: 32px;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		opacity: 1;
		background-color: #e6e6e6;
		width: 36px;
		}

.media-wrap .icon:hover,
.media-wrap:hover .icon{
	color: #6cb8e5 !important;
		}

a .media-wrap .icon:hover,
a:hover .media-wrap .icon{
	color: #EF401B !important;
		}
		
.study-header{
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	border-bottom: 1px solid #e6e6e6;
	background-color: #C0E6F7 !important;
    background-image: url("../../../../Style%20Library/Images/billboard-fade.png");
    background-position: 0 -25%;	
	}

.study-header li{
	display: inline-block;
	width: 25.17%;
	text-align: center;
	font-size: 11px;
	line-height: 36px;
	vertical-align: top;
	}
	
.study-header li.study-header-label{
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	font-family: 'calibri','helvetica','arial',sans-serif;
	font-size: 18px;
	display: block;
	width: 100%;
	color: #fff !important;
	background-color: #32424C;
	line-height: 45px;
	text-align: left;
	padding-left: 42px;
	width:93.2%;
	}
	
.study-header li.study-header-label .icon{
	left: 4px;
	top: 4px;
	margin-top: 3px;
	visibility: visible;
	color: #fff;
	font-weight: normal;
	}
	
.study-header li strong{
	margin: 0;
	display:block;
	border-right: 1px solid #32424C;
    color: #FFFFFF;
    font-family: 'calibri','helvetica','arial',sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 4px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #000000;
    text-transform: uppercase;
    line-height: 22px;
	}

.study-header li strong,
.project-info-header{
	border-top: 1px solid #000;
	border-bottom: 1px solid #32424c;
	opacity: .9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	background-color: #515E67;
    background-image: linear-gradient(center top, #32424c 15%, #515e67 100%);
    background-image: -moz-linear-gradient(center top , #32424c 15%, #515e67 100%);
    background-image: -webkit-linear-gradient(top, #32424c 15%, #515e67);                                                                 
    background-image: -o-linear-gradient(center top , #32424c 15%, #515e67 100%);                         
}

.project-info-header{
    margin-left: -8px;
    margin-right: -8px;   
}

}


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

.ms-breadcrumb-dropdownBox {
	margin: 20px 5px 0 0;
}

#site-header .ms-breadcrumb-dropdownBox a{
	color:#666666 !important;
	margin:0 .056em;
}

#site-header .ms-breadcrumb-dropdownBox a:hover {
	outline: #666666 dotted 1px;
	margin:0 .056em;
	text-decoration: underline;
}

.fluid .section,
.fluid .section.no-margins  { 
	min-width: 960px; 
	max-width: 98%; 
}

/* and here we define the max-width of the site */
#section-navigation .section, 
.section, 
.section.no-margins,
#site-header .section,
.error-page{
    margin: 0 auto;
    max-width: 960px;
}

.fixed-width #page-header.section {
	margin: 0 auto;
	max-width:960px;
}

/*
#landing-page-header.section {
	padding-bottom:16px;
}
*/

.s4-pr.s4-titlerowhidetitles.ms-titlerowborder {
	margin: 0 auto;
}

#billboard  {
   	width: 100%; 
   	max-width: 100%;
}

.col20 { 
	width: 18.333333%;
}

/* design */
#site-header  {
	width: 100%;                        
}

.fluid #site-header .section { 
	min-width: 960px; 
	max-width: 98%; 
}
    
.panel { padding-bottom: 0;	}

    
#survey, #simple-footer {
	margin: 0 auto !important;
}
		
#simple-footer a {
    line-height: 210%;
    padding: 16px 8px;
}
	
#sideNavBox {
    float: left !important;
    width: 15% !important;
}

#right-plain.col80 {
	margin: 0 !important;
	width: 78%; 
	}
	

#billboard h1,
#page-header h1{     
		 margin-right: 33.333333% !important;
}
                                
#footer .panel{ 
	min-height: 170px; 
	height: auto !important; 
	height: 170px; 
	max-height: 170px; 
	overflow: hidden; 
}

#footer.pinstripe-dark{ 
	background-position: 0 -150px;
	margin: 0 auto;
}

#footer.pinstripe-dark .panel .col20{
	width: 18.5%;
}

#footer .icon,
ul li a .icon {    margin-right: 8px;  }


.home .section.primary.pinstripe .col50,
.landing .section.support.pinstripe .col50,
.content .section.support.pinstripe .col50{
	width: 48%;
}

.content .section.primary.pinstripe .col100{
	width: 98%;
}

.content .section.primary.pinstripe .col100 .col20{
	width: 19.5%;
}	


.home .section.primary.pinstripe .col100.last{
	margin-left: 16px;
	margin-top: 16px;
	width: 96.5%;
}
				
.content .section.primary.pinstripe .col100 .col20,
.home .section.primary.pinstripe .col100.last .col20{
	width: 19.5%;
}	
			
.home .section.primary.pinstripe .col50,
.landing .section.support.pinstripe .col50,
.content .section.support.pinstripe .col50{
	width: 48%;
}
		
.content .section.primary.pinstripe .col100{
	width: 98%;
}

.content .section.primary.pinstripe .col100 .col20{
	width: 19.5%;
}	

.home .section.primary.pinstripe .col100.last{
	margin-left: 16px;
	margin-top: 16px;
	width: 96.5%;
}
		
.content .section.primary.pinstripe .col100 .col20,
.home .section.primary.pinstripe .col100.last .col20{
	width: 19.5%;
}

/*Fix width issue when layout has fixed width*/
.ms-dialog body #s4-bodyContainer{ 
   width:auto!important;
   min-width:800px!important;
}


}