@import url("reset.css");
@import url("fonts.css");


body { background-color:#000; margin:0 0 0 83px;} 

/*PAGE MODIFIERS*/
/* 
Add these custom attributes to the body tag to appropriately manipulate the page
category : this indicates which category of the site they are on, i.e. school, salon, design, company
section : this indicates which section below each category/secondary nav item, e.g. reception (which would be with category school)
heading : this indicates the page heading/tertiary nav item, e.g. service desk (which would be with categody school, section reception)
images : options for this are: 
    threespan = one image spanned across three columns, fileEnding = 111
    twospan = one image spanned across two columns, fileEnding = 11
    onetwo = one image per column for two columns, fileEnding = 1 or 2
    onetwothree = one image per colum for three columns, fileEnding = 1, 2 or 3
    twospanone = one 2 column image in the left 2 columns, and 1 single column image in the right colum, fileEnding 11 and 3 (e.g. whatever-p-11, whatever-p-3)
pages : this is the total number of pages under this heading. The value would be number, examples: 1, 2, 5
pagenum : this is the current page number within the given heading. The value would be a number, examples: 1, 5
*/
/*ADD THESE CLASSES TO BODY TAG FOR DESIRED AFFECT*/
/*set top nav open/close/color states - this is set by setting the class on the body - could just piggyback these with the definitions for hover below*/
/*body.school #container #header #primary a.school { width:72px; background: #c3cf21 url(/images/nav/school-color.gif) no-repeat right bottom;}*/

/*out of the flow - gives the left logo click*/
#logo { position:absolute; top:-10px; left:-86px; width:85px; height:580px; background-image:url(/images/bg.gif); background-repeat:no-repeat; } 
#logo a { display:block; width:100%; height:100%; }

/*set up default colors*/
body.school * { color:#FFB000; }
body.salon * { color:#EB008B; }
body.lunatic * { color:#C3CF21; }
body.portfolio * { color:#50C6D8; }
body.company * { color:#fff; }

#container { width:892px; color:#fff; margin:0 auto; position:relative; }
    #header { height:130px; width:100%; background-color:#000;  position:relative; }
        #header #primary { height:100%; float:left; } 
        #header #primary a { width:26px; display:block; float:left; height:100%; border-right:2px solid black; background-color:#222;}
        #header #primary a.school { background: #222 url(/images/nav/school.gif) no-repeat right bottom;}
        #header #primary a.school-on { width:72px; background: #FFB000 url(/images/nav/school-color.gif) no-repeat right bottom;}
        #header #primary a.salon { background: #222 url(/images/nav/salon.gif) no-repeat right bottom;}
        #header #primary a.salon-on { width:72px; background: #eb008b url(/images/nav/salon-color.gif) no-repeat right bottom;}
        #header #primary a.portfolio { background: #222 url(/images/nav/portfolio.gif) no-repeat right bottom;}
        #header #primary a.portfolio-on { width:72px; background:#50c6d8 url(/images/nav/portfolio-color.gif) no-repeat right bottom;}
        #header #primary a.lunatic { background: #222 url(/images/nav/lunatic.gif) no-repeat right bottom;}
        #header #primary a.lunatic-on { width:72px; background:#C3CF21 url(/images/nav/lunatic-color.gif) no-repeat right bottom; }    
        #header #primary a.company { background: #222 url(/images/nav/company.gif) no-repeat right bottom;}
        #header #primary a.company-on { width:72px; background:#fff url(/images/nav/company-color.gif) no-repeat right bottom; }    
        
        #header ul li { font-size:10px; }
        
        #header #secondary { width:149px; height:100%; background: transparent url(/images/nav/secondary-bg-gradient.gif) repeat-y; float:left; }
            #header #secondary ul,
            #header #tertiary ul { margin-top:15px; margin-left:10px; } 
            #header #secondary ul li { background-color:#000; }
            #header #secondary ul li,
            #header #secondary ul li a:hover,
            #header #tertiary ul li a:hover { color:#fff; }
            #header #secondary ul li a { background: transparent url(/images/nav/secondary-bg-gradient.gif) repeat-y; display:block; }
            #header #secondary ul li a,
            #header #tertiary ul li a { text-decoration:none; color:#999; }  
              
        #header #tertiary { border-left:2px solid #000; height:100%; float:left; }

    
        #header #page-heading { width:293px; height:30px; position:absolute; top:100px; left:600px; background-color:#000; } 
            #header #page-heading h1 { color:#fff; font-size:14px; font-weight:bold; margin:11px 0 0 11px; float:left;} /*sifr note, change top margin to 15*/
            #header #page-heading #sub-nav-nums { float:right; padding-right:2px; }
            #header #page-heading #sub-nav-nums a,
            #header #page-heading #sub-nav-nums p { display:block; color:#ccc; font-size:14px; font-weight:bold; width:22px; height:19px; background-color:#222; margin:11px 0 0 7px; padding-top:3px; float:left; text-decoration:none; text-align:center; vertical-align:middle; }
            
            body.school #header #page-heading #sub-nav-nums p,
            body.school #header #page-heading #sub-nav-nums a:hover { background-color:#FFB000; color:#fff; } 

            body.salon #header #page-heading #sub-nav-nums p,
            body.salon #header #page-heading #sub-nav-nums a:hover { background-color:#EB008B; color:#fff; } 

            body.lunatic #header #page-heading #sub-nav-nums p,
            body.lunatic #header #page-heading #sub-nav-nums a:hover { background-color:#C3CF21; color:#fff; } 

            body.portfolio #header #page-heading #sub-nav-nums p,
            body.portfolio #header #page-heading #sub-nav-nums a:hover { background-color:#50C6D8; color:#fff; } 
            
            body.company #header #page-heading #sub-nav-nums p,
            body.company #header #page-heading #sub-nav-nums a:hover { background-color:#fff; color:#fff; } 
            
    
    /*284x403, 578x403, 872x403*/
    #content { float:left; border-left:10px solid #222; border-top:10px solid #222; border-bottom:10px solid #222; width:882px; height:403px; margin-top:13px; display:block; font-size:11px; }
        #content div.col-single { width:284px; height:403px; border-right:10px solid #222; background-color:#222; float:left; }
        #content div.col-twospan { width:578px; height:403px; border-right:10px solid #222; background-color:#222; float:left; }
        #content div.col-threespan { width:872px; height:403px; border-right:10px solid #222; background-color:#222; float:left; }
        #content div.col-text { width:260px; height:387px; padding:8px 12px; border-right:10px solid #222; background-image:url(/images/bg-col-text.jpg); float:left;} 
            #content div.col-text h2 { font-size:11px; font-weight:bold; color:#eee; margin-top:11px; }
            #content div.col-text h2 span { font-size:10px; font-weight:normal; color:#999; margin-left:3px; }
            #content div.col-text p { font-size:11px; color:#999; margin-top:11px; line-height:15px; }
            h3 { font-size:115%; font-weight:bold; padding:5px 0; }
            h4 { font-weight:bold; }
        
        /*category view*/
        #content div.category-main-content { width:578px; height:100%; border-right:10px solid #222; background-color:#222; float:left; }    
        #content div.category-main-content p { font-size:25px; font-weight:bold; padding:10px 20px 0 10px; line-height:1em; padding-bottom:20px;}
        #content div.category-main-content p span { color:#999; }
        #content div.category-main-content a { padding-left:10px; text-decoration:none; font-size:11px; }
        
        /*section view*/
        #content div.section-main-content { width:260px; height:390px; padding:8px 12px; border-right:10px solid #222; background-color:#222; float:left; color:#999; }
        #content div.section-main-content p,
        #content div.section-main-content ul li { color:#999; line-height:1.3em; } 
        #content div.section-main-content p,
        #content div.section-main-content ul { padding-bottom:10px; }
        
        /*static view*/
        div.static p, div.static h3, div.static h4 { color:#999; padding:10px 10px 0 10px; }
        div.static h3, div.static h4 { color:#fff; }
        div.static h4 { margin-bottom:-10px; }/*to smush it against the p beneath it*/
        div.static p.colored { color:inherit; }
        div.static a { color:#fff; }
        
        /*newsletters*/
        body.newsletter div#content, body.newsletter div#content div.col-threespan { height:100%; }
            div.newsletter-title h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size:32px; font-weight: bold; margin:60px 0 20px; }
            div.newsletter-title h1 span { color:#929496; font-weight:normal; }
            div.newsletter-item { padding:20px 0; border-top:2px solid #4E4B4C; clear:both; }
                div.newsletter-item p { color:#D0D2D2; line-height:1.3em; padding:10px 0; width:540px; }
                div.newsletter-item h1 { color: #FFB000; font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-weight: bold; }
                div.newsletter-item img { float:right; padding-bottom:20px; }
                div.newsletter-item a { color:#FFB000; }
        body.newsletter #logo { background-image:url(/images/newsletters/bg.gif); }
                
    #footer { padding:10px 0; float:left; clear:both; }
        #footer p { font-size:10px; color:#777; }
            #footer p a { color:#fff; text-decoration:none; }
            #footer p a:hover { text-decoration:underline; }
            

/*------------HTML-------------*/
a { text-decoration:none; }
a:hover { text-decoration:underline; } 

/*------------HELPERS-------------*/
.hide { display:none; }