/**
 * Styles for Metropolitan Montessori School NY (MMS)
 * 
 * This file defines all of the main styles 
 * for MMS.
 *
 * @author William Dodson | Outer Banks Design Works <http://obxdesignworks.com> for <http://manoverboard.com> MANOVERBOARD
 * @copyright MMS (c) 2009 
 * @date 2009-08-14
 * @version 0.1.0
 * @site  (http://www.mmsny.org/)
 * @media screen
 */

/**
 * Colors used for MMS
 *
 * @colordef #111111 (deep grey)
 * @colordef #434343 (dark grey)
 * @colordef #555555 (medium grey)
 *
 * @colordef #435D7B (navy blue)
 * @colordef #AAB6C3 (lt. navy blue)
 * 
 * @colordef #41632F (forest green)
 * @colordef #A9B9A1 (lt. forest green)
 *
 * @colordef #008242 (pine green)
 * @colordef #A5CDBD (lt. pine green)
 *
 * @colordef #AC459A (magenta)
 * @colordef #CFA7C6 (lt. magenta)
 *
 * @colordef #C50002 (red)
 * @colordef #D0A7A8 (lt. red)
 *
 * @colordef #FDD51E (yellow)
 * @colordef #FEEC9A (lt. yellow)
 * 
 * @colordef #F28E1E (orange)
 * @colordef #FFC27D (lt. orange)
 * 
 * @colordef #F5757E (salmon)
 * @colordef #FAC1C5 (lt. salmon)
 * 
 * @colordef #A40347 (dark magenta)
 * @colordef #D68DAC (lt. dark magenta)
 * 
 * @colordef #00537E (navy blue #2)
 * @colordef #5DAACE (lt. navy blue #2)
 */

/**
 * @section Reset CSS
 * ======================================================================
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 background: transparent;
 border: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 margin: 0;
 padding: 0;
 outline: 0;
 vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
body {
 background: #fff;
 color: #000;
 line-height: 1;
}
ol, ul {
 list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}
caption, th, td {
 font-weight: normal;
 text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}

/**
 * @section Base HTML
 * ======================================================================
 */
body {
 color: #555555;
 font: 100%/1.5em 'helvetica neue', helvetica, arial, sans-serif;
}

/*headings*/
h1, h2, h3, h4, h5, h6 {
 color: #111111;
}

h1 {
 font-size: 1.125em;
 line-height: 1.333333em;
}
h2 {
 font-size: 1.5em;
 line-height: 1em;
 margin-bottom: 0.5em;
}
h3 {
 font-size: 1.125em;
 line-height: 1.333333em;
 /*margin-bottom: 0.666667em;*/
}
h4 {
 color: #435D7B;
 font-size: 1em;
 line-height: 1.5em;
 margin-bottom: 0.75em;
}
h5 {
 color: #435D7B;
 font-size: 0.875em;
 line-height: 1.714286em;
}

/*block-level elements*/
blockquote {
 border-left: 1px solid #f3f3f3;
 color: #999;
 font-family: palatino, 'palatino linotype', georgia, serif;
 font-style: italic;
 padding: 0.75em 1.5em;
}
p, dl, ol, ul {
 font-size: 0.875em;
 line-height: 1.5em;
 margin: 0 0 1.5em 0;
}

ul li ul {
 margin: 0.75em 1.5em;
}

/*links*/
a, a:link {
 color: #374967;
}
a:visited {
 color: #656565;
}
a:focus {
 color: #000;
}
a:hover {
 color: #C50002;
}
a:active {
 color: #999;
}

/*tables*/
table {
 border-top: 1px solid #f3f3f3;
 border-right: 1px solid #f3f3f3;
 font-size: 0.875em;
 line-height: 1.5em;
 width: 100%;
}
th, td {
 border-bottom: 1px solid #f3f3f3;
 border-left: 1px solid #f3f3f3;
 padding: 0.125em 0.5em;
}

/*presentational*/
em {
 background: #FFFFDF;
 font-style: italic;
}
small {
 font-size: 0.8em;
}
strong {
 font-weight: 900;
}
ul li {
 background: transparent url('/img/accents/10px-bullet_blue.png') no-repeat 0 0.375em;
 /*margin-left: -1.5em;*/
 padding-left: 1.5em;
}
ul li ul li {
 background: transparent url('/img/accents/10px-bullet_gray.png') no-repeat 0 0.375em;
}

/*misc*/
img, object {
 max-width: 100%;
}

/**
 * @section Classes and Overrides
 * ======================================================================
 */
.even {
 background: #ffffef;
}

.error {
 color: #C50002;
}

.link-facebook-large {
 font-size: 0.75em;
 text-decoration: none;
}
.link-facebook-large img {
 margin-left: 0.125em;
 vertical-align: middle;
}

.menu-body {
 padding-right: 37.5%;
}

