/* My CSS file */
/*	#5798D0 blue #C3232D red #78CDC6 green #935E36 Brown */
/* global stuff */


#centrepanel { 
	background: repeat scroll 0 0 #FFFFFF; max-width: 950px; width: auto; margin: auto; padding:15px; overflow: auto; height: auto;
}
#centrepanel2 { 
	background: repeat scroll 0 0 #FFFFFF; max-width: 950px; width: auto; margin: auto; padding:15px; overflow: auto; height: auto; text-align: center;
}
#mainbanner { 
	background: none; max-width: 950px;
}

body { 
	background:#935E36; border: 0;
}
/* using free font ferigo pro, downloaded from fontsquirrel.com */
@font-face {
	font-family: Ferigo;
	src: url('Fertigo_PROWeb.woff');
}
h1 {
	font-family: Ferigo; color:#935E36; font-size: xx-large;
}
h2 {
	font-family: Ferigo; color:#935E36; font-size: x-large; font-style:italic;
}
h3 {
	font-family: Ferigo; color:#935E36; font-size: large;
}
p {
	font-family: Ferigo;
	font-size: medium; text-align:justify;
}
/* Drop cap and change to brown color*/
p.dcpara:first-child:first-letter {
    font-size: 600%; float: left; margin: 8px 2px 0px -6px; line-height: 0.8; color:#935E36; 
}
fieldset {
	font-family: Ferigo; color:#935E36;
}
/*use @media rule to adjust size of fonts accordingly */
@media screen and (max-width: 480px){
	#centrepanel {
		padding: 7px;
	}
	h1 {
		font-size: large;
	}
	h2 {
		font-size: medium;
	}
	h3{
		font-size: small;
	}
	p {
		font-size: smaller;
	}
	#home, #about, #music, #contact, #gallery {
		font-size: smaller;
	}
}

/* spreads the navigation items across the screen, since contact and gallery are longer names they are given a wider width */
#home, #about, #music, #contact, #gallery {
	font-family: Ferigo;
	font-weight: bold;
	width: 18%; /*starts at this width*/
	color: #fff;/*refers to text color */
	text-decoration: none;/*if don't this has underline*/
	display: block;/*overrides the default inline*/
	padding: 5px 0 ;/*top and bottom*/
	margin: -5px 0 15px 0;
	background-color: #000;
	float: left;
	text-align: center;
}
/*change color when hovering over the item or when you click on it*/
#home:hover, #about:hover, #music:hover, #contact:hover, #gallery:hover {
	background-color: #fff;
	color: #000;
}
#contact, #gallery {
	width:23%
}
#home:active, #about:active, #music:active, #contact:active  #gallery:active {
	background-color: #5798D0;
	color: #f00;
}