/*=== BEGIN - FORMAT THE WAY MARKUP TAGS LOOK  ===*/
html {
    margin: 0;
    padding: 0;
}
body {
    background: #CDC2B3 url(http://www.guitar5day.com/images/bg.gif);
    text-align: center;
    color: #660066;
    font: 12px arial, sans-serif;
    margin: 0px;
    padding: 20px 0px 20px 0px;
}

h1 {
	font-family:Verdana;
	font-size:20px;
	color:red;
	font-weight:bold;
	text-align:center;

}
h2 {
    margin: 0px;
    padding: 0px 0px 10px 0px;
    font:Arial, Helvetica, sans-serif;
    font-size:20px;
    font-style:italic;
    color:#341C12;
}

h3 {
	font-family:arial;
        margin: 0px;	
        font-size:12px;
	color:red;
	font-weight:bold;
	text-align:left;
}
h4 {
	font-family:verdana;
	font-size:18px;
	color:blue;
	font-weight:bold;
	text-align:left;
}

h5 {
	font-family:arial;
	font-size:9px;
	color:blue;
	text-align:center;
}





ul {
    margin: 0px;
    padding: 0px;
}
p {
    margin-top: 0px;
    margin-bottom: 10px;
}

a {
    color: #blue;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #1D110B;
    text-decoration: underline;
}
img {
    border: 0px;
}
/*=== END - FORMAT THE WAY MARKUP TAGS LOOK ===*/



/* This style serves to control the div that contains all other divs on the page, i.e., master div */
#wrapper {
	width: 778px;
	margin: auto;
	text-align: left;
}

/*=== BEGIN - HEADER SECTION - Format the header on your page ===*/
#header {
    height: 160px;
    background: url(http://www.guitar5day.com/images/header-thin.jpg) no-repeat;
}
/* Using a p tag inside the header will cause the content inside the p tag to get this format*/
#header p {
	font-size:18px;
	font-style:italic;
	color:#FFFFFF;
	font-family:verdana, "verdana", times, serif;
    margin: 0px;
    padding: 0px;
}

/* controls the way the more link/button looks when it is the p tag with the class of .more located inside an element with id of #header */
#header p.more {
	padding-right: 82px;
}

/* all div tags by default get this format unless overridden */
#header div {
	padding: 103px 103px 0px 82px;
}

/* all a tags inside the header element will get this format */
#header a {
	color:#66066;
	text-decoration: underline;
}
/*=== END - HEADER SECTION ===*/

/*=== BEGIN - NAVIGATION SECTION ===*/
#nav {
	width: 740px;
	height:48px;
	margin: 0px 0px 0px 20px;
	background-image:url(http://www.guitar5day.com/images/nav.gif);
	background-repeat:no-repeat;
	display:inline;
	float:left;
}
#nav a {
	font-size:18px;
	font-style:italic;
	color:#260403;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin: 12px 0px 10px 0px;
	padding: 0px 20px 0px 20px;
	display:inline;
	float:left;
	border-right-width: 2px;
	border-right-style: inset;
	border-right-color: #76644f;
}
#nav a:hover {
	color:#862e06;
	text-decoration:none;
}
/*=== END - NAVIGATION SECTION ===*/

.lastchild {
	border-right: none 0px !important;
}

/* This formats the area on the template where we will put the body content. */
#body {
	
        clear: both;
	width: 100%;
	background-color: #FFFFFF;

	
        
}

#insideleft (
        clear: left
        float: left;
        clear: both;
	width: 25%;
	background-color: #FFFFCC;
	margin: 10px;
)        

#insideright (
        float: right;
        clear: both;
	width: 65%;
	background-color: #FFFFCC;
	margin: 10px;
)        


/*=== BEGIN - FRONT PAGE SPECIFIC ===*/
/* begin display top rounded edge for frontpage body content */
#body-top {
	background: url(../images/body_top_innerpg.gif) no-repeat;
}

/* begin display bottom rounded edge for frontpage body content */
#body-bot {
	background: bottom url(../images/body_bot_innerpg.gif) no-repeat;
	padding-top: 21px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}
/*=== END - FRONT PAGE SPECIFIC ===*/

/*=== BEGIN - ABOUT BOX SECTION - not sure what this controls ===*/
#about-box {
	float: left;
	width: 315px;
}

#menu-box {
	float: left;
	width: 185px;
        background-color: #FFFFFF;
        padding-top: 2px;	
        padding-right: 15px;
	padding-bottom: 25px;
	padding-left: 15px; 
}

#content-box {
	float: left;
	width: 500px;
        background-color: #FFFFFF;
        padding-top: 2px;	
        padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px; 
}

#mini-box {
	float: left;
	width: 170px;
        height: 205px;
        border: 2px dashed #FFA500;
        background-color: #FFFFFF;
        padding-top: 2px;	
        padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 5px;
        
}


#mini-box2 {
	float: left;
	width: 170px;
        height: 205px;
        border: 2px dashed #FFA500;
        background-color: #FFFFCC;
        padding-top: 2px;	
        padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 5px;
        
}