.menu-list {
 margin: 0;
}
body#calendar .menu-list {
 margin: 1em 0;
}
.menu-list li {
 background: none;
 border-right: 1px solid #999;
 float: left;
 margin-right: 5px;
 margin-left: 0;
 padding-left: 0;
 padding-right: 5px;
}
.menu-list li.last {
 border: none;
 margin-right: 0;
 padding-right: 0;
}

.postmetadata {
 background: #FFFFDF;
 border: 1px solid #ffff99;
 /*border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;*/
 font-style: italic;
 padding: 0.75em 1.5em;
}

/*clear floats w/out extra markup (thanks PIE!)*/
.section:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
.section {
 clear: both;
}
.subsection {
 float: left;
}

.post,
.separate {
 border-bottom: 1px dotted #ddd;
 margin-bottom: 0.75em;
 padding-bottom: 0.75em;
}
.post {
 padding-bottom: 0;
}

.subtle {
 color: #999;
}

.thumb-excerpt {
 float: left;
 width: 350px;
}
.thumb-gallery {
 float: left;
 width: 145px;
}
.thumb-gallery img {
 border: 3px double #d5d5d6;
}
.thumb-gallery img:hover {
 border-color: #434343;
}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 0;
	margin: 0 -6.25em 0.625em 0.625em;
	display: inline;
	}

img.alignleft {
	padding: 0;
	margin: 0 0.625em 0.625em 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */

/**
 * @section Wrapper
 * ======================================================================
 */
#wrapper {
 /*outline: 1px solid aqua;*/
 margin: 0 0 0 10px;
 max-width: 56.25em;
 position: relative;
}

/**
 * @section Header
 * ======================================================================
 */
#header {
 /*outline: 1px solid black;*/
 background: transparent url('/img/logos/masthead.png') no-repeat 100px 1.75em;
 float: left;
 height: 5.625em;
 margin-bottom: 1.5em;
 max-width: 56.25em;
 width: 100%;
}
#header h1 {
 font-size: 0.75em;
 height: 90px;
 margin: 0;
 overflow: hidden;
 padding: 0;
 width: 90px;
}
#header h1 a {
 display: block;
 height: 90px;
 position: relative;
 width: 90px;
}
#header h1 a span {
 background: transparent url('/img/logos/logo.png') no-repeat 0 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

    /**
     * @subsection Header > Nav
     * ======================================================================
     */
    #nav {
     /*outline: 1px solid blue;*/
     height: 6.25em;
     width: 100%;
    }
    #nav #menu-main {
     left: 100px;
     position: absolute;
     top: 0;
     margin: 4em 0 0 0;
     padding: 0;
     width: 99.9%;/**/
    }
    #nav #menu-util {
     /*outline: 1px solid blue;*/
     font-size: 0.75em;
     margin: 0;
     padding: 0;
     position: absolute;
     right: 5px;
     top: 10px;
     width: 33.33%;
    }
    #nav #menu-main li,
    #nav #menu-util li {
     float: left;
     height: 2.125em;
     margin: 0 10px 0 0;
     padding: 0;
     position: relative;
     width: 10%;
    }
    #nav #menu-util li {
     /*outline: 1px solid red;*/
     width: 30%;
    }
    #nav li strong {
     display: block;
     font-weight: normal;
     padding: 3px 3px 0 3px;
    }
    #nav #menu-util li strong {
     display: block;
     padding-top: 0.5em;
    }
    /* #menu-main ~ public */
    #nav #menu-main li#tab-home {
     background: #435D7B;
    }
    #nav #menu-main li#tab-about {
     background: #41632F;
    }
    #nav #menu-main li#tab-programs {
     background: #008242;
    }
    #nav #menu-main li#tab-admissions {
     background: #AC459A;
    }
    #nav #menu-main li#tab-contact {
     background: #C50002;
    }
    /* #menu-main ~ private */
    #nav #menu-main li#tab-news {
     background: #FDD51E;
    }
    #nav #menu-main li#tab-calendar {
     background: #A40347;
    }
    #nav #menu-main li#tab-resources {
     background: #00537E;
    }
    /* #menu-util */
    #nav #menu-util li#tab-login {
     background: #FDD51E;
    }
    #nav #menu-util li#tab-alumni {
     background: #F28E1E;
    }
    #nav #menu-util li#tab-support {
     background: #F5757E;
    }
    #nav #menu-util li#tab-trustees {
     background: #F28E1E;
     margin-right: 0;
    }
    #nav #menu-main li a,
    #nav #menu-util li a {
     background: #fff;
     bottom: 0;
     color: #57595B;
     display: block;
     height: 1.6875em;
     left: 0;
     margin: 0;
     position: absolute;
     padding: 0;
     text-decoration: none;
     width: 100%;
    }
    #nav #menu-util li a {
     line-height: 1em;
    }
    
    /*public navigation*/
    body#home #nav #menu-main li#tab-home a {
     background: #fff url('/img/nav/nav-on_home.png') repeat-x 0 0;
     color: #000;
    }
    body#about #nav #menu-main li#tab-about a {
     background: #fff url('/img/nav/nav-on_about.png') repeat-x 0 0;
     color: #000;
    }
    body#programs #nav #menu-main li#tab-programs a {
     background: #fff url('/img/nav/nav-on_programs.png') repeat-x 0 0;
     color: #000;
    }
    body#admissions #nav #menu-main li#tab-admissions a {
     background: #fff url('/img/nav/nav-on_admissions.png') repeat-x 0 0;
     color: #000;
    }
    body#contact #nav #menu-main li#tab-contact a {
     background: #fff url('/img/nav/nav-on_contact.png') repeat-x 0 0;
     color: #000;
    }
    
    /*private navigation*/
    body#calendar #nav #menu-main li#tab-calendar a {
     background: #fff url('/img/nav/nav-on_calendar.png') repeat-x 0 0;
     color: #000;
    }
    
    #nav #menu-main li a:hover,
    #nav #menu-util li a:hover {
     color: #000;
    }

