/* -------------------------------------------------------------------------
Zookee Media - Main Style Sheet

version: 1.4
last update: 11 Sept 2007
author: C Sancho
------------------------------------------------------------------------- */

* {
	/* global white space reset */
	padding: 0;
	margin: 0;
}

body {
	font: 81.25%/150% "Lucida Grande", Arial, Verdana, sans-serif;
	text-align: center;
	background: #FFF url("bg_body.jpg") repeat-x;
}

/* typography
------------------------------------------------------------------------- */

abbr, acronym {
 border-bottom: 1px dotted;
	cursor: help;
}

p, li, dd {
	font-size: 0.95em;
	line-height: 1.6em;
	color: #666;
	margin: 0 0 0.8em 0;
}

blockquote {
	background: transparent url("blockquote_end.gif") no-repeat bottom right;
}

blockquote .beginQuote {
	text-indent: 26px;
	background: transparent url("blockquote_begin.gif") no-repeat;
}

blockquote p {
	color: #5C513D;
	font-style: italic;
}

dt {
	font-size: 1.2em;
	font-weight: bold;
	color: #9B917A;
	margin: 0 0 0.4em 0;
}

h1 {
	font-size: 1.6em;
	line-height: 1.3em;
	font-weight: normal;
	color: #5C513D;
	margin: 0 0 0.5em 0;	
}

h2 {
	font-size: 1.3em;
	line-height: 1.3em;
	font-weight: normal;
	color: #9B917A;
	margin: 0 0 1em 0;
}

h3 {
	font-size: 1.1em;
	line-height: 1.3em;
	font-weight: normal;
	color: #5C513D;
	margin: 0 0 0.6em 0;
}

h4 {
	font-size: 0.95em;
	line-height: 1.3em;
	font-weight: normal;
	color: #5C513D;
	margin: 0 0 1em 0;
}

strong {
	font-weight: bold;
	color: #555;
}

.author {
	font-size: 0.88em;
	font-weight: normal;
	letter-spacing: 1px;
	color: #999;
	margin: 0 0 1em 0;
}

/* hyperlinks */

a:link, a:visited {
	color: #600;
	background-color: transparent;
	text-decoration: none;
	padding: 1px 1px 0 1px;
	border-bottom: 1px solid #CCC;
}

a:hover, a:active {
	color: #FFF;
	background-color: #600;
	border-bottom: 1px solid #600;
}

/* skip navigation link
------------------------------------------------------------------------- */

#skipNavWrap {
	height: 13px;
	width: 745px;
	font-size: 10px;
	text-align: left;
	margin: 7px auto 0 auto;
	background-color: transparent;
	line-height: 1em;
	background: transparent url("btn_skipnav.gif") no-repeat 10px -14px;
}

#skipNavWrap #skipNav {
	height: 12px;
	width: 104px;
	text-indent: -1000em;
}

#skipNavWrap a:link,
#skipNavWrap a:visited {
	height: 12px;
	width: 104px;
	margin-left: 10px;
	float: left;
	background: transparent url("btn_skipnav.gif") no-repeat 0 0;
	text-decoration: none;
	border: none;
	background-color: transparent;
}

#skipNavWrap a:hover,
#skipNavWrap a:active {
	background-position: 0 -14px;
	text-decoration: none;
	border: none;
}

/* wrapper
------------------------------------------------------------------------- */

#wrapper {
	width: 745px;
	background: transparent url("bg_wrapper.gif") repeat-y;
	margin: auto;
	margin-top: 0;
	text-align: left;
	padding-bottom: 1px;
	/* fix Safari bug */
	border-top: 1px solid #CDC6BB;
}

#wrapperTop {
	width: 745px;
	background: transparent url("bg_wrapper_top.gif") no-repeat 0 0;
	margin-top: 0;
	text-align: left;
	padding-bottom: 1px;
	/* fix Safari bug */
	border-top: 1px solid #CDC6BB;
}

/* header
------------------------------------------------------------------------- */

#header {
	width: 705px;
	height: 79px;
	margin: 15px 20px 5px 21px;
}

/* Hide from IE-Mac \*/
#header {
	margin: 15px 20px 5px 20px;
}
/* End hide */

#logo {
	float: right;
	display: inline;
	width: 190px;
	height: 79px;
}

#logo img {
	float: right;
	display: inline;
	width: 0;
	height: 0;
	border: none;
}

#logo a {
	border-style: none;
	display: block;
	width: 190px;
	height: 79px;
}

