/*
   CSS file for Mr O Taekwondo Website, submitted for project 2  
   
   Name: Cara Hegadorn
   Class: Web Design I
   Date:
      
	  
   Site colors: 
   gold: #F3CC1E, #f4cc1d
   dark red: ae280f
*/
body{font-family:Helvetica, arial, Verdana, sans-serif;
     text-align:center;
     background-color:#000;
     color:#000;
    }
body a{color:#000;
       text-decoration:none;
   }
    

#container {
	margin: auto;
	width:960px;
	background-color:#F4CC1D;
	border-width: 1px;
	border-style:outset;
	border-color:#F7EBAF;
	border-width:thin;
	padding:0px;
	height: 978px;
}

/* on the display show the full color banner - not the black and white one */
#banner {
	      background-image:url(images/bannerbackgrnd.jpg);
          height:150px;
          width:960px;
          margin:0px;
          padding:0px;
         }
#printbanner {display:none;}
/* 
    The navigation bar sits on the left and looks like a karate belt rack.
    The beltholder is contained in the navigation box, and the buttons are the belts.
    there are 2 racksupports - which look like thin pieces of verticle wood connecting
    the horizontal belts.
*/
#navigation{
	height:495px;
	width:140px;
	position:relative;
	float:left;
	margin:15px 0px 5px 2px;
	padding:0px;
	border-style:none;
	background-image:url("../images/beltholder.jpg");
	overflow: visible;
     
}

div.belt{
          height:35px;
          width:130px;
          position:relative;
          border-style:outset;
          border-width: 1px;
	      margin:8px 0px 0px 0px; 
	      padding:0px;
	      background-image:url("../images/wood.jpg")
}
div.belt a{
          color:#FFF;              /*most belts are dark, so default text to white */
          text-decoration:none;
		  text-align:center;
          display:block;
          border-style:outset;
          border-width:1px;
          width:110px;
          height:20px;
          font-size:70%;
          font-weight:bold;
          padding:5px 0px 0px 0px;
          margin:5px 0px 0px 5px;
}
/* On a mouse over make the belt stand out by enlarging and bolding the text and making
   the belt look like it's pushed in - instead of out.
*/
div.belt a:hover {
          font-size:78%;   
          font-weight:bold;
          border-style:inset;
}
/* now define the individual belts - the top of the rack is wood color. Master 0 has
   a 4th degree blackbelt and the belts go in order from black, brown, red, blue, 
   purple, green. Note gold, orange & white are not shown, but they would be next
*/
#welcome a{font-size:110%;
         border:none;
         color:#000;
}
#welcome a:hover{font-size:120%;
         font-weight:bold;
         border-style:none;
}
#mastero a {
         background-image:url(../images/mrobelt.jpg);
         color:#F3CC1E;       /* text on a blackbelt is gold */
		 text-align:left;
		 padding-left:5px;
}
#blackbelts a{color:#F3CC1E;     /* text on a blackbelt is gold */
              background-color:#000;
}
#taekwondo a{background-color:#805A07; /* brown belt */
}
#taekwondokids a{background-color:#D4473F; /* red belt*/
          font-size:65%;
}
#taekwondokids a:hover{
          font-size:70%;
}
#taekwondoadults a{background-color:#2B45B5; /*blue belt*/
          font-size:65%;
}
#taekwondoadults a:hover{
          font-size:70%;
}
#kickbox a{background-color:#640899; /* purple belt */
}
#party a{background-color:#0A7508; /* green belt */
}
#privatelessons a{background-color:#F3CC1E; /* gold belt */
}
#schedule a{background-color:#F7941D; /* orange belt */
}
#newstudents a{background-color:#FFF; /*white belt*/
         color:#000;
}

/* Define how the main content on the page should look. The text is black and
   tighten up the space between paragraphs and headings. Pictures will alternate
   floating on the right and left, to keep things interesting
*/
#content{
	height:726px;
	width:795px;
	float: left;
	margin:3px 0px 0px 3px;
	background-color:#FFF;
	border-style:outset;
	border-width:1px;
	border-color:#808285;
	padding:5px;
	text-align:left;
	font-size:10pt;
	overflow:auto;
        }
		
#leftcontent {
	width:580px;
	float:left;
	height: 594px;
}

#content h1, h2 {text-align:center;
                 text-decoration:underline;
                 font-size:14pt;
                 margin:5px 0px 10px 0px;
                 padding:0px;
        }
#content h4, h5, h6 {
                 font-size:12pt;
                 margin:0px;
                 padding:0px;
        }
#content h3 {
              font-size:13pt;
              margin: 15px 0px 0px 0px;
              padding:0px;
            }
#content h4 {
              margin: 10px 0px 5px 0px;
              padding:0px;
         }
#content p{ margin:10px 2px 5px 5px;
            padding:10px 0px 0px 0px;
         }
#content ul { padding:5px 2px 10px 25px;
            margin:10px 2px 5px 10px;
         
         }   
		 

/* Phrases that we want to stand out are enclosed in notice me spans
   they are red, bold and centered
*/
div .noticeme{
               clear:both;
               text-align:center;
               font-weight:bold;
               font-size:12pt;
               color:#F00;
               margin:5px;
        }
.picturediv{
	clear:both;
	width:548px;
	height:auto;
	margin:0px 0px 15px 0px;
}
img.contentimageright{
            float:right;
            width:auto;
            height:auto;
            margin:10px;
            border-style:none;
}
img.contentimageleft{
               float:left;
               width:auto;
               height:auto;
               margin:5px 20px 5px 5px;
               border-style:none;
       }