/**
 * @section Article
 * ======================================================================
 */
#article {
 /*outline: 1px solid gray;*/
 float: left;
 margin-left: 11.11%;
 width: 88.88%;
}
body#home #article {
 float: none;
}
body#calendar #article {
 float: none;
 margin-top: 0;
 width: 100%;
}
#article h2 {
 /*margin: 0;*/
}
#article p {
 margin-top: 0;
 margin-right: 13.75%;
}
body#calendar #article p {
 margin-right: 0 !important;
}
#article .header-photo {
 margin: 0;
}
#article .header-photo img {
 border: 3px double #d5d5d6;
}
#article .callout-intro {
 border-left: 0.0625em solid #d5d5d6;
 float: left;
 padding-left: 10px;
 width: 61.25%;
}
#article .callout-intro h2 {
 font-size: 1em;
 line-height: 1.5em;
 margin: 0;
}
#article .callout-intro p {
 font-size: 1em;
 line-height: 1.5em;
 margin: 0;
}
#article .callout-news {
 float: left;
 margin-left: 10px;
 text-align: right;
 width: 35%;
}
#article .callout-news h3 {
 font-size: 1em;
 line-height: 1.5em;
 margin: 0;
}
#article .callout-news ul {
 font-size: 0.75em;
 margin: 0;
}
#article .callout-news ul li {
 background: none;
 line-height: 1.3em;
 margin-bottom: 1em;
 margin-left: 0;
 padding-left: 0;
}
#article .callout-news strong {
 color: #000;
 display: block;
 font-weight: normal;
}
#article .callout-news em {
 background: none;
 color: #656565;
 font-style: normal;
}

/**/
#article #page-banner {
 min-height: 21.875em;
 margin: 0 0 1.5em 0;
}
body#home #article #page-banner {
 /*margin-top: 1em;*/
}
body#photo-galleries #page-banner {
 min-height: 0;
}

    /**
     * @subsection Aside
     * ======================================================================
     */
    #aside {
     /*outline: 1px solid green;*/
     float: left;
     margin-right: 15px;
     width: 23.75%;
    }
    
    /*sections-menu*/
    #aside ul#sections-menu {
     border-top: 1px solid #d6d6d6;
     font-size: 0.875em;
     line-height: 1.714286em;
     margin-top: 3em;
    }
    #aside ul#sections-menu li {
     background: none;
     border-bottom: 1px solid #d6d6d6;
     line-height: 1em;
     margin-left: 0;
     padding: 0.625em 0 0.625em 5.25%;
    }
    #aside ul#sections-menu li a {
     color: #656565;
     display: block;
     text-decoration: none;
    }
    #aside ul#sections-menu li.current_page_item a {
     color: #111111;
    }
    #aside ul#sections-menu li a:hover {
     color: #111111;
     padding-left: 0.125em;
    }
    
    /**
     * @subsection 
     * ======================================================================
     */
    #content {
     /*outline: 1px solid red;*/
     width: 66.11%;
    }
    body#calendar #content {
     width: 100%;
    }

/**
 * @section Footer
 * ======================================================================
 */
#footer {
 /*outline: 1px solid lime;*/
 clear: both;
 color: #999;
 margin-top: 1.2em;
 margin-left: 100px;
 width: 88.88%;
}
#footer p,
#footer ul.menu-list {
 font-size: 0.75em;
 line-height: 1.5em;
 margin: 0.75em 0;
}
#footer p {
 clear: both;
}
#footer a {
 color: #656565;
 text-decoration: none;
}
#footer a:hover {
 color: #111111;
 text-decoration: underline;
}