/*
   CSS file for Mr O Taekwondo Website, submitted for project 2  
   
   Name: Cara Hegadorn
   Class: Web Design I
   Date:
      
*/
body{font-family:Helvetica, arial, Verdana, sans-serif;
     text-align:center;
     background-color:#000;
    }
    
#container {
          margin: auto;
          height: auto; /*depends on the contents length */
          width:950px;
          border-width: 1px;
          background-color:#F4CC1D;
          border-style:outset;
          border-color:#F7EBAF;
          border-width:thin;
}

/*when printing - only show a black and white banner */
#printbanner {
          height:150px;
          width:950px;
          margin:0px;
          padding:0px;
         }
#banner {display:none;}
/* 
    The navigation bar sits on the left and looks like a karate belt rack.
    Do not include this on printed output
*/
#navigation{display:none;}
         

/* 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
   
   When printing - center the content in the middle of the page and take out the border
   we're not printing the navigation or announcements - so we can give the main content
   some more space & print less pages
*/
#content{
          min-height:400px;
          width:750px;
          margin:auto;
          background-color:#FFF;
          border-style:none;
          padding:10px;
          text-align:left;
          font-size:12pt;
        }

#content h1, h2 {text-align:center;
                 text-decoration:underline;
                 font-size:16pt;
                 margin:5px 0px 10px 0px;
        }
#content h4, h5, h6 {
                 font-size:14pt;
                 margin:0px;
        }
#content h3 {
              font-size:15pt;
              margin: 15px 0px 0px 0px;
            }
#content h4 {
              margin: 10px 0px 5px 0px;
         }
#content p{ margin:10px 2px 5px 5px;
            padding-top:10px;
         }
#content ul { margin:5px 2px 10px 5px;
              padding-left:20px;
         }         
/* Phrases that we want to stand out are enclosed in notice me blocks
   they are red, bold and centered
*/
div .noticeme{
               clear:both;
               text-align:center;
               font-weight:bold;
               font-size:14pt;
               color:#F00;
               margin:5px;
        }
.picturediv{
            clear:both;
            width:615px;
            height:auto;
}
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;
       }     
       
/* In photo galleries and schedule pages, we need extra room for the contents
   there is no need to repeat the announcements block on these pages - so we
   let the content take up the extra space.
   
   when printing full screen content, take away the border and center the content
   on the page
*/

#fullscrncontent{
          width:800px;
          min-height:400px;
	  margin:auto;
	  background-color:#FFF;
	  border-style:none;
	  padding:10px;
	  text-align:center;
          font-size:12pt;
        }
        
#fullscrncontent.photopage{
          position:relative;
          width:770px;
          height:507px;
	  float: left;
	  margin:2px 0px 0px 3px;
	  border-style:outset;
	  border-width:1px;
	  border-color:#808285;
	  padding:10px;
	  text-align:center;
          font-size:10pt;
          color:#000;
          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;
                 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:450px;
    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 img.thumbnail{
   border-style:none;
   width:75px;
   height:100px;
   margin:0px;
   padding:0px;
   overflow:hidden;
   
}
div#photogallery a div.bigpic {
   height:0px; 
   width:0px; 
   overflow:hidden;
   border-width:0px;
   top:50px; left:330px;
}

        
/*Define the styles for the class schedule table
*/
#classschedule {
          width:750px;
          font-size:12pt;
          color:#000;
          background-color:#FFF;
          border-width:1px;
          border-style:solid;
          border-color:#000;
          border-collapse:separate;
          empty-cells:show;
          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;
          }
#announce{display:none;   /*Do not print the announcements out */
          
        }

#footer{
         height:75px;
         width:955px;
         float:left;
         border-color:#808285;
         margin-top:3px;
         background-color:#FFF;  /*Make the footer background white when printed */
       }
#copyright{
         height:70px;
         width:300px;
         float:left;
         font-size:10pt;
         text-align:left;
         padding-top:30px;
         padding-left:5px;
}
#footerlinks{
         height:70px;
         width:345px;
         padding-top:3px;
         float:left;
         font-size:10pt;
}
#footerlinks a{
         color:#000;
         text-decoration:none;
}


#contactus{
         height:70px;
         width:300px;
         float:left;
         font-size:10pt;
         padding-top:10px;
}
#contactus a{
         color:#000;
         text-decoration:none;
}