img.contentimagecenter{
               clear:both;
               text-align:center;
               width:auto;
               height:auto;
               margin:10px;
               border-style:none;
       }     
       
/* on pages with photo galleries and schedules, there is no need to display the
   announcements - we use the extra space for the content area.
*/
div#fullscrncontent{
          position:relative;
          width:770px;
          height:723px;
	  float: left;
	  margin:2px 0px 0px 3px;
	  background-color:#FFF;
	  border-style:outset;
	  border-width:1px;
	  border-color:#808285;
	  padding:10px;
	  text-align:center;
          font-size:10pt;
          color:#000;
        }
div#fullscrncontent.photopage{
  background: url(../images/patch.jpg) no-repeat 450px 50px #FFF;;
}
#fullscrncontent h4, h5, h6 {
                 text-align:center;
                 font-size:12pt;
                 margin:10px 0px 10px 0px;
                 padding:0px;
                 clear:both;
}  
/* Definitions for the picture gallery on the blackbelt page
   In this gallery, pictures show up as thumbnails & then a larger version
   of the picture appears when the mouse hovers over the thumbnail. This 
   gallery is a mix of the hoverbox and and webreference dog photo galleries
*/
div#photogallery {
    float:left;
    width:320px;
    height:600px;
    margin:0px;
    padding:0px;
    overflow:auto;
}
div#photogallery ul.photolist{
    float:left;
    list-style-type:none;
    width:300px;
    height:auto;
    margin:0px;
    padding:0px;
    }
div#photogallery ul.photolist li{
    float:left;
    margin:5px 5px 0px 5px;
    padding:0px;
} 
div#photogallery a{
   background-color:#FFF;
   text-decoration:none;
   color:#000;
}
div#photogallery a:hover{
   background-color:#F00;
}
div#photogallery a img.thumbnail{
   border-style:none;
   width:75px;
   height:100px;
   margin:0px;
   padding:0px;
   overflow:hidden;
   
}
div#photogallery a span.bigpic {
   display:block;
   height:0px; 
   width:0px; 
   overflow:hidden;
   border-width:0px;
   top:60px; left:410px;
}
div#photogallery a:hover span.bigpic {
    display:block;
    position: absolute;
    top:  60px; 
    left: 410px; 
    height: 450px; 
    width: 300px;
}
   
  
/* Define the table for the class schedule page 
     This table can take up extra space because it is part
     of the full screen content div - there is no announcement
     box to the right
     make sure to show empty cells.
*/
#classschedule {
          width:730px;
          font-size:12px;
          color:#000;
          background-color:#FFF;
          border-width:1px;
          border-style:solid;
          border-color:#000;
          margin:0px 0px 0px 0px;
          padding:0px 0px 0px 0px;
}
#classschedule th {
          border-bottom-style:double;
          border-bottom-color:#000;
          border-bottom-width:thin;
          margin:0px 0px 0px 0px;
          padding:3px 5px 3px 5px;
}
#classschedule td {
          border-right-color:#000;
          border-right-style:solid;
          border-right-width:1px;
          border-bottom-color:#000;
          border-bottom-style:solid;
          border-bottom-width:1px;
          margin:0px 0px 0px 0px;
          padding:3px 5px 3px 5px;
}
#classschedule a {
          text-decoration:none;
          color:#000;
}
#classschedule a:hover{
          font-weight:bold;
}



/* Define the layout of the announcement box that sits to the right of most of
   the screens
*/
#announce{
	height:auto;
	width:175px;
	margin:5px 0px 0px 8px;
	padding:2px 3px 2px 4px;
	border-color:#808285; /* grey */
	border-style:outset;
	border-width:1px;
	overflow:auto;
	color:#000;
	font-size:8pt;
	float:left;
        }
#announce h3 {font-size:11pt;
              text-align:center;
              text-decoration:underline;
              font-weight:bold;
              margin: 2px 0px 5px 0px;
              padding:0px;
          }
#announce h4 {font-size:11pt;
              font-weight:bold;
              margin:10px 0px 2px 0px;
              padding:0px;
			  color:#E84F47;
          }
#announce h5 {font-size:10pt;
              margin:0px;
              padding:0px;
          }
          
#announce h6 {color:#000;
              font-size:8pt;
              font-weight:bold;
              margin:2px 0px 2px 0px;
              padding:0px;
             }
#announce ul {margin:0px 0px 0px 6px;
              padding:0px;
              text-align:left;
              list-style:none;
       }
#announce a {
	font-weight:bold;
	text-decoration:underline;
	text-align:center;
    color:#000;
}
#footer{
         height:80px;
         width:955px;
         float:left;
         border-color:#808285;
         margin:3px 0px 0px 0px;
         padding:0px;
         background-color:#E84F47;
         overflow:hidden;
       }
#copyright{
         height:75px;
         width:300px;
         float:left;
         font-size:10pt;
         text-align:left;
         padding:15px 0px 0px 5px;
         margin:0px;
}
#copyright a{
         text-decoration:none;
         color:#000;
}
#footerlinks{
         height:75px;
         width:345px;
         padding:3px 0px 0px 0px;
         float:left;
         font-size:10pt;
}
#footerlinks a{
         color:#000;
         text-decoration:none;
         margin:0px;
         padding:0px;
}
#footerlinks a:hover{
         color:#FFF;
         font-weight:bold;
}

#contactus{
         height:75px;
         width:300px;
         float:left;
         font-size:10pt;
         padding:5px 0px 0px 0px;
         margin:0px;
}
#contactus a{
         color:#000;
         text-decoration:none;
         padding:0px;
         margin:0px;
}
#contactus a:hover{
         color:#FFF;
         font-weight:bold;
}