#shadowless {
	width: 184px;
	height: 52px;
	background: transparent url("ecru_hifi.gif") no-repeat;
}

#ecru img {
	width: 0px;
}

#header ul {
    position: relative;
	top: 75px;
	margin: 0 0 0 10px;
}

#header li {
	display: inline;
	color: #CBC5B9;
}

/* header links */

#header a:link,
#header a:visited {
	color: #7C715A;
	text-decoration: none;
	border: none;
	padding: 0;
}

#header a:hover,
#header a:active {
	color: #322A1C;
	text-decoration: none;
	border: none;
	background-color: transparent;
}

/* home header */

#home #header {
	background: #EFEEEA url("bg_head_home.jpg") no-repeat;
}

#home #logo {
	background: #FFF url("logo_home.jpg") no-repeat 0 0;
}

#home #header #menuHome {
	color: #600;
	text-decoration: none;
}

/* about us header */

#about #header {
	background: #EFEEEA url("bg_head_about.jpg") no-repeat;
}

#about #logo {
	background: #FFF url("logo_about.jpg") no-repeat 0 0;
}

#about #header #menuAboutUs {
	color: #600;
	text-decoration: none;
}

/* technology header */

#technology #header {
	background: #EFEEEA url("bg_head_tech.jpg") no-repeat;
}

#technology #logo {
	background: #FFF url("logo_tech.jpg") no-repeat 0 0;
}

#technology #header #menuTechnology {
	color: #600;
	text-decoration: none;
}

/* web design */
#webdesign #header #menuWebdesign {
	color: #600;
	text-decoration: none;    
}

/* portfolio */
#portfolio #header #menuPortfolio {
	color: #600;
	text-decoration: none;    
}

/* consultancy */
#consultancy #header #menuConsultancy {
	color: #600;
	text-decoration: none;    
}

/* css remix */
#remix #header #menuRemix {
	color: #600;
	text-decoration: none;    
}

/* css music */
#music #header #menuMusic {
	color: #600;
	text-decoration: none;    
}

/* articles header */

#articles #header {
	background: #EFEEEA url("bg_head_articles.jpg") no-repeat;
}

#articles #logo {
	background: #FFF url("logo_articles.jpg") no-repeat 0 0;
}

#articles #header #menuArticles {
	color: #600;
	text-decoration: none;
}

/* case studies header */

#caseStudies #header, #caseStudiesHome #header {
	background: #EFEEEA url("bg_head_case.jpg") no-repeat;
}

#caseStudies #logo, #caseStudiesHome #logo {
	background: #FFF url("logo_case.jpg") no-repeat 0 0;
}

#caseStudies #header #menuCaseStudies, #caseStudiesHome #header #menuCaseStudies {
	color: #600;
	text-decoration: none;
}

/* contact us header */

#contact #header {
    background: #EFEEEA url("bg_head_home.jpg") no-repeat;
}

#contact #logo {
	background: #FFF url("logo_home.jpg") no-repeat 0 0;
}

#contact #header #menuContact {
	color: #600;
	text-decoration: none;
}





/* breadcrumb bar
------------------------------------------------------------------------- */

#breadcrumb {
	float: left;
	padding-top: 8px;
	margin: 0 0 0 30px;
	width: 690px;
	display: inline;
}

#breadcrumb p {
	font-size: 0.88em;
	color: #999;
	text-transform: lowercase;
}

/* main content area
------------------------------------------------------------------------- */

#mainContent {
	float: left;
	margin: 5px 0 0 30px;
	width: 490px;
	display: inline;
}

#about #mainContent, #articles #mainContent, #technology #mainContent, #caseStudies #mainContent {
	float: left;
	margin: 5px 0 0 0;
	width: 365px;
	display: inline;
}

#mainContent img {
	float: left;
	margin: 5px 12px 7px 0;
}

#mainContent .noMarginRight {
	float: left;
	margin: 10px 0 10px 0;
}

#mainContent .more {
	background: transparent url("btn_more.gif") no-repeat 0px 2px;
	overflow: visible;
}

#mainContent .more a {
	margin-left: 18px
}

#mainContent ul {
	margin: 0 0 0.5em 0;
}

#mainContent li {
	padding: 0 0 0 12px;
	margin: 0 0 0.5em 0;
	background: transparent url("bullet.gif") no-repeat 0 6px;
	list-style-type: none;
}

#mainContent li ul li {
	font-size: 1em;
	background: transparent url("child.gif") no-repeat 0 4px;
	list-style-type: none;
}