#mini-box3 {
	float: left;
	width: 315px;
        height: 210px;
        border: 0px dashed #FFA500;
        background-color: #FFFFFF;
        padding-top: 2px;	
        padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 5px;
        
}




#about-box ul {
	margin-left: 8px;
}
/*=== END - ABOUT BOX SECTION ===*/

#express-box {
	float: right;
	width: 327px;
}

/*=== BEGIN - BOTTOM PAGE MENU - format the menu at the bottom of the page ===*/
/* This is the container for the foot-top and foot-bot divs */
#foot {
	width: 738px;
	margin-left: 20px;
	background: url(http://www.guitar5day.com/images/foot_bg.gif) repeat-y;
}

/* show the top image decoration of the foot area */
#foot-top {
	background: url(http://www.guitar5day.com/images/foot_top.jpg) no-repeat;
}

/* show the bottom image decoration of the foot area */
#foot-bot {
	background: bottom url(http://www.guitar5day.com/images/foot_bot.gif) no-repeat;
	padding: 13px 21px 12px 28px;
}
/*=== END - BOTTOM PAGE MENU ===*/

/* Page Footer */
#footer {
	margin: 14px;
	text-align: center;
}

/* don't know yet where this fits in at */
div.narrow-text {
	margin-right: 18px;
}

/* Floats all images left with a padding unless otherwise overridden, i.e., this is the default format for any image */
img.left {
	float: left;
	padding-right: 14px;
	padding-bottom: 16px;
}

/* controls the way the more link/button looks when it is surrounded by the p tag with the class of .more located inside an element with id of #body */
#body p.more {
	padding-top: 6px;
}

/* controls the way the more link/button looks when it is surrounded by the p tag with the class of .more located inside an element with id of #news-box */
#news-box p.more {
	padding-top: 0px;
	margin-top: 0px;
}

/* controls the way the more link/button looks when it is surrounded by the p tag assigned the class more but not inside a #body or #news-box elements */
p.more {
	text-align: right;
}

/* sometimes need to clear an area so that divs will sit on a seperate line. Otherwise they try to sit side by side */
.clear {
	clear: both;
}


/* BEGIN - I will figure out what these do later on */
#what-box {
    float: left;
    width: 332px;
}
#what-box img.left {
    margin-left: 10px;
}
#what-box ul {
    float: left;
    margin-left: 2px;
    width: 184px;
}
#news-box {
    float: right;
    width: 316px;
}
#news-box ul {
    float: left;
    margin-left: 2px;
    width: 184px;
}

#outer_all {
width:765px;
border:1px red solid;
}
/* END - I will figure out what these do later on */

/* This styles where we put the main content */
#mainContent {
	width: 620px;
	margin: auto;
}

/* This styles where we put videos */
#videoContent {
	clear: both;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	padding-bottom: 50px;
}
/*** === BEGIN INFORMATION BOX === ***/
#informationContentOuter {
	border: 1px solid #FFA500;
	padding: 2px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
}
#informationContentInner {
	min-width: 300px;
	border-left: inset #FFFFFF 1px;
	border-top: inset #FFFFFF 1px;
	border-right: inset #C0C0C0 1px;
	border-bottom: inset #C0C0C0 1px;
	padding:20px;
}
/*** === END INFORMATION BOX === ***/

/* format guitar tablature */
.guitarTab {
	color: black;
	font-family: courier; /* the reason we use this font is because it causes the lines to line up */
	font-size: x-small;
	margin-bottom: 15px;
}
/*=== BEGIN STYLES FOR THE TESTIMONIAL BOX ===*/
/* format the way the outer border looks */
.testimonialOuter {
	width: auto;
	border: solid #000000 1px;
	padding: 2px;
	background-color: #FFFFAA;
}
/* format the way the inner border looks as well as the font contained in it */
.testimonialInner {
	width: auto;
	border-left: inset #000000 1px;
	border-top: inset #000000 1px;
	border-right: inset #A6A6A6 1px;
	border-bottom: inset #A6A6A6 1px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	padding:10px; /* sets a space between the inner border and outer border of the testimonial box so as to create a frame effect */
}
/* setsup the shadow effect behind the testimonials box */
.testimonialEffect {
	background-image: url(../images/scgmfade.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding-bottom:30px;
	width:500px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
/*=== END  STYLES FOR THE TESTIMONIAL BOX ===*/

/* format special text areas that use this format */
.specialText1 {
	text-align: center;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
}
/* format special text areas that use this format */
.specialText2 {
	font-size: 14px;
	color: #FF0000;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

#body li {
	margin: 0px;
	padding: 0px 0px 5px 20px;
	list-style-position: inside;
	list-style-type: disc;
}

#foot li {
    margin: 0px;
    padding: 0px 0px 5px 20px;
    list-style: none;
    background: 0px 3px url(http://www.guitar5day.com/images/bullet.gif) no-repeat;
}

/*=== BEGIN STYLES FOR TABLES ===*/
/* format tables */
table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 350pt;
    margin-bottom: 5px;
    margin-top: 5px;
}

/* format table rows */
tr {}

/* format table cells */
td {}

/* format table headers */
th {}

/* format table captions */
caption {}
/*=== END STYLES FOR TABLES ===*/