/*
    WATERLOO WOODWORK

    TABLE OF CONTENTS

        Reset
        Utility Styles
        Global Typography
            - Headings
            - Links
        Images
        Layout
            - Header
            - Menu
            - Footer
        Section Specific

    STYLE REFERENCE
    
    Hex Code    Colour Name     Notable Use
    
    #00569f     Waterloo Blue   Logo
    #ea0012     Waterloo Red    Logo    
    #153060     Dark Blue       Borders
    #fcfcfc     Pale Grey       Background
*/

/* --------------------- */
/* RESET (YUI)
/* --------------------- */

*,html,body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3, h4, h5, h6,pre,form,label,
fieldset,input,p,blockquote,th,td { margin:0; padding:0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal }
ol, ul, li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
q:before, q:after { content:''}


/* --------------------- */
/* UTILITY STYLES
/* --------------------- */
.clear { clear: both; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* --------------------- */
/* GLOBAL TYPOGRAPHY
/* --------------------- */

html { font-size: 62.5%; }
body {
	color: #000;
	background-color: #fff;
	font: normal 1.4em/1.5 Arial, Verdana, sans-serif;
}

em { font-style: italic; }
strong { font-weight: bold; }
* a { position: relative; } /* Gets links displaying over a PNG background */
a img  { border :none; } /* Gets rid of IE's blue borders */
ol, ul { margin-bottom:1em; padding-left:1.5em;}
p { margin-bottom:1.5em; }


    /* --------------------- */
    /* HEADINGS
    /* --------------------- */

    h1, h2, h3, h4, h5, h6 { 
        font-weight: bold;
        margin: 1em 0em 1em 0em; 
    }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.4em; }
    h5 { font-size: 1.3em; }
    h6 { font-size: 1.2em; }


    /* --------------------- */
    /* LINKS
    /* --------------------- */

    a, a:link, a:visited {
    	margin: 0 0 1em 0;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:hover, a:active { color: #ea0012; }


/* --------------------- */
/* IMAGES
/* --------------------- */

.left  { float: left;  }
.right { float: right; }

img.left { margin: 0 15px 10px 0; }
img.right { margin: 0 0 10px 15px; }


/* --------------------- */
/* LAYOUT
/* --------------------- */

#container {
	color: #111;
	width: 850px;
	margin: 0px auto;
	border:0px solid #000;
	background-color: #fcfcfc;	
}
#content { margin: 20px; }


    /* --------------------- */
    /* HEADER
    /* --------------------- */

    #header {}
    #header h1 {
    	text-indent: -9999px;
    	background: transparent url(../images/header.jpg) no-repeat 0 0;
    	margin: 0px auto;
    	padding: 0px;
    	display: block;
    	width: 850px; /* Same as container width */
    	height:162px;
    	border-bottom:2px solid #153060;
    }


    /* --------------------- */
    /* MENU
    /* --------------------- */

    #menu{ margin: 0 0 10px 0; }
    #menu ul { padding: 0; float: left; }
    #menu ul li { display: inline; }
    #menu ul li a {
        color:#fff;
    	float: left;
    	width: 119px;
    	height: 25px;
	    font-size: 0.9em;
	    text-align: center;
	    line-height: 25px;
    	background-color: #336699;
    	border-right: 2px solid #fff;
    	border-bottom: 1px solid #153060;
    	}
    #menu ul li.last a { border-right: 0; width: 124px }
    #menu ul li a:hover,  #menu ul li a:active,  #menu ul li a.current {
    	background-color: #ea0012;
    	color: #fff;
    }


    /* --------------------- */
    /* FOOTER
    /* --------------------- */

    #footer {
        color: #fff;
        padding: 20px 0 15px;
    	font-size: 0.9em;
    	text-align: center;
    	background-color: #00569f;
    	border-bottom: 5px solid #153060;
    }
    
    #footer p { margin: 0; }
    #footer a { color: #fff; }
    #footer a:hover, #footer a:active { color: #ea0012; text-shadow: 1px 1px 1px #153060; }

/* --------------------- */
/* SECTION SPECIFIC
/* --------------------- */

#team h4 { clear: both; }