/* CSS Document for The Zen Agency*/
/* Created By The Zen Agency, Glasgow*/
/* © Copyright The Zen Agency, Glasgow */

/*------------------------------------------------------------------------------------*/
/* GENERAL STYLES */
/*------------------------------------------------------------------------------------*/

* {
	margin: 0px;
	padding: 0px;
	border: 0px;
	}

html {
	height: 100%;
	background: url(../Images/zen_bg.jpg) center top no-repeat;
	text-align: center;
	}

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555555; /*#919194;*/
	line-height: 1.4em;
	text-align: left;
	}

.relative {
	position: relative;
	width: 100%;
	/*height: 100%;*/
	}

.clear {
	width: 100%;
	height: 1px;
	overflow: hidden;
	clear: both;
	}

/*------------------------------------------------------------------------------------*/
/* GENERAL TEXT STYLES */
/*------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, p {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0 0 10px 0;
	line-height: normal;
	font-weight: normal;
	font-style: normal; /* overrides general settings above */
	}

h1 {font-size: 220%;}
h2 {font-size: 170%;}
h3 {font-size: 150%;}
h4 {font-size: 140%;}
h5 {font-size: 130%;}
h6 {font-size: 110%;}
p  {font-size: 100%;}

a {
	text-decoration: none;
	color: #AB9B27;
	}

a:hover {
	color: #82751E;
	}

a:active,
a:focus {
  outline: none;
}

blockquote {
    padding: 0 0 10px 20px;
    margin: 0;
	color: #3E6871;
 }

.heading_underline {
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #d7d7d7;
	}

.date {
	font-size: 55%;
	vertical-align: top;
	margin: 0 10px 0 10px;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #777777;
	}

/*------------------------------------------------------------------------------------*/
/* GENERAL DIV BLOCKS */
/*------------------------------------------------------------------------------------*/

.full_width {
	float: left;
	display: inline;
	width: 100%;
	text-align: left;
	}


/*------------------------------------------------------------------------------------*/
/* SECTION */
/*------------------------------------------------------------------------------------*/

#section {
	width: 960px;
	margin: 0 auto;
	padding: 0 0 0 20px;
    }

.main_content {
	padding-bottom: 30px;
	border-bottom: 1px solid #000000;
	margin-bottom: 1px;
	}

/*------------------------------------------------------------------------------------*/
/* HEADER */
/*------------------------------------------------------------------------------------*/

.header_holder {
	background: url(../Images/trans_white_bg.png) left top repeat;
	border-bottom: 1px solid #d7d7d7;
	padding: 30px 0 20px 0;
	}

#header {
	width: 960px;
	margin: 0 auto;
	padding: 0 0 0 20px;
    }


/*------------------------------------------------------------------------------------*/
/* LATEST NEWS & WORK */
/*------------------------------------------------------------------------------------*/

.latest {
	float: left;
	display: inline;
	width: 300px;
	margin: 0 0 0 20px;
	}

.latest ul {
	list-style-type: none;
	padding: 0 0 0 5px;
	}

.latest ul li {
	background: url(../Images/bullet_dot.jpg) left 0.7em no-repeat;
	padding: 0 0 2px 7px;
	}

.latest ul li a {
	text-decoration: none;
	color: #555555; /*#919194;*/
	}

.latest ul li a:hover {
	color: #222222;
	}


/*------------------------------------------------------------------------------------*/
/* LOGO */
/*------------------------------------------------------------------------------------*/

.logo {
	float: left;
	display: inline;
	width: 300px;
	background: url(../Images/zen_logo.gif) left top no-repeat;
	}

.logo:hover {
	background: url(../Images/zen_logo_hover.gif) left top no-repeat;
	}

.logo a {
	float: left;
	display: inline;
	text-indent: -9999px;
	width: 300px;
	height: 90px;
	overflow: hidden;
	}


/*------------------------------------------------------------------------------------*/
/* NAV */
/*------------------------------------------------------------------------------------*/

#nav {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 10px 20px;
	font-size: 250%;
	line-height: normal;
	}

/*-----------------------------------------*/
/* top nav list styles */
/*-----------------------------------------*/

.menu {
	list-style-type: none;
	}