#mainContent #contents ul {
	padding: 0;
	margin: 1em 0 0.5em 0;
}

#mainContent #contents li {
	padding: 0;
	margin: 0 0 0.3em 0;
	background: none;
	list-style-type: none;
}

#intro {
	font-size: 1.15em;
	line-height: 1.4em;
	color: #9B917A;
	margin: 0 0 1em 0;
}

.rule {
	background: transparent url("h_rule_490px.gif") no-repeat left bottom;
	height: 7px;
	margin: 25px 0 18px 0;
}

.screenshot {
	float: left;
	width: 180px;
	height: 143px;
	margin: 0 5px 7px 0;
	background: #FFF url("images/img_border.gif") no-repeat 0 -143px;
}

.screenshot a:link,
.screenshot a:visited {
	height: 143px;
	width: 180px;
	float: left;
	border-style: none;
	background: #FFF url("img_border.gif") no-repeat 0 0;
}

.screenshot a:hover,
.screenshot a:active {
	background-position: 0 -143px;
	background-color: transparent;
}

.screenshot img {
	padding: 3px 0 0 8px;
	border-style: none;
}

.callout {
	background: #FFF url("bg_callout.jpg") no-repeat;
	padding: 16px 16px 8px 18px;
	margin: 0;
	color: #5C513D;
}

.calloutBottom {
	background: transparent url("callout_bottom.gif") no-repeat;
	width: 350px;
	height: 9px;
	padding-bottom: 0.7em;
}

/* home page
------------------------------------------------------------------------- */

#home #mainContent {
	margin-top: 20px;
}

#home #mainContent p,
#home #mainContent h1,
#home #mainContent h2,
#home #mainContent h3,
#home #mainContent h4,
#home #mainContent h5 {
	margin-left: 5px;
	margin-right: 5px;
}

#home h2 {
	font-size: 0.88em;
	font-weight: normal;
	letter-spacing: 1px;
	color: #999;
	margin: 0 0 0.7em 0;
}

#home h3 {
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: normal;
	color: #9B917A;
	margin: 0 0 0.7em 0;
}

#home h4 {
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: normal;
	color: #9B917A;
	margin: 0 0 0.7em 0;
}

#home .mainImg {
	width: 490px;
	height: 143px;
	background: transparent url("img_border_home.gif") no-repeat;
	margin-bottom: 15px;
}

#home .mainImg img {
	margin: 8px 0 0 8px;
	border: none;
}


#home .mainImg #playercontainer {
    position:relative;
	top: 10px;
	margin: 0 0 0 4px;
	border: none;
}


#home .mainImg a:link,
#home .mainImg a:visited {
	float: left;
	width: 490px;
	height: 143px;
	border: none;
	background: transparent url("img_border_home.gif") no-repeat;
}

#home .mainImg a:hover,
#home .mainImg a:active {
 background-position: 0 -143px;
}


/* Portfolio
-------------------------------------------------------------------------- */

#home .portImg {
	width: 490px;
	height: 490px;
	background: transparent url("portfolio_border.gif") no-repeat;
	margin-bottom: 15px;
}

#home .portImg img {
	margin: 8px 0 0 8px;
	border: none;
}


#home .portImg #playercontainer {
    position:relative;
	top: 10px;
	margin: 0 0 0 4px;
	border: none;
}


#home .portImg a:link,
#home .portImg a:visited {
	float: left;
	width: 490px;
	height: 490px;
	border: none;
	background: transparent url("portfolio_border.gif") no-repeat;
}

#home .portImg a:hover,
#home .portImg a:active {
 background-position: 0 -488px;
}



/* IE5 Mac Band Pass Filter */

/*\*//*/

#home .mainImg {
	display: none;
}
/**/ 

/* articles
------------------------------------------------------------------------- */

#articleMain .rule, #articleSummaries .rule {
	background: transparent url("h_rule_350px.gif") no-repeat;
}

#articleMenu {
	float: left;
	width: 125px;
	display: inline;
	margin: 5px 0 0 30px;
}

#articleMenu {
	float: left;
	width: 125px;
	display: inline;
	margin: 5px 0 0 30px;
}

#articleMenu a:link,
#articleMenu a:visited {
	color: #7C715A;
	border-bottom: none;
	padding: 0;
}

#articleMenu a:hover,
#articleMenu a:active {
	color: #322A1C;
	padding-bottom: 1px;
	background-color: transparent;
}

