/***  GENERAL STYLING  ***/
    main {background: white;}
    body {background: white;}
    footer{background: #333;}
	.fake_square{background: #333;}


    /* title tile */
    h1{color: white;}
    h2{color: black;}

    /* about tile text */
    #title_ata{color: white;}
    
    .sq_fill{
        background: #BFBACA;
        opacity: 0.3;
        filter: alpha(opacity=30); /* For IE8 and earlier */ 
        filter: alpha(opacity=100)\9; 
    }

    .sq_fill_wide{
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */        
    }


/***  INDIVIDUALLY COLORED TILES  ***/
	#bl01{background: #987;}
	#bl02{background: #f0f0f0;}
    #bl03{background: #876;}
	#bl04{background: #bcd;}
	#bl05{background: #bcd;}
	#bl06{background: #bcd;}
	#bl08{background: #b88;}
	#bl10{background: #bcd;}
	#bl11{background: #f0f0f0;}
	#bl13{background: #cba;}
	#bl12{background: #cba;}
	#bl15{background: #cba;}
	#bl18{background: #cba;}
	#bl19{background: #edc;}
	#bl22{background: #cde;}
	#bl23{background: #f0f0f0;}
	#bl23{background: #f0f0f0;}
	#bl25{background: #f0f0f0;}
	#bl27{background: #f0f0f0;}
	#bl28{background: #786;}
	
	.title{
		background: #dcb;
	}
	
	.ata{
		background: #9ab;
		color: black;
	}

	.sq_bg{
        background: #ccdedf;
    }

/* 16:9 STYLE */
@media (min-aspect-ratio: 11/6) and (min-width: 1051px) {
    .fake_square{background: white;}
        
    footer {
        background: white;
        color: black;
        font-weight: bold;
    }
}


/***  WHEN MEDIUM SIZED, RENDER DIFFERENT COLORS  ***/
/* aka NOT NOT NOT16:9 STYLE */
@media (max-aspect-ratio: 11/6), (min-aspect-ratio: 11/6) and (max-width: 1051px) {
    body, main {background: #333;}
    
    #bl01, #bl02, #bl03, #bl04, #bl05, #bl06, #bl07, #bl08, #bl09,
    #bl10, #bl11, #bl12, #bl13, #bl14, #bl15, #bl16, #bl17, #bl18, #bl19,
    #bl20, #bl21, #bl22, #bl23, #bl24, #bl25, #bl26, #bl27, #bl28 {background: #f0f0f0;}
    
    #bl06{background: #bcd;}

    #bl03{background: #f0f0f0;}
	#bl15{background: #f0f0f0;}
    

}