/* ==========================================================================
  particular css - for changes from main.css in HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

body {
	font-family: 'Lato', sans-serif;
	font-size: 90%;
	background-color: #FCF3BA;
}
/* add this to take away space between article and aside. Match color to color of article.
.wrapper {
	background-color:#FFF
}*/


/* =====================================
    Color scheme and global styles
   ====================================*/
/* Add these if you want borders in these places

	.header-container {
 	   border-bottom: 20px solid #e44d26;
	}

	.footer-container,
	.main aside {
   		 border-top: 20px solid #e44d26;
	}
Use the following if you want to control all three backgrounds at once.
	.header-container,
	.footer-container,
	.main aside {
   		 background: #???;
;
}
*/


/* add .header-color div to html and control here*/
.header-color {
	background-color: #9A0000;
	text-shadow: 2px 2px #000;
	background-repeat: no-repeat;

}

.wrapper {


}

/* add .header-left div to html and control here for website title. Default color is in main.css
.header-left,.right-header, .right-header a, right-header a hover are not necessary in sanford.css
.header-left {
	padding-left: 2%;
	font-family: 'Racing Sans One', cursive;
	float: left;
}
.right-header {
	float: left;
	text-align: right;
	padding: 2% 2% 0 0;
	background-color: #9A0000;
	
}
.right-header a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: white;

}
.right-header a:hover {
	text-decoration: underline;	
}
*/
/* add .tagline div to html and control here. This makes the tagline smaller and below the header title*/
.tagline {
	color: #FFF;
	float: left;
	clear:both; /* this is necessary for IE to display correctly */
}
.footer-container footer {
    color: #000;
    padding:  0;
}
.footer-container {
	/* margin-top: 8px; added to put separation above footer*/
	background-color: #FCF3BA;
	/* controls color of footer area all the way across. 
	Must make a separate .footer-container background-color to overwrite .footer-container background in main.css line 89 and 
	it must put it before footer*/
}
footer {
	background-color: #FCF3BA;/* footer is inside footer-container, control here to have different background color*/
	width: 90%;
	margin-right: 10%;

}
.footer-contents {
	padding: 10px;
	font-size: 85%;
}
/* added to use throughout site*/
.smaller-text {
	font-size: 90%;
}
.centered-text {
	text-align: center;
}
table {
	background: #FCF3BA;
	width: 100%;
	border: 0;
	align: left;
	cellpadding: 0;
	cellspacing: 10;
	
}
.red {
	color: #9A0000;
}

.float-left {
	float: left;
	margin-right: 5px;
	text-align: justify;
}
.float-right {float: right; margin-left: 5px;}

/* ==============
    MOBILE: Menu - works for 480px and below and all styles that aren't changed in other media queries.
   ============== */

nav {
	background-color: #9A0000;
}


nav a {
	margin: 0 0;
    margin-bottom: -30px;/*This is to snug up the lines of nav links in phone view */
}
/* change nav a:hover to change the hover properties - instead of underline it could be a different background color
	nav a:hover {
    text-decoration: underline;
}
*/
/* ==============
    MOBILE: Main 
   ============== */


.main article {
	background-color: #FCF3BA; /* adds background-color to article.*/
	padding: 0;
	clear: both;
	width: 100%;

}
.main aside {
	padding: 0px 10px; /*remove for left aligned text in the aside*/
	background: #ccc;
	color: #000;
}
/* .gallery-top { IMPORTANT - this is necessary if using Responsive Gallery in footer
	padding: 2% 0;
} */

/* ==========================================================================
   Media Queries
   ========================================================================== */
   
   	.main{
		background-color: #9A0000;
	}

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE:
   ==================== */


    nav a {
	width: 14%; /* is a change from mains.css(width=38%) */
	float: left;
	padding: 0;
	text-align: center;
	margin: 0 1%;
    }
  /*  This is what's in main.css for this class
  	nav a {
        float: left;
        width: 10%;
        margin: 0 1.7%;
        padding: 25px 2%;
        margin-bottom: 0;
    }*/
	
	.main article {
	padding: 0 7%;
	margin-left: 4.5%;
	width: 78%;
}
@media only screen and (min-width: 768px) {

/* ============
    WIDE: Menu - 
   ============ */
	.nav-container {
		float: right;
		width: 95%;
	}
    nav {
        width: 100%; /*  
		for 4 buttons make this 60%
		for 5 buttons make this 78%
		for 6 buttons make this 96% */
		float: right;
    }

/*    nav a {
        width: 22%; is a change from mains.css(width=38%)
		for 4 buttons you don't need "nav a" at all because it's 22% in intermediate menu above.
		for 5 buttons make this 16%
		for 6 buttons make this 12% 
}*/

/* ============
    WIDE: Main
   ============ */



@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */
    .wrapper {
        width: 900px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
	
}
.composition-page {
	width: 120%;
	margin-left: 40px;
}
.composition-page {
	width: 1200%;
}