#articles #articleMenu h2 {
	visibility: hidden;
	display: none;
}

#articleMain, #articleSummaries {
	margin-left: 10px;
}

#articleMenu ul {
	list-style: none;
}

#articleMenu li {
	font-size: 0.88em;
	line-height: 1.3em;
	padding: 0 0 0 18px;
	margin: 0 0 1em 0;
	background: transparent url("btn_article.gif") no-repeat 0px 0px;
}

#articleMenu li ul {
	margin-top: 10px;
}

#articleMenu li ul li {
	font-size: 1em;
	padding: 0 0 0 10px;
	background: transparent url("child.gif") no-repeat 0px 1px;
}

.articleLink {
	background: transparent url("btn_article.gif") no-repeat 0px 1px;
}

.articleLink a {
	margin-left: 18px
}

/* case studies
------------------------------------------------------------------------- */

#caseStudiesHome #mainContent p,
#caseStudiesHome #mainContent h1 {
	margin-left: 5px;
}


#caseStudiesHome #caseListing h2, #caseStudiesHome #caseListing h3, #caseStudiesHome #caseListing h4, #caseStudiesHome #caseListing p {
	margin-left: 190px;
}

/* Holly Hack : Hide from IE5-mac. Only IE-win sees this. \*/
* html #caseListing p {
	height: 1%;
}
/* End hide from IE5/mac */

#caseListing .barImg {
	float: left;
	height: 68px;
	width: 180px;
	background: #FFF url("imgbar_border.gif") no-repeat 0 -68px;
}

#caseListing .barImg a:link,
#caseListing .barImg a:visited {
	float: left;
	height: 68px;
	width: 180px;
	border-style: none;
	background: transparent url("imgbar_border.gif") no-repeat 0 0;
}

#caseListing .barImg a:hover,
#caseListing .barImg a:active {
	background-position: 0 -68px;
}

#caseListing .barImg img {
	margin: 8px 0 0 8px;
	border-style: none;
}

#caseListing h2 {
	margin: 0 0 0.5em 0;
}

#caseListing h3 {
	color: #9B917A;
}

/* contact form
------------------------------------------------------------------------- */

#contact form {
	width: 490px;
}

#contact input, #contact textarea {
	width: 305px;
	float: left;
	margin: 0 0 1em 0;
}

#contact label {
	clear: left;
	width: 150px;
	float: left;
	font-size: 0.95em;
	line-height: 1.2em;
	color: #9B917A;
	margin: 0 0 1em 0;
}

#contact .button {
	clear: both;
	width: 100px;
}

#contact form p {
	clear: left;
	float: left;
}

/* sitemap
-------------------------------------------------------------------------*/

#mainContent #sitemap ul li {
	font-size: 1.1em;
	font-weight: bold;
	padding: 20px 0 0 0;
	margin: 0 0 0.5em 0;
	background: transparent url("h_rule_490px.gif") no-repeat 0 6px;
	list-style-type: none;
}

#mainContent #sitemap li ul {
	padding: 6px 0 0 0;
}

#mainContent #sitemap li ul li {
	font-size: 0.88em;
	font-weight: normal;
	padding: 0 0 0 12px;
	background: transparent url("child.gif") no-repeat 0 4px;
	list-style-type: none;
}

/* sidebar
------------------------------------------------------------------------- */

#sideBar {
	float: right;
	width: 200px;
	margin: 0 10px 10px 0;
	display: inline;
	background: #FFF url("bg_sidebar.gif") no-repeat;
}

#sideBarContent {
	margin: 5px 10px 0 10px;
}

#home #sideBarContent {
	margin-top: 20px;
}

#sideBarBottom {
	width: 190px;
	height: 40px;
	background: #FFF url("sidebar_bottom.gif") no-repeat;
	overflow: hidden;
}

#sideBarContent p, #sideBarContent li {
	font-size: 0.88em;
	color: #666;
	padding: 0 0 0 5px;
	margin: 0 0 0.5em 0;
}

#sideBarContent h2 {
	font-size: 0.95em;
	line-height: 1.4em;
	font-weight: normal;
	color: #5C513D;
	padding: 5px 0 0 5px;
	margin: 0 0 0.5em 0;
	clear: right;	
}

#home #sideBarContent h2 {
	font-size: 0.88em;
	font-weight: normal;
	letter-spacing: 1px;
	color: #999;
	margin: 0 0 1em 0;	
}

