/*

Erie Community College
Responsive Client CSS
Ellucian Inc.

*/

/* --->>> Responsive overrides: desktop <<<--- */
@media (min-width: 1200px) {
    
  /*  .container {
        max-width: 1170px;
        width: 90%;
    }
*/
    
} 

/* --->>> Responsive overrides: small desktop and smaller <<<--- */
@media (max-width: 1200px) {
 
header {
    padding-top: 20px;
}
 
 h1#logo {
    margin-bottom:10px;
 }
 
 #mainNav li {
    margin-right: 10px;   
 }

    
  #mainNav li a {
        font-size: 16px;
        padding: 10px 7px;
    } 
    
    #mainNav li#applyToday a,
     #mainNav li#gn7 a{
        padding: 9px 12px 10px 45px;
    }
    
    /* Carousel base class */
    #homeRotator,#homeRotator .item,#homeRotator .carousel-inner > .item > img { height: 450px; }

    .events .details {
        width: 142px;
    }
    
    #audience h2 {
        font-size: 23px;
    }
    
    #homeRotator .carousel-indicators {
        margin-left: 272px;
    }
       	#flickrGallery .set											{width:20%;}

#flickrGallery .setTitle										{float:none;width:auto;padding-top:10px;} 


   #topNav {
	position:absolute;
	top:-68px;
	right:0px;
	 }

	 #audienceNav {
		padding-top:0px;
		floaT:left;
		margin-bottom:10px;
		padding-left:7px;
	 }
	 
	 #search {
		top:-40px
	 }
.footable-row-detail-row:after {
clear: both;
}
.footable-row-detail-row:before, .footable-row-detail-row:after {
display: table;
content: " ";
}
.footable-row-detail-inner {
	border-top:1px solid #ddd;
}
.footable-row-detail-row {
	border-bottom:1px solid #ddd;
	padding:4px;
}
.footable-row-detail-name {
	float:left;
	width:100px;	
}	
.calloutFeature img,
    .calloutFeature .details {
        width: 100%;
        float: none;
    }

}


/* --->>> Responsive overrides: tablet portrait and Smaller <<<--- */
@media (max-width: 979px) {
	.wrap-col:before,.wrap-col:after{display: table;content:" ";}
     .right-col { float: none; }
    #mobileNav {
        display: block;
        background: #ca1134;
         text-decoration: none!important;
        overflow: hidden;
    }
        #mobileNav span {
            text-transform: uppercase;
            color: #fff;
            border-radius: 3px;
            padding: 5px;
            display: block;
            margin:10px;
           background: url(/client/images/menu.png) no-repeat top left;
           padding-left: 28px;
           font-family: "ITC Franklin Gothic W01";
           line-height: .7;
           font-size: 20px;
        }
        
        #sidr-id-txtSearch input {
            background: #d7d6d4!important;
            border-radius: 3px!important;
            border: 0!important;
            padding: 5px!important;
            font-size: 11px!important;
            float: left!important;
            width: 174px!important;
            position: relative;
            left: 10px;
            margin-top: 10px!important;
        }
        
        
        
        #sidr-id-searchBtn {
            float: left;  
            background: transparent; 
            border: 0;
            padding-top: 14px;
            padding-left: 17px;
        }
            #sidrmobileNav .sidr-class-icon-search {
                display: block;
                width: 16px;
                height: 16px;
                background: url(/client/images/search.png) no-repeat;
              
            }
            
       .sidr-class-nav {
           clear: both;
       }
        
        #sidrmobileNav {
            font-family: "ITC Franklin Gothic W01";
            font-size: 16px;
        }
            #sidrmobileNav ul li,
            #sidrmobileNav ul li:hover {
                line-height: 1.428571429;
				padding:8px 0px;
            }
            
            li#sidr-id-gn7 a {
                color: #ca1134;
            }
            
            .sidr-inner, .sidr ul {
                padding: 0!important;
                margin-bottom: 0!important;
                
            }
            
            .sidr-inner {
                padding: 5px 15px!important;
            }
            
    div .sidr-inner:nth-child(3) ul, div .sidr-inner:nth-child(4) ul  {  
      border-top: 0!important;
      font-size: 14px!important;
    }   
	
	#sidrmobileNav h2 {
		font-size:16px;
		background:#ca1134;
		color:#fff;
		margin:0 -15px 5px;
		padding:5px 30px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	
    
    #mainNav, #search, #audienceNav {
        display: none;
    }
    
    #topNav {
		position:static;
		top:0px;
		left:0px;
		margin-bottom:10px;
		padding-left:7px;
	 }

	
	
	
	
	#mainNav .container {
	    padding: 0!important;
	}
	
	h1#logo {
	    float: none;
	    max-width: 100%;
	}
	
	 .events .details {
        width: 97px;
    }
    
    .events .date {
        width: 50px;
        height: 50px;
        padding: 5px 0 0 0;
       }
       
    .eventItems .date {
        /*width: 30%;*/
    }
    
    .eventItems .details {
        /*width: 70%;*/
    }
    
    .news article {
	    margin-bottom: 1em;
	}
	
	.news article .headline {
         width: 90%; 
        }  
        
    .news article .image {
        width: 10%;
        height: 10%;
    }
    
    .home .callout {
        max-width: 100%;
        margin-right: 0;
    }
    
   /* .callout {
        max-width: 48%;
        margin-right: 2%;
        float: left;
    }*/
    
    .calloutFeature img,
    .calloutFeature .details {
        width: 100%;
        float: none;
    }
    
	
    .calloutFeature .more {
        margin-bottom: 10px;
    } 
    #pageContent .eventTicker .container {
       background-image:none;
       background-color: rgb(161,161,161); /* Old browsers */
	}
    .eventItems {
        width: 92%;

        background: #a1a1a1;
        }

        .eventItems h3 {
        font-size: 22px;
        }

        .eventsHeader  h2 br {
        display: none;
        }

        .eventsHeader .more {
            float: right;
            margin-top: -12px;
        }

        .eventsHeader {
            float: none;
            width: 100%;
            background: #616161;
        } 
        
        .box {
		width: 100%;
    padding: 15px;
    margin: 8px 0 13px 0;
    background: #b3b3b3;
    color: #fff;
}
		
        #audience h2,
        #audience ul {
            float: none;
            width: 100%;
        }
        
        #audience li,
        #audience h2 {
            margin: 0 5px;
        }
        
        #audience li {
            width: 48%;
        }
        
        #audience h2 {
            font-size: 30px;
            padding-bottom: 10px;
        }
        
         #homeRotator .carousel-indicators {
            margin-left: 162px;
        }

		 .contactModule {
        border: 2px solid #ca1134;
        border-left: 0;
        border-right: 0;
        background: #f3f3f2;
        padding: 20px;
        font-size: 11px;
        margin-bottom: 20px;
    }
 

}

