@charset "utf-8";
/* CSS Document */

#sections { margin-bottom:20px; }
	#sections ul ul { border-left:solid 1px #CCC; margin-left:25px; }
	#sections div   { padding:5px 10px; background:#E8EEF7; margin:3px; border:solid 1px #D8E2F1; cursor:move; color:#333; }
	#sections span  { float:right; margin-left:5px; border-left:solid 1px #D8E2F1; padding-left:5px; }
		#sections div.hidden { visibility:visible; background:#DDD; }

.placeholder { border: dashed 1px #ccc; background-color:#FFFFCC; padding:5px 0; margin:3px; }

#typeModule .uploadifyQueue { margin-left:145px; width:400px; }

#typeModule #thumbImage, #typeModule #thumbIcon { max-width:500px; background:url("../images/transparent.gif"); }

#sectionSections { margin:0 10%; text-align:center; }
	#sectionSections li { position:relative; display:inline-block; margin:0 5% 5% 5%; width:14%; vertical-align:top; text-align:center; }
	#sectionSections a { display:block; background-size:cover; background-position:center; }	
		#sectionSections a:before { content:""; display:block; padding-top:100%; }		

	#sectionSections h4  { padding-top:10px; margin:0; color:#55504A; font-size:1em; font-weight:normal; }		

	#sectionSections > div { display:none; }
	
#thumbImage { max-width:500px; margin:0 auto; }


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

@media only screen and (max-width:1300px) {	
   
   #sectionSections { margin:0 3%; }
   
   #sectionSections li { margin:0 3% 5% 3%; width:16%; }   
}

@media only screen and (max-width:800px) {		
	
}		
   
@media only screen and (max-width:550px) {	

   #sectionSections { margin:0 10%; }	
	
	#sectionSections li { margin:0 5% 5% 5%; width:40%; }
}			

@media only screen and (max-width:300px) {		
	
	#sectionSections li { width:auto; display:block; }
}