#home #sideBarContent h3 {
	font-size: 0.95em;
	line-height: 1.4em;
	font-weight: normal;
	color: #5C513D;
	padding: 5px 0 0 5px;
	margin: 0 0 0.5em 0;
	clear: right;	
}

#sideBarContent .rule {
	background: transparent url("h_rule_180px.gif") no-repeat;
}

.sideBarImg {
	width: 180px;
	height: 68px;
	margin-top: 1em;
	background: transparent url("imgbar_border.gif") no-repeat 0 -68px;
}

.sideBarImgLarge {
	width: 180px;
	height: 145px;
	background: transparent url("img_border.gif") no-repeat 0 -143px;
}

#sideBarContent h2 + div {
	margin-top: 5px;
}

.sideBarImg a:link,
.sideBarImg a:visited {
	height: 68px;
	width: 180px;
	float: right;
	border-style: none;
	background: transparent url("imgbar_border.gif") no-repeat;
}

.sideBarImg a:hover,
.sideBarImg a:active {
	background-position: 0 -68px;
}

.sideBarImg img {
	margin: 8px 0 0 8px;
	padding: 0;
	border-style: none;
}

.sideBarImgLarge a:link,
.sideBarImgLarge a:visited {
	height: 143px;
	width: 180px;
	float: right;
	border-style: none;
	background: transparent url("img_border.gif") no-repeat;
}

.sideBarImgLarge a:hover,
.sideBarImgLarge a:active {
	background-position: 0 -143px;
}

.sideBarImgLarge img {
	margin: 8px 0 0 8px;
	border-style: none;
}

#sideBarContent .more {
	background: transparent url("btn_more.gif") no-repeat 5px 2px;
}

#sideBarContent .more a {
	margin-left: 18px
}

#sideBarContent li {
	padding: 0 0 0 17px;
	margin: 0 0 0.5em 0;
	background: transparent url("bullet_small.gif") no-repeat 6px 6px;
	list-style-type: none;
}

#sideBarContent ul {
	padding: 0;
	margin: 1em 0 0.5em 0;
}

/* IE5 Mac Band Pass Filter */

/*\*//*/

#sideBarContent p {
	clear: both;
}
/**/ 

/* contact panel & cms panel
------------------------------------------------------------------------- */

#cmsPanel,
#contactPanel {
	background: #FFF url("bg_contact_callout.jpg") no-repeat;
	padding-bottom: 5px;
}

#contactPanel img {
	margin: 9px 0 9px 9px;
}

#cmsPanel img {
	margin: 9px 0 0 9px;
}

#cmsPanel #webservicelist li { list-style-type: square; }

#sideBarContent #contactPanel h2,
#sideBarContent #cmsPanel h2 {
	font-size: 1.1em;
	line-height: 1.4em;
	color: #5C513D;
	padding: 0 18px 0 18px;
	margin: 0 0 0.5em 0;
	letter-spacing: 0;
}

#contactPanel p,
#cmsPanel p {
	padding: 0 18px 0 18px;
	margin: 0 0 0.5em 0;
}

#contactPanelBottom,
#cmsPanelBottom {
	background: #FFF url("contact_callout_bottom.gif") no-repeat;
	height: 12px;
	padding-bottom: 10px;
}

/* quote panel
------------------------------------------------------------------------- */

#sideBarContent blockquote {
	background: #FFF url("bg_quote.jpg") no-repeat 0 0;
	padding: 18px 0 0 0;
}

#sideBarContent blockquote .quote {
	font-size: 0.95em;
	line-height: 1.5em;
	color: #5C513D;
	font-style: normal;
	text-align: center;
	padding: 0 28px 0 28px;
	margin: 0 0 0.5em 0;
	background: url("end_quote.gif") no-repeat right bottom;
}

#sideBarContent blockquote .credit {
	font-size: 0.88em;
	color: #9B917A;
	font-style: normal;
	text-align: center;
	padding: 0 18px 18px 18px;
	margin-bottom: 5px;
	background: url("contact_callout_bottom.gif") no-repeat left bottom
}

/* footer
------------------------------------------------------------------------- */

#footer {
	clear: both;
	width: 745px;
	height: 57px;
	background: #FFF url("bg_footer.jpg") no-repeat;
	margin: 20px 0 0 0;
	/*border-top: 1px solid #FFF;*/
	overflow: hidden;
}

#footnote {
	float: left;
	clear: none;
	width: 690px;
	height: 25px;
	font-size: 0.88em;
	color: #7C715A;
	margin: 19px 0 0 0;
	padding-left: 27px;
}