/* -------------------------------------------------------------- 
   shell.css
-------------------------------------------------------------- */


body {
    margin: auto;
    background: white url('/design/img/tile.jpg') repeat-x center top;	
    }


/* Site Widths */


#nav, #wrapper  {
    width: 960px;
    margin: auto;
    }


/* Header styles */

#header {
    height: 158px;
    _overflow: hidden;
    margin: auto;
    background: url('/design/img/header_tile.jpg') no-repeat center top;
    }

#header .clearfix {
    width: 960px;
    height: 127px;
    margin: auto;
    overflow: hidden;
    background: url('/design/img/header_tile.jpg') no-repeat center top;
    }
    
    
    #header.no-search,
    #header.no-search .clearfix { background: url('/design/img/header.png') no-repeat center top; }

#logo, #search {
    float: left;
    }

#logo, #logo a {
    width: 683px;
    .width: 674px;
    height: 127px;
    }

#logo a { 
    background: url('/design/img/logo.png') no-repeat 5px 5px;
    display: block;
    }

#logo a span { display: none; }

#search {
    width: 277px;
    .width: 286px;
    margin: 52px 0 0 0;
    .margin: 48px 0 0 0;
    }


/* Wrapper Styles */

#container {
    margin: auto;
    background: url('/design/img/container_tile.jpg') no-repeat center top;
    min-height: 336px;
    text-align: left;
    }

#wrapper {
    text-align: left;
    }


/* Content Area Styles */

#wrapper {
    background: white url('/design/img/wrapper_tile.png') repeat-y center top;
    }

#home #wrapper,
.wide #wrapper { background: none; }


#wrapper .top { 
    background: url('/design/img/wrapper_top_generic.png') no-repeat center top; 
    min-height: 215px;
    }
.communities-collaborating-to-reconnect-youth #wrapper .top, .boys-and-young-men-of-color #wrapper .top {
    background: url('/design/img/wrapper_top_taller.png') no-repeat center top; 
    min-height: 290px;
    }
.campaign-for-youth #wrapper .top {
    background: url('/design/img/wrapper_top_taller.png') no-repeat center top; 
    min-height: 290px;
    }
#wrapper .bottom {
    background: url('/design/img/wrapper_bottom.png') no-repeat center bottom;
    min-height: 315px;
    }



/* Columns
-------------------------------------------------------------- */

#primary, #secondary {
   float: left;
   overflow: hidden; 
   }

#primary {
   width: 780px;
   padding: 0; 
   }

#secondary {
   width: 180px;
   padding: 14px 0 20px 0;
   }

.pad { padding: 20px;}

#index .pad { padding: 0 20px 20px 20px;  }




/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }