/* -------------------------------------------------------------- 
  
   CSS Framework
   
   * Screen & Projection Styles *
      
   This is the main CSS-file for the framework.
   Include this in the <head> of every page.
   
-------------------------------------------------------------- */

@import "reset.css";
@import "content.css";
@import "typography.css";
@import "forms.css";


/* =CONTAINERS
-------------------------------------------------------------- */

body {
	background: #fbf4e1 url(../img/bg-main.jpg) no-repeat 50% 0;
	color: #2f2419;
}

body.home {
	background: url(../img/bg-home.jpg) no-repeat 50% 0;
}

div#container {
	width: 920px;
	margin: 30px auto;
}

div#nav-primary {
	float: left;
	width: 266px;
}

div#content {
	float: right;
	width: 654px;
	padding-top: 38px;
	position: relative;
}


/* =BRANDING
-------------------------------------------------------------- */

div#nav-primary h1 a {
	background:url(../img/branding-main.gif) no-repeat 0 0;
	width: 266px;
	height: 158px;
	display: block;
	text-indent: -9999px;
}


/* =NAV-PRIMARY LINKS
-------------------------------------------------------------- */

div#nav-primary ul {
	list-style-type: none;
	margin: 9px 0 0 0;
	padding: 0;
}

/* About */
div#nav-primary li.about a:link, div#nav-primary li.about a:visited, div#nav-primary li.about a:focus, div#nav-primary li.about a:active {
	background:url(../img/nav-about.jpg) no-repeat 0 0;
	width: 266px;
	height: 45px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.about a:hover {
	background:url(../img/nav-about.jpg) no-repeat -266px 0;
}

body.about div#nav-primary li.about a {
	background:url(../img/nav-about.jpg) no-repeat -266px 0;
}


/* Meet */
div#nav-primary li.meet a:link, div#nav-primary li.meet a:visited, div#nav-primary li.meet a:focus, div#nav-primary li.meet a:active {
	background:url(../img/nav-meet.jpg) no-repeat 0 0;
	width: 266px;
	height: 36px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.meet a:hover {
	background:url(../img/nav-meet.jpg) no-repeat -266px 0;
}

body.meet div#nav-primary li.meet a {
	background:url(../img/nav-meet.jpg) no-repeat -266px 0;
}

/* Where */
div#nav-primary li.where a:link, div#nav-primary li.where a:visited, div#nav-primary li.where a:focus, div#nav-primary li.where a:active {
	background:url(../img/nav-where.jpg) no-repeat 0 0;
	width: 266px;
	height: 35px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.where a:hover {
	background:url(../img/nav-where.jpg) no-repeat -266px 0;
}

body.where div#nav-primary li.where a {
	background:url(../img/nav-where.jpg) no-repeat -266px 0;
}

/* News */
div#nav-primary li.news a:link, div#nav-primary li.news a:visited, div#nav-primary li.news a:focus, div#nav-primary li.news a:active {
	background:url(../img/nav-news.jpg) no-repeat 0 0;
	width: 266px;
	height: 39px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.news a:hover {
	background:url(../img/nav-news.jpg) no-repeat -266px 0;
}

body.news div#nav-primary li.news a {
	background:url(../img/nav-news.jpg) no-repeat -266px 0;
}

/* Change */
div#nav-primary li.change a:link, div#nav-primary li.change a:visited, div#nav-primary li.change a:focus, div#nav-primary li.change a:active {
	background:url(../img/nav-change.jpg) no-repeat 0 0;
	width: 266px;
	height: 35px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.change a:hover {
	background:url(../img/nav-change.jpg) no-repeat -266px 0;
}

body.change div#nav-primary li.change a {
	background:url(../img/nav-change.jpg) no-repeat -266px 0;
}

/* Camfed */
div#nav-primary li.camfed a:link, div#nav-primary li.camfed a:visited, div#nav-primary li.camfed a:focus, div#nav-primary li.camfed a:active {
	background:url(../img/nav-camfed.jpg) no-repeat 0 0;
	width: 266px;
	height: 35px;
	display: block;
	text-indent: -9999px;
}

div#nav-primary li.camfed a:hover {
	background:url(../img/nav-camfed.jpg) no-repeat -266px 0;
}

body.camfed div#nav-primary li.camfed a {
	background:url(../img/nav-camfed.jpg) no-repeat -266px 0;
}


/* =SITE-INFO
-------------------------------------------------------------- */

div#site-info {
	clear: both;
	padding: 3em 0 3em 120px;
	background: url(../img/branding-camfed.gif) no-repeat 0 50%;
	text-transform: uppercase;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-weight: bold;
	font-size: 0.8em;
}

div#site-info ul {
	list-style-type: none;
	clear: both;
}

div#site-info ul li {
	float: left;
}

div#site-info ul#uk li.web {
	padding-right: 2.1em;
}

div#site-info ul#us li.web {
	padding-right: 1.5em;
}

div#site-info ul#uk li.email {
	padding-left: 5.75em;
	text-transform: lowercase;
}

div#site-info ul#us li.email {
	padding-left: 1.5em;
	text-transform: lowercase;
}

div#site-info ul li a {
	text-decoration: none;
}


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

div#footer {
	clear: both;
	margin-top: 3em;
	padding-bottom: 3em;
	width: 100%;
	float: left;
	font-size: 0.75em;
	border-top: 1px solid #cccc99;
	padding-top: 20px;
	color: #666;
}

div#footer div {
	float: left;
	width: 133px;
	padding-left: 20px;
	border-left: 1px solid #cccc99;
}

div#footer div.first {
	border: none;
	padding-left: 0;
	/*width: 245px;*/
}

div#footer div ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 1em;
}