.menu li {
	float: left;
	display: inline;
	padding: 0 10px 0 0;
	margin: 0 10px 0 0;
	border-right: 1px dotted #555555; /*#919194;*/
	}

.menu li a {
	float: left;
	display: inline;
	}

.menu li a:hover {
	
	}

/*-----------------------------------------*/
/* contact, subscribe and login icons */
/*-----------------------------------------*/
.top_icons {
	float: right;
	display: inline;
	list-style-type: none;
	margin: 0 20px 0 0;
	}

.top_icons li {
	float: left;
	display: inline;
	margin: 0 0 0 5px;
	}

.top_icons li a img {
	text-decoration: none;
	border: none;
	}

/*------------------------------------------------------------------------------------*/
/* ARTICLE BANNER */
/*------------------------------------------------------------------------------------*/

#article {
	float: left;
	display: inline;
	width: 100%;
	display: inline;
	padding: 0 0 20px 0;
	}

.main_text {
	padding-bottom: 40px;
	}

#article ul,
.main_text ul {
	list-style-type: none;
	padding: 0 0 10px 20px;
	}

#article ul li,
.main_text ul li {
	list-style-type: none;
	background: url(../Images/bullet_square.gif) left .5em no-repeat;
	padding: 0 0 0 7px;
	}

#article ul li a,
.main_text ul li a {
	list-style-type: none;
	}

#article ul li a:hover,
.main_text ul li a:hover{
	list-style-type: none;
	}

.article_footer {
	width: 100%;
	margin: 0 0 20px 0;
	background-color:#FFFFFF;
	padding: 4px;
	border: 1px solid #dddddd;
	}

.article_footer ol {
	padding: 20px;
	}

/*------------------------------------------------------------------------------------*/
/* MAIN CONTENT AREA */
/*------------------------------------------------------------------------------------*/

#case{
	float: left;
	display: inline;
	width: 918px;
	background: #ffffff;
	border: 1px solid #dddddd;
	padding: 10px;
    }
    
#case_list{
	height: 100px;
	width: 918px;
	background: #ffffff;
	border: 1px solid #dddddd;
	padding: 10px;
    }

.main_pic { /* Note!!! Pics should be width = 460px normally and for full width (under text) should be 940px wide */
	float: right;
	display: inline;
	margin: 0 0 20px 30px;
	}

.heading{	
	font-size: 130%;
	color: #AB9B27;
    }


/*------------------------------------------------------------------------------------*/
/* ACCORDION STYLES (accordion script is direct link from jquery website)*/
/*------------------------------------------------------------------------------------*/

#accordion h3.ui-accordion-header {
	border-bottom: 1px dotted #eaeaea;
	margin-bottom: 10px;
	}

#accordion {
	/*height: auto;*/
	}

/*------------------------------------------------------------------------------------*/
/* SECTION FOOTER */
/*------------------------------------------------------------------------------------*/

#section_footer {
	float: left;
	display: inline;
	width: 100%;
	}

/*-----------------------------------------*/
/* Folio Thumbs */
/*-----------------------------------------*/

.folio_thumbs {
	float: left;
	display: inline;
	width: 110%;
	}

.folio_thumbs li {
	float: left;
	display: inline;
	width: 290px;
	height: 220px;
	background: #ffffff;
	padding: 4px;
	margin:0 20px 20px 0;
	overflow: hidden;
	border: 1px solid #bbbbbb;
	}

.folio_thumbs li:hover {
	border: 1px solid #555555;
	}

.folio_thumbs li img {
	width: 290px;
	}

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

.footer_holder {
	background: #000000;
	}

#footer {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 20px 20px;
	color: #ffffff;
    }

.absolute_footer {
	float: left;
	display: inline;
	width: 100%;
	padding: 30px 0;
	}

/*--------------------------------------*/
/* FOOTER ZEN LINKS */
/*--------------------------------------*/

.zen_links {
	float: left;
	display: inline;
	width: 220px;
	margin: 0 20px 0 0;
	}

.zen_links ul {
	list-style-type: none;
	}

.zen_links ul li {
	background: url(../Images/bullet_dot.jpg) left 0.7em no-repeat;
	padding: 0 0 2px 7px;
	}

.zen_links ul li a {
	text-decoration: none;
	color: #ffffff;
	}

.zen_links ul li a:hover {
	color: #bbbbbb;
	}

