/* ***********************************************
	SCC home page promo area
 *********************************************** */
 
@media only screen and ( min-width:600px) and (max-width:959px)  {  
	.promo { width: 90%; margin-top: 15px; }
	.promo ul li { width:32%; }
	.promo ul li  img{ width:100%; height:auto; }
	li.promo1, li.promo2 { margin-right: 2%; }
	.promo li a { font-size:90%; }
}

@media only screen and (max-width:599px) {
	/* promo */	
	.promo { width: 100%; margin-top: 15px; background: #efefef; }
	.promo ul li {  float:none; width: 100%; text-align:center; }
	li.promo1, li.promo2, li.promo3 {}
	.promo ul li  img{ width:235px; height:145px; }
	.promo li a { font-size:90%; }
	.promo h2 { font-size:95%; letter-spacing:0.025em; }
	
	#footer2 { font-size:75%; padding: 0 5%; }
	
}

/* ***********************************************
	TABLETS 750 - 959px (including 768, 800 screen sizes)
 *********************************************** */
@media screen and (max-width: 768px) {
	.container { width: 100%; }
	
	/* new MS class for responsive image */
	.ms-rteImage-5 { float:none; width: 100% !important; height: auto !important; max-width: 720px; margin: 0px !important; }
	
	/* For Home Carousel issue*/
	#carousel-top .carousel-caption { height: auto !important;}
}

@media only screen and (max-width: 767px)
{
	.carousel-control { top: 50%!important; transform: translateY(-50%); }
}
 
@media only screen and (min-width:750px) and (max-width:959px)  {  	
	
	#topNav .container { position: relative; width: 100%; }
	#topNav {font-size: 95%; }
	#topNav li:nth-child(9) a:link, #topNav li:nth-child(9) a:visited { background: url(/Style%20Library/SCC/Images/Canvas-Icon.png) 9px 10px no-repeat; padding-left: 23px; background-with: 50%; }

	#topNav.ContinuingEd {font-size: 100%; }
	#search { background: #ffc423 url(../Images/search.png) no-repeat 90% 15px; }
	
	#carouselWrapper { overflow:hidden; }
	
	#logo { width: 700px; margin:0 auto;  }
	#logo h1 a, #logo h1 a:link, #logo h1 a:visited  { width: 100%; }
			
	/* noteworthy, calendar, news */
	#bottomZone .ms-webpartzone-cell { margin-top:0;}
	#bottomZone .container { width: 90%; margin:0 auto; height: auto; }
	.webPartZoneContainer > li:nth-child(1){ width: 100%; } /* Noteworthy */
	.webPartZoneContainer > li:nth-child(2), .webPartZoneContainer > li:nth-child(3) { width: 48%; margin: 0; } /* calendar and news in same row */
	.webPartZoneContainer > li:nth-child(2) { margin-right:4%; }
	div.ms-webpart-zone.ms-fullWidth { width: 100%; }
	#ct100_ct146_g_bd221ed4_f4a0_45c7_a1f3_11dfdc6e7f3d { margin:0 auto; } /* ad rotator center aligned */
	ul.webPartZoneContainer  li:nth-child(1)  h3 { padding-left:18px; } /* add a left padding to Noteworthy header */
	.webPartZoneContainer >  li:nth-child(1) div.adRotator { width: 258px; margin:0 auto } /* Noteworthy - ad rotator center 


	/* top visited links */
	#topVisited { width: 100%; }
	#topVisited h3 { /*width: 39%;*/ padding: 0px 0px 0px 11%; font-size: 235%; }
	#social { width: 50%; }	
	#social span { display:none}    
	#social ul   { width: 100%; text-align:center; }
	#social ul li { margin: 0 15px; }

	/* footer */
	#footer  { width: 100%; height: auto; overflow:auto; padding: 10px 0 20px 0; }
	#footer > div { padding: 0; width: 100%; }
	#footer .container .ftacc { width:20%; text-align:right; }
	#footer .container .ftSCC { width:80%; }
	#footer .container .ftlogo { float:none; clear:both; width:100%; padding: 10px 0 0; text-align:center; }
	
	/* PAGE LAYOUTS ********************** */
	
	/* 2-column */
	.two-column .container 	 { width: 100%; background:none; }
	.leftNav 				 { width: 28%; }
	.two-column .content     { width: 72%; background: #fff; }
	/*.two-column .content img { width:100%; height:auto; }*/
	
	/* 3-column */
	.three-column-a .content {  width: 72%; background: #fff; }
	.three-column-a .col2 { width:72%; float:none; }
	.three-column-a .col3 {  width:72%; float:none; }
	.three-column-a .col3 .content-text { padding: 15px 25px; }
		
	/* Continuing Ed home page */
	div.AEBannerContainer { width:100% !important; height:280px !important; overflow:hidden; }
	div.AEBannerContainer img { width:100%; height:auto; }
	.AEBannerTransbox { top:100px !important; }
		
	/* Library home page */
	
	.library .col1 { float: none; margin:0 auto; }
	.librarySearchTabs { margin:15px auto; }
	.full-width .container .news img { width: 110px; height: 135px; }
	.library .col2 { width: 580px; float: none; margin:0 auto; background:white; }
	.asklibrarian .chatbox { margin: 15px auto; width: 90%; height: 215px; clear:both; }
	.library .social {margin :20px auto; }
	.library .libraryHours, .library .imChat {float :left; background:none; padding:20px 0; margin:0; }
	.library .libraryHours {width: 45%; margin-right:10% }
	.library .imChat {width: 45%; }
	.library .imChat p { background:none; color: #58585A; padding:0; }

	.library .libraryHours h2, .library .imChat h2 { color: #888; font-weight: 500; background: none; border-bottom: 5px solid #efefef; }
	.library .imChat h2 { padding: 0; }
	.library .imChat p { padding-top:5px; }
}

@media only screen and (min-width:750px) {
	#carouselWrapper { overflow:hidden; }
}

/* *************************************************
	SMART PHONES 320-480 -- and tablets up to 749px
 ************************************************* */
@media only screen and (max-width:749px) {

	body { font-size: 100%; }
	.container { width: 100%; }
	
	#search  { display:none; }
	#searchBox1  { clear:both; width:100%; position: static; display: block; padding:5px 0; text-align:center; background: transparent;  }
	#searchBox1 input { background: #194267; width:80%; color:#ccc; }
	#searchBox1 button { background: url(../Images/arrow-search-mobile.png) no-repeat; }
	
	#logo { width: 246px; clear:both; }
	#logo h1 a,
	#logo h1 a:link,
	#logo h1 a:visited { width: 246px; height:99px; background: url("../Images/SCC-logo-mobile.png") center no-repeat;}
	
	/* HOME PAGE */
	#carouselWrapper { display:none; }
		
	/* bottom zone: noteworthy, calendar, news */
	#contentBox { min-width: 320px;}
	#bottomZone .ms-webpartzone-cell { margin-top:0;}
	#bottomZone .container { width: 95% ; height: auto; margin: 0 auto; }
	.webPartZoneContainer > li:nth-child(1){ width: 100%; } /* Noteworthy */
	.webPartZoneContainer > li:nth-child(2), .webPartZoneContainer > li:nth-child(3) { width: 95%; margin: 0 auto; } 	
	.webPartZoneContainer ul.cbqwp li, .webPartZoneContainer > li:nth-child(3) { font-size: 75%; }
	div.ms-webpart-zone.ms-fullWidth { width: 100%;  }
	#ctl00_ctl45_g_bd221ed4_f4a0_45c7_a1f3_11dfdc6e7f3d  { margin:0 auto; } /* ad rotator center aligned */
	ul.webPartZoneContainer  li:nth-child(1)  h3 { padding-left:18px; } /* add a left padding to Noteworthy header */ 
	.webPartZoneContainer >  li:nth-child(1) div.adRotator { width: 258px; margin:0 auto } /* Noteworthy - ad rotator center */

	/* top visited links */
	#topVisited { width: 100%; }
	#topVisited h3 { padding: 0px 0px 0px 24%; font-size: 150%; }
	#topVisited .links { padding: 25px 25px; }
	#topVisited .links ul { float: none; }
	
	/* social media icons */
	#social { position: static; width: 100%; }	
	#social span { display:none}    
	#social ul { width: 100%; text-align:center; }
	#social ul li { margin-right: 15px; }
	
	/* bottom links*/
	div.bottomlinks      { display:block; margin-top:1px; } 
	div.bottomlinks ul   { width:90%; margin:0 auto; text-align:center; padding: 5%; background: #efefef; } 
	div.bottomlinks li    { display:inline; margin: 0 10px; }
	div.bottomlinks li a, div.bottomlinks li a:link, div.bottomlinks li a:visited { text-transform:uppercase; font-size:90%; line-height: 2; color:#002d56; text-decoration:none; }	
	div.bottomlinks li a:hover { color: #ffc423; }
	
	/* footer  */
	
	#footer  { width: 100%; height: auto; overflow:auto; padding: 10px 0 20px 0; }
	#footer > div { padding: 0; }
	#footer .container .ftacc,
	#footer .container .ftSCC,
	#footer .container .ftlogo { float:none; clear:both; width:100%; padding: 15px 0 0 0; text-align: center; }

	/* PAGE LAYOUTS */
	
	.leftNav 		     	{ float:none; width: 90%; background:#e8e8e8; margin:0 auto 20px auto; }
	.leftNav li:firstchild  { background:#fff; }
	
	/* two-column*/
	.two-column .container { background:#fff; }
	.two-column .content { float: none; width: 100%; }
	/*.two-column .content img { width:100%; height:auto; }*/
	.scc-content h1  { font-size: 1.75em; }
	
		/* 3-column */
	.three-column-a .col2 { width:100%; float:none; }
	.three-column-a .col3 {  width:100%; float:none; }
	.three-column-a .col3 .content-text { padding: 15px 25px; }
	.three-column-a .container { background: #fff; }
	.three-column-a .content {  width: 100%; background: #fff; }
	.three-column-a .content img {  width: 100%; height:auto; }
	
	.three-column-b .col2 { width:100%; float:none; }
	.three-column-b .col3 {  width:100%; float:none; }
	.three-column-b .col3 .content-text { padding: 15px 25px; }
	.three-column-b .container { background: #fff; }
	.three-column-b .content {  width: 100%; background: #fff; }
	.three-column-b .content img {  width: 100%; height:auto; }

	/* Continuing Ed Home page */	
	div.AEBannerContainer { display:none; } /* ad rotator */
	
	/* library home page  */
	.library .col1, .library .col2 { width: 100%; float: none; }
	.library .col2 { margin: 0; padding:0; }
	.library .news { width: 100%; height:auto; }
	.library .news img { display:none; }
	.library .news div.lib-news-text { width:100%; float:none; }
	.library .news h3 { height: auto; padding: 8px 15px 8px; margin: 0; }
	.library .content-text { padding: 15px 5%; }
	
	.library .librarypromo { width:100%; margin:0 auto; background:red; }
	.library .librarypromo li  { float: left; width:32%; height:auto; margin-right: 2%; padding-bottom: 5px; }
	.library .librarypromo li img { width: 100%; }
	.library .librarypromo li:last-child { margin-right: 0; }	
	.library .librarypromo li span { font-size:.6em; text-transform:uppercase; padding: 5px; margin:0; }	
	.library .librarypromo li a, .library .librarypromo li a:visited  { display:block; color:#002d56; }
	.library .librarypromo a:hover { color:#002d56; }
	.asklibrarian .chatbox {  width: 90%; }
	
	/* Search result page */
	.ms-searchCenter-refinement { display: none; } /* hiding left column of search result page */
	.ms-srch-group-content { width: 95%; margin: 0 5% 0 3% ; }

	.ms-searchCenter-result-main { max-width: 85% !important; font-size:100%; }
	.ms-srch-item {  width: 75% !important; }
	.ms-srch-item-path { width:90%; color: #0c5dcc; }  
	.ms-srch-item a:link {  color:#c00; } 
	.ms-srch-item-summary { width:90%; } 

	.ms-srch-item { margin-left:0;}
	.ms-searchCenter-result-main #SearchBox { width: 80%; padding-left: 5%;}
	.ms-srch-sbLarge {width:80%;}
	.ms-srch-sbLarge > input {width: 80%; }
	.ms-srch-upscope-top  { width: 90% !important; margin: 0 auto; }	
	
	 /* SCC logo on search mobile view*/
	.ms-siteicon-img { max-width: 320px; max-height: none; margin: 10px 5px; }
	
}

@media only screen and (max-width:320px) {
	
	body { width:320px; overflow:hidden; }
	.library .librarySearchTabs, .library .social ul li.connect, .full-width .container .news img {  display: none; }
	#s4-ribbonrow, #suiteBar { display:none; }
	.pageImage img, img.pageImage { float:none !important; width: 100% !important; height:auto; margin:15px auto !important; }
}

/* ==========================================================
	GLOBAL NAVIGATION 
============================================================= */
@media screen and (min-width: 750px) {
	.menu-toggle { display: none; }
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul { display: inline-block !important; width: 100%; }
	.main-navigation ul { margin: 0; text-indent: 0; }
	.main-navigation li a, .main-navigation li { display: inline-block; text-decoration: none; }
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.main-navigation li ul ul { top: 0; left: 100%; }
	.main-navigation ul li:hover > ul { border-left: 0; display: block; }
}

@media screen and (max-width: 959px) { 
	.main-navigation ul.nav-menu {  }
	.main-navigation { width:100%; font-size:88%; }
	.main-navigation.library { font-size:100%; }
	.main-navigation.continuingEducation { font-size:90%; }
	.main-navigation ul li ul li ul { display:none; } /* hiding drop-down menus level 3*/
	
}

@media only screen and (max-width:749px) {
	#suiteBarDelta { display:none; }
	
	nav#site-navigation { clear:both !important; }

	nav#site-navigation.main-navigation h3.menu-toggle { text-transform:uppercase; }
	.menu-toggle { font-size: 115%;}
	.main-navigation { width:90%;  height:auto; margin:0 auto; border-top: none; }
	.main-navigation ul {
		width:100%;
		height:auto;
		clear:both;
		border-top: 1px dotted #999 !important; }
		
	.main-navigation ul li {
		float:none !important;
		clear: both;
		width: 90% !important; 
		text-align:left;
		border-bottom: 1px dotted #999;
		padding: 0 5% ;
		margin:0;
		z-index:20;
		font-size: 115%;
		background: #f3f3f3;	}
		
	.main-navigation ul li ul { display:none; } /* hiding drop-down menus level 2 & 3*/	

}

/* ==========================================================
	Top bar Toggle Navigation
============================================================= */

#toggleNavigation { float:right; margin:  1px 10px 0 0; clear: both; display: none; } /* Desktop - hidden */

.sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#toggleNavigation button, #toggleNavigation button:hover {
	padding: 9px 10px 4px 10px;
	float: right;
	min-width: 0;
	margin:  3% 3% 0 0;
	border-width: 0;
	background:#222;
}

#toggleNavigation .icon-bar {
    border-radius: 1px;
    display: block;
    height: 2px;
    width: 22px;
	background-color: #fff;
	margin: 0 0 5px;	
}
.searchWrapper { display: block; }


@media only screen and (max-width: 749px) {

	#globalNavBox { background: #002d56; height:40px;}
	.ms-cui-topBar2 { border-bottom: none; }
	
	#topNav { display: none; }
	
#toggleNavigation {display: block !important;			
    position: absolute;		
    top: 0;		
    right: 0; }
	
#toggleNavigation button
{
   cursor:pointer;
   margin: 0;
}

#toggleNavigation button:hover
{
   background:#000;
   border:0;
}
#toggleNavigation button:active,#toggleNavigation button:focus,#toggleNavigation button:hover
{
   outline:0;
   background:#222;
}

	#topNav       { height:auto; }
	div.toplinksWrapper { width: 90%; height:auto; }
	
	#topNav li { float: none; }
	#topNav ul { width:90%; text-align:center; } 
	#topNav li { float: none; padding:0; margin: 10px; display: inline-block; }
	#topNav li:nth-child(1),
	#topNav li:nth-child(2),
	#topNav li:nth-child(3),
	#topNav li:nth-child(4),
	#topNav li:nth-child(5),
	#topNav li:nth-child(6),
	#topNav li:nth-child(7),
	#topNav li:nth-child(8),
	#topNav li:nth-child(9) { width:auto; }
	#topNav li a:link, #topNav li a:visited   { display: inline-block; height: auto;  padding: 10px 10px 5px 10px; }
	
	#topNav li:nth-child(9) a:link, #topNav li:nth-child(9) a:visited { background:none; font-weight:bold; }
	
	/* Search box */

	.searchWrapper { background: #194267; width: 90%; margin:10px auto !important; padding:0; overflow:auto; border: 1px solid #666; }

	.searchWrapper input  { float:left; width: 75% !important; background: #194267; color:#ccc; border: none; padding-left: 10px; }
	.searchWrapper button { float:right; min-width: auto; width: 38px !important; height:30px; background:  url(../Images/arrow-search-mobile.png) no-repeat right; background-size: 35px; border: none; padding:0 !important; margin: 0 5px 0 0; text-indent:-99999px; }
}