/* Custom styling for the Bootstrap website. 
These styles do not ship with Bootstrap. 
Some are overrides of existing Bootstrap styles, while others are new styles not existing in Bootstrap.
In the starting CSS document, styles are based on custom classes not in Bootstrap.
*/

/* below styles are the default -- take effect at resolutions <768 px */

.logo {
	text-align: center;
}
.tagline {
	color: #ff0033;
	font-family: 'Sigmar One', serif;
	font-style: italic;
	font-size: 1.5em;
	text-align: center;
	padding-top: 1em;
}

/* footer styling for all resolutions */

.siteinfo {
	text-align: center;
	padding: 3em 0;
	border-top: 1px solid #ddd;
}
.siteinfo a {
	text-decoration: none;
	color: #999;
	font-size: 0.8em;
}
.siteinfo a:hover {
	color: #602F8D;
	text-decoration: underline;
}

/* Chapter 2 challenge/solution: styling thumbnails and modals */

.btn-primary { 
    background-color: #ff0033; 
    border-color: #ff0033; 
}  
.btn-primary:hover, 
.btn-primary:focus,  
.btn-primary:active { 
    background-color: #53297A; 
} 
.modal-body .pull-left { 
    padding-right: 1em; 
} 
.modal-body .pull-right { 
    padding-left: 1em; 
} 
.modal-footer { 
    clear: both; 
} 

/* panel styling for the home page */

.panel-primary .panel-heading {
	background-color: #ff0033;
	border-color: #ff0033;
}
.panel {
	border-color: #ff0033;
}


/* Small devices (tablets, 768px and up) 

Greater than 768 px, push logo left and tagline right. Alter 
tagline font size, alignment, and padding for larger dimensions.

*/
@media (min-width: 768px) {  
	.logo {
		text-align: left;
	}
	.tagline {
		font-size: 2em;
		text-align: right;
		padding-top: 1.6em;
	}
}
	html {
    		margin: 1em;
    		padding: 1em;
    		background-image: url('images/picnic.gif');
    	}
    	body {
    		width: 100%;
    		margin: 0 auto;
    		padding: 1em 10px;
    		background: white;
    	}
}
}