.zen_links ul ul li.parent {
	font-size: 150%;
	padding: 0 0 5px 0;
	margin: 0 0 10px 0;
	border-bottom: 1px dotted #444444;
	}

.zen_links ul ul {
	margin: 0 0 20px 0;
	}

.copyright {	
	float: left;
	display: inline;
	width: 940px;
	border-bottom: 1px dotted #444444;
	text-align: right;
	}

/*--------------------------------------*/
/* find */
/*--------------------------------------*/

.find {
	float: right;
	display: inline;
	width: 450px;
	height: 250px;
	padding: 4px;
	margin: 0 20px 10px 0;
	border: 1px solid #383838;
	}

.find ul {
	list-style-type: none;
	}

.find ul li {
	padding: 0 0 2px 7px;
	}

.find ul li a {
	text-decoration: none;
	color: #A79829;
	padding: 0 0 0 7px;
	background: url(../Images/bullet_dot.jpg) left center no-repeat;
	}

.find ul li a:hover {
	color: #82751E;
	}

/*--------------------------------------*/
/* MAP */
/*--------------------------------------*/

#map {
	position: relative;
	width: 448px;
	height:	248px;
	border: 1px solid #eaeaea;
	}

.map_text {
	position: absolute;
	width: 428px;
	height: 45px;
	padding: 10px;
	margin: 0 0 1px 1px;
	bottom: 0px;
	left: 0px;
	background: url(../Images/trans_black_bg.png) left top repeat;
	z-index: 400;
	}

.map_logo {
	float: left;
	display: inline;
	width: 128px;
	padding: 5px 20px 0 0;
	}

.map_text_nugget {
	float: left;
	display: inline;
	width: 120px;
	margin: 0 0 0 10px;
	}

/*--------------------------------------*/
/* SOCIAL */
/*--------------------------------------*/

.social {
	float: left;
	display: inline;
	width: 300px;
	margin: 20px 20px 0 0;
	}

.social_icon {
	float: left;
	display: inline;
	padding-right:10px;
	}
	
.social ul {
	list-style-type: none;
	float: left;
	display: inline;
	}

.flickr_pics li {
	float: left;
	display: inline;
	width: 70px;
	height: 70px;
	padding: 1px;
	margin: 0 5px 5px 0;
	border: 1px solid #333333;
    }

.flickr_pics li:hover {
	border: 1px solid #555555;
    }

.flickr_pics li a img {
	width: 70px;
	}


/*------------------------------------------------------------------------------------*/
/* FORM ELEMENTS */
/*------------------------------------------------------------------------------------*/

#contact_form,
#login_form {
	width: 380px;
	border: 1px solid #eeeeee;
	padding: 10px;
	background: #ffffff;
	}

#login_form {
	width: 250px;
	}

.form_label {
	width: 100%;
	padding-bottom: 3px;
	font-weight: bold;
	}

.form_input {
	width: 80%;
	border: 1px solid #dddddd;
	margin: 0 0 10px 0;
	}

.message {
	width: 100%;
	}

/* form button styles */

.login_button,
.send_button {
	padding: 3px 10px;
	text-indent: -9999px;
	color: transparent;
	width: 80px;
	height: 25px;
	font-size: 0px;
	display:block;
	line-height: 0px;
	}

/* normal */
.login_button {background: url(../Images/login_btn.gif) left top no-repeat;}
.send_button {background: url(../Images/send_btn.gif) left top no-repeat;}

/* hover states */
.login_button:hover {background: url(../Images/login_btn_hover.gif) left top no-repeat; cursor: pointer;}
.send_button:hover {background: url(../Images/send_btn_hover.gif) left top no-repeat; cursor: pointer;}


/*------------------------------------------------------------------------------------*/
/* WORD CLOUD STYLES */
/*------------------------------------------------------------------------------------*/
/*
.word_cloud {
	width: 100%;
	}

.word_cloud li {
	float: left;
	display: inline-block;
	opacity: 0.4;
	filter: alpha(opacity = 40);
	padding: 0.3em;
	}
*/
/*------------------------------------------------------------------------------------*/
/* OVERRIDES */
/*------------------------------------------------------------------------------------*/

.text_right {
	text-align: right;
	}

.zen_yellow {
	color: #A79829;
	}