/* --->>> Responsive overrides: tablet portrait only <<<--- */
@media (max-width: 979px) and (min-width: 768px) {
	
	
	   #footerContent .map li {
            display: block;
        }
        
      #homeRotator,#homeRotator .item,#homeRotator .carousel-inner > .item > img { height:380px;   }
      
       #flickrBadge img {
          width: 16%;
        }
		
		#homeCallout .col-md-3 {
			width: 50%!important;
			display: inline-block;
			vertical-align: top;
		}
	.footable-row-detail-row:after {
clear: both;
}
.footable-row-detail-row:before, .footable-row-detail-row:after {
display: table;
content: " ";
}
.footable-row-detail-inner {
	border-top:1px solid #ddd;
}
.footable-row-detail-row {
	border-bottom:1px solid #ddd;
	padding:4px;
}
.footable-row-detail-name {
	float:left;
	width:100px;
}

 
		
}

/* --->>> Responsive overrides: phone (all modes, retina display) <<<--- */
@media (max-width: 767px) {
    
    
    .main-col { float: none!important; }
    
    .navPage { display: none; }
    
    h2 { font-size: 25px;}
   
    .home #pageContent { margin-top: 0; }
  
   #homeRotator,#homeRotator .item,#homeRotator .carousel-inner > .item > img { height:200px; }
   #homeRotator .carousel-caption h1 { font-size: 22px; }
   #homeRotator .carousel-indicators { display: none; }
   #homeRotator .caption { display: none; }
   #homeRotator .carousel-caption h1 { position: relative; top: 30px;}
   
   #tagLine { position: static; font-size: 25px; }
   
  .headerTools {text-align:center;}
  #topNav {
      margin: -15px -5px 15px 0;
      float: none;
	  position:static;
  }  
    #topNav li, #topNav a {
        display: inline-block;
        float: none;
    }
    
  
        
    h1#logo {
        padding: 0 10px;
        max-width: 100%;
    
    }
    
    #search {
        clear: both;
        float: none;
    }
    
    #search input.search-query {
        width: 90%;
    }
    
    #pageTop div.pageImage {
        height: auto;
        background: #fff;
    }
    
        #pageTop h1 {
            position: static;
            background: #202020;
            font-size: 34px;
        }
    
	a#footerLogo {
	    display: none;
	}
	
	#navSocial {
	    clear: both;
	    float: left;
	    margin: 10px 0 10px -14px
	}
	
	#footerContent address {
	    margin-top: 2em;
	}
	
	#footerContent address:first-child {
	    margin-top: 0;
	}
	
	#pageContent .eventRotator {
	    margin: 0;
	}
	
	.news article .headline {
         width:100%; 
		 float:none;
        }  
        
    .news article .image {
      display:none;
    }
    
    #flickrBadge img {
      width: 33%;
    }
	
	       	#flickrGallery .set											{width:33%;}

#flickrGallery .setTitle										{float:none;width:auto;padding-top:10px;} 
    
    #nextEvent, #prevEvent {
        /*display: none!important;*/
    }
    
    .eventItems {
        /*width: 100%;*/
    }
	
	
      
        
        #audience li {
            width: 100%;
            margin: 5px 0;
        }
		
		
		.main-col .callout {
			max-width: 100%;
			width: 100%;
			margin-right: 0;
			float: none;
			}
			
			
			#librarySearch Input.summon-search-field {
			width: 75%!important;
			}
			
			#librarySearch Input {
			width: 42%;
			}
			
			#ctl00_phGrid_LibSearch_worldRequest {
				width: 66%!important;
				}
        
		.box p {
			floaT: none;
			padding: 0;
			width: 100%;
			}
			
	.footable-row-detail-row:after {
clear: both;
}
.footable-row-detail-row:before, .footable-row-detail-row:after {
display: table;
content: " ";
}
.footable-row-detail-inner {
	border-top:1px solid #ddd;
}
.footable-row-detail-row {
	border-bottom:1px solid #ddd;
	padding:4px;
}
.footable-row-detail-name {
	float:left;
	width:100px;
}



     
}