/* CSS Document */

#dept_news_roll {
display: block;     
width: 200px;     
height: 125px;    
background: url(/media/vancouver-community-college/content-assets/image/departments/news-button-foundation.png); 
}
#dept_news_roll:hover {
display: block;     
width: 200px;     
height: 125px;
background: url(/media/vancouver-community-college/content-assets/image/departments/news-button-foundation-down.png);
}


#dept_events_roll {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/events-button-foundation.png); 
}
#dept_events_roll:hover {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/events-button-foundation-down.png);
}


#dept_motivepower_roll {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/motive-power-button-foundation.png); 
}
#dept_motivepower_roll:hover {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/motive-power-button-foundation-down.png);
}


#dept_success_stories_roll {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/success-stories-button-foundation.png); 
}
#dept_success_stories_roll:hover {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/success-stories-button-foundation-down.png);
}


#dept_waystogive_roll {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/ways-to-give-button-foundation.png); 
}
#dept_waystogive_roll:hover {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/ways-to-give-button-foundation-down.png);
}



#dept_about_roll {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/about-button-foundation.png); 
}
#dept_about_roll:hover {
display: block;     
width: 200px;     
height: 125px;      
background: url(/media/vancouver-community-college/content-assets/image/departments/about-button-foundation-down.png);
}

p.vert-centering {
  min-width: 20%;
  max-width: 90%;
  min-height: 20%;
  max-height: 80%;
  padding: 8% 2% 8% 5%;
  overflow: auto;
  font-weight:500; color:#FFF;
font-size: 1.2em;
}


.fbox { float: left; }
#cointainerbuttons { max-width: 840px; margin: 0 auto; background-color:#009fdf; }

#fbox1 { width: 49%; height: 250px; background-color:red;margin:1% 1% 1% 0; }
#fbox2 { width: 49%; height: 250px; background-color:white;margin:1% 0 1% 1%;}
#fbox3 { width: 23.5%; height: 125px; background-color:#05997e; margin:1% 1% 5% 0; }
#fbox4 { width: 23.5%; height: 125px; background-color:#c7be14; margin:1% 1% 5% 1%; }
#fbox5 { width: 23.5%;  height: 125px; background-color:#659400; margin:1% 1% 5% 1%;}
#fbox6 { width: 23.5%; height: 125px; background-color:#009fdf;  margin:1% 0 5% 1%;}
#fbox7 { width: 48%; height: 125px; background-color:#51b3b4;margin:0 1% 1% 0;  }
#fbox8 { width: 48%;  height: 125px; background-color:#b3a900;margin: 0% 0% 1% 3% ; }
#fbox9 { width: 100%;  height: 109px; background-color:#000; margin: 3% 0 0 0; position: relative;}


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
#fbox1 { width: 49%; height: 250px; background-color:red;margin:1% 1% 1% 0; }
#fbox2 { width: 49%; height: 250px; background-color:white;margin:1% 0 1% 1%;}
#fbox3 { width: 23.5%; height: 125px; background-color:#05997e; margin:1% 1% 5% 0; }
#fbox4 { width: 23.5%; height: 125px; background-color:#c7be14; margin:1% 1% 5% 1%; }
#fbox5 { width: 23.5%;  height: 125px; background-color:#659400; margin:1% 1% 5% 1%;}
#fbox6 { width: 23.5%; height: 125px; background-color:#009fdf;  margin:1% 0 5% 1%;}
#fbox7 { width: 48%; height: 125px; background-color:#51b3b4;margin:0 1% 1% 0;  }
#fbox8 { width: 48%;  height: 125px; background-color:#b3a900;margin: 0% 0% 1% 3% ; }
#fbox9 { width: 100%;  height: 109px; background-color:#000; margin: 3% 0 0 0; position: relative;}
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
#fbox1 { width: 49%; height: 250px; background-color:red;margin:1% 1% 1% 0; }
#fbox2 { width: 49%; height: 250px; background-color:white;margin:1% 0 1% 1%;}
#fbox3 { width: 23.5%; height: 125px; background-color:#05997e; margin:1% 1% 5% 0; }
#fbox4 { width: 23.5%; height: 125px; background-color:#c7be14; margin:1% 1% 5% 1%; }
#fbox5 { width: 23.5%;  height: 125px; background-color:#659400; margin:1% 1% 5% 1%;}
#fbox6 { width: 23.5%; height: 125px; background-color:#009fdf;  margin:1% 0 5% 1%;}
#fbox7 { width: 48%; height: 125px; background-color:#51b3b4;margin:0 1% 1% 0;  }
#fbox8 { width: 48%;  height: 125px; background-color:#b3a900;margin: 0% 0% 1% 3% ; }
#fbox9 { width: 100%;  height: 109px; background-color:#000; margin: 3% 0 0 0; position: relative;}
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#fbox1 { width: 100%;background-color:red; }
	#fbox2 { width: 100%;background-color:white; }
	#fbox3 { width: 100%;background-color:#05997e; }
	#fbox4 { width: 100%; background-color:#c7be14; }
	#fbox5 { width: 100%;background-color:#659400;}
	#fbox6 { width: 100%;background-color:#009fdf; }
	#fbox7 { width: 100%;background-color:#51b3b4; }
	#fbox8 { width: 100%;background-color:#b3a900; }
	#fbox9 { width: 100%;background-color:#000; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#fbox1 { width: 100%;background-color:red; }
	#fbox2 { width: 100%;background-color:white; }
	#fbox3 { width: 100%;background-color:#05997e; }
	#fbox4 { width: 100%; background-color:#c7be14; }
	#fbox5 { width: 100%;background-color:#659400;}
	#fbox6 { width: 100%;background-color:#009fdf; }
	#fbox7 { width: 100%;background-color:#51b3b4; }
	#fbox8 { width: 100%;background-color:#b3a900; }
	#fbox9 { width: 100%;background-color:#000; }
}