/* Colours

header mustard #D6C695
topnav light #C4B586
topnav dark #A3956C

Brown BG #412E28

Link mustard #D6C695

Active hot pink #B3204D

*/



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*** Sticky Footer ala http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ***/

* {
   margin: 0;
}

html, body {
   height: 100%;
}

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -225px;
}

#footer, .push {
   height: 225px;
}

/***Warnings***/
p.warning {
   margin: 0;
}

/***No Java***/
body.coda-slider-no-js #showcase_slider img{
   width: 425px;
   height: 349px;
}

body.coda-slider-no-js #showcase_slider span.overlay {
   display: none;
}

body.coda-slider-no-js #showcase_slider .showcase-slider, body.coda-slider-no-js .showcase-slider .panel {
   width: inherit;
}

/*** basics and typography ***/
 

body {
   font-size: 100%;
   font-family: helvetica, arial, sans-sherif;
   color: #fff;
   background-color: #412E28;
}

p {
   font-size: 1em;
   margin-top: 1em;
   margin-bottom: 1em;
}

h1,h2, h3, h4, h5 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-weight: bold;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.1em;
	font-weight: normal;
}
a:link, a:visited, a:active {
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}


ul.navigation {
	list-style: none;
}

ul.navigation li {
	display: inline;
}

strong {
	font-weight: bold;
}


div.hide,
span.hide {
   position: absolute;
   left: -9999px;
}


#header h1 a{
   background-image:url("/images/top_title.png");
   background-repeat:no-repeat;
   display:block;
   height:55px;
   text-indent:-9999px;
   width:160px;
}

#content_main h2.title {
   font-family:times New Roman, sans-serif;
   font-size:4em;
   font-style:italic;
   letter-spacing:-1px;
}

.contact #content_main h2.title {
   line-height:0.7em;
}


/*** sections ***/

.container {
   width: 860px;
   margin: auto;
}

#header {
   height:17em;
   background-image: url("../images/bg_header.jpg");
   background-repeat: repeat;
   background-color: #D6C695;

}

#header a:link, a:visited, a:active {
   color:#fff;
}

#header a:hover {

}

#header .container {
   padding-top: 15px;
}

#header_image {
   float:left;
   width:120px;
}


#top_slider {
   float:left;
   width: 680px;
   margin-left: 60px;
}

#top_slider p{
   margin-top: 1em;
   margin-bottom: 1em;
   line-height: 1.1em;
   font-size: 0.95em;
}


#top_slider p.footnote {
   font-size:0.8em;
}


#slide_nav {
   margin-bottom: 25px;
}

.nav-left, .nav-right {
   padding-top:40px;
   float:left;
}

#top_slider .nav-left a{
   background-image: url(../images/top_slide_left.png);
}

#top_slider .nav-left a, #top_slider .nav-right a {
   background-repeat: no-repeat;
   background-position:center center;
   text-indent: -9999em;
   width: 30px;
   height:30px;
   display: block;
}

#top_slider .nav-left a:hover {
   background-image: url(../images/top_slide_left-hover.png);
   
}

#top_slider .nav-right a {
   background-image: url(../images/top_slide_right.png);
}

#top_slider .nav-right a:hover {
   background-image: url(../images/top_slide_right-hover.png);
}

.nav-left, nav-right, #slide {
	float: left;
}

ul.slide {
   border:1px solid #A3956C;
   height:28px;
   margin-left:50px;
   width:527px;
}

ul.slide li a {
   background-color: #C4B382;
   width: 175px;
   text-indent: -9999em;
   height: 28px;
   display: block;
   float: left;
   background-position: center center;
   background-repeat: no-repeat;
}

ul.slide li a:hover {
   background-color: #A3956C;
}

ul.slide li a.intro{
   background-image: url(../images/top_nav_introduction.png);
   border-right: 1px solid #A3956C;
}

ul.slide li a.design{
   background-image: url(../images/top_nav_design.png);
   border-right: 1px solid #A3956C;
}

ul.slide li a.webs{
   background-image: url(../images/top_nav_webs.png);
}

#slide {
   width:710px;
   padding-left: 15px;
   padding-right: 15px;
}

#header_hide {
   background-color: #847958;
   background-image: url(../images/bg_hide.jpg);
   background-repeat: repeat-x;
   height: 26px; 
   line-height: 0.8em;
   text-align: center;
}

#header_hide a {
   font-weight: bold;
   color: #fff;
}



#content {
   
}

#content a:link, a:visited, a:active,
#footer a:link, a:visited, a:active {
   color: #D6C695;
}

#navigation_main {
   height: 50px;
}

#navigation_main a {
   background-repeat: no-repeat;
   background-position: center center;
   text-indent: -9999em;
   height: 40px;
   margin: 0 19px;
   display: block;
   float: left;
   padding-bottom: 8px;
}


body.home a.home, body.portfolio a.portfolio, body.contact a.contact {
   border-bottom: 2px solid #B3204D;
}

#navigation_main a:hover {
   border-bottom: 2px solid #B3204D;
}

#navigation_main a.home {
   background-image: url(../images/main_nav_home.png);
   width:100px;
}

#navigation_main a.portfolio {
   background-image: url(../images/main_nav_portfolio.png);
   width:145px;
}

#navigation_main a.contact {
   background-image: url(../images/main_nav_contact.png);
   width:120px;
}

#content_main {
   clear: left;
   margin-top:10px;
}


.sort {
   font-size: 1.2em;
   font-style: italic;
}

#footer {
   background-color:#000000;
   
   background-repeat: repeat;
}

.shading {
   background-image: url(../images/bg_footer.png);
   width: 400px;
}

#footer .container {
	height: 100%;
	width: 100%
}

.footer_title {

   height: 100%;
   width:30%;
   background-image:url("../images/bg_footer.jpg");
   background-repeat: repeat-x;
   float:left;
}

#footer h2{
   font-family: Adobe Garamond Pro, Arial, sans-serif;
   letter-spacing:-1px;
   font-size:2.5em;
   text-align: right;
   margin-right: 20px;
   height: 40px;
   padding-top:5px;
}
.footer_content {
	height: 100%
	overflow:auto;
}

.footer_content .box {
   padding: 10px;
   overflow:auto;
}

.latest_blog {
float:left;
height:205px;
width:30%;
}


/***personel***/

.latest_blog h3 a {
   color: #fff;
}

.latest_blog h4 {
   display: inline;
   font-size: 0.9em;
}

.latest_blog li {
   margin: 15px 0 0 15px;
   list-style-position:outside;
}

.latest_blog p {
   margin-top:5px; margin-bottom: 5px;	 
}

.latest_blog small{
   font-size: 0.8em;
   font-style: italic;
}

.latest_blog ul {
   list-style: disc inside ;
}

.contact_box a {
   font-weight: bold;
}

.social a {
   text-indent: -9999px;
   background-repeat: no-repeat;
   background-position: center;
   width: 30px;
   height: 34px;
   display: block;
   float: left;
   margin-right:15px;
}

.social .flickr {
   background-image: url(../images/social_flickr.png);
}

.social .lastfm {
   background-image: url(../images/social_lastfm.png);
}

.social .twitter {
   background-image: url(../images/social_twitter.png);
}

.social .wordpress {
   background-image: url(../images/social_wordpress.png);
}

.social .facebook {
   background-image: url(../images/social_facebook.png);
}

.credits_box {
   font-size: 0.7em;
}

/*** showcase slide ***/

#showcase_slider .cboxElement img {
   width: 410px;
   margin-top: 7px; /*push image down so overlay top doesnt cover */
}


/*** Portofilio Page Colour Box***/

#portfolio_page_wrapper {
   width: 720px;
   margin: auto;
   background-image: url(../images/bg_page.jpg);
   overflow:auto;
   height:600px;
}

#portfolio_page_wrapper p { color: #000; }

#info_plane {
   width: 343px;
   float: left;
   line-height:1.2em;
   font-size:0.9em;
}

#image_plane_outer {
	overflow: visible;
	position: relative;
	width: 360px;
   float: right;
   padding-top: 25px;
}

#image_plane_outer span.award {
   background: url(../images/award.png);
   background-repeat: no-repeat;
   position: absolute;
   top:315px;
   left:-25px;
   display: block;
   width: 256px;
   height: 256px;
}

#image_plane { overflow: hidden; }

#image_plane img { border:1px solid #000000; }

#info_plane a {
  color: #B3204D;
  font-weight: bold;
}

.website.live {
   white-space:nowrap;
}

dl {
   color: #000;
   padding:25px;
}

dt {
   font-weight: bold;
   clear: left;
   float:left;
   padding-right:0.5em;
}

dd {
   margin-bottom:1em;
}

dd.info { 
   display: inline-block;
   margin-top: -1em;

}

/*
	jQuery coda-slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.

*/

	/**** Info-slider ****/
	
	/*If java turned off, but wrapper in a scroll box*/
	.coda-slider-no-js #top_slider {
	height: 200px;
	overflow: auto;
	}
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	#top_slider .info-slider-no-js .info-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	#top_slider .info-slider, .info-slider .panel { width: 600px } 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	#top_slider .info-slider-wrapper.arrows .info-slider, .info-slider-wrapper.arrows .info-slider .panel { width: 490px }
	#top_slider .info-slider-wrapper.arrows .info-slider { margin: 0 10px }
	
	/* Arrow styling */
	
#top_slider .coda-nav-left, #top_slider .coda-nav-right { float: left; margin-top:45px; }
	
#top_slider .coda-nav-left a, .coda-nav-right a {
   background-repeat: no-repeat;
   background-position:center center;
   text-indent: -9999em;
   width: 30px;
   height:30px;
   display: block;
}

#top_slider .coda-nav-left a {
background-image: url(../images/top_slide_left.png);
}
	  
#top_slider .coda-nav-left a:hover {
background-image: url(../images/top_slide_left-hover.png);  
}

#top_slider .coda-nav-right a {
 background-image: url(../images/top_slide_right.png);
}
	  
#top_slider .coda-nav-right a:hover {
   background-image: url(../images/top_slide_right-hover.png);
}

	/* Panel padding */
	#top_slider .info-slider .panel-wrapper { }
	
	/* Preloader */
	#top_slider .info-slider p.loading { padding: 20px; text-align: center }

	/* Tabbed nav */
	
   #top_slider .coda-nav ul {
   height:30px;
   width:527px;
   margin-bottom: 20px;
   }
   
   #top_slider .coda-nav ul li { display: inline }
	
   #top_slider .coda-nav ul li a {	
   width: 175px;
   text-indent: -9999em;
   height: 28px;
   display: block;
   float: left;
   background-position: center center;
   background-repeat: no-repeat;
   margin:0 7px;
   }
   
   	#top_slider .coda-nav ul li a.current, #top_slider .coda-nav ul li a:hover {
   	border-bottom: 1px #D6C695 solid;
   	}

   #top_slider .coda-nav ul li.tab1 a{
   background-image: url(../images/top_nav_introduction.png);
   width:125px;
}

   #top_slider .coda-nav ul li.tab2 a{
   background-image: url(../images/top_nav_design.png);
   width: 160px;
}

   #top_slider .coda-nav ul li.tab3 a{
   background-image: url(../images/top_nav_webs.png);
   width: 135px;
}

	/* Miscellaneous */
	#top_slider .info-slider-wrapper { clear: both; overflow: auto }
	#top_slider .info-slider { float: left; overflow: hidden; position: relative }
	#top_slider .info-slider .panel { display: block; float: left }
	#top_slider .info-slider .panel-container { position: relative }
	.panel h2.title { margin-bottom: 10px }

/*** Showcase slider ***/

/*Force colorbox popup into certain size - mainly to prevent display errors in IE */
#cboxLoadedContent {
	width: 720px;
	height: 600px
}

#showcase_slider{ margin:-60px auto 30px; width:560px; }

.panel h2.title { margin-bottom: 10px }
	
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
#showcase_slider .showcase-slider-no-js .showcase-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
/* Change the width of the entire slider (without dynamic arrows) */
#showcase_slider .showcase-slider, .showcase-slider .panel { width: 410px } 
	
/* Change margin and width of the slider (with dynamic arrows) */
#showcase_slider .showcase-slider-wrapper.arrows .showcase-slider, .showcase-slider-wrapper.arrows .showcase-slider .panel { width: 470px; height:360px; } /*add slide panel padding*/
.showcase-slider-wrapper.arrows .showcase-slider { margin: 0 40px }
	
/* Arrow styling */
	
#showcase_slider .coda-nav-left, #showcase_slider .coda-nav-right { float: left; margin-top:115px; }
		
#showcase_slider .coda-nav-left a, #showcase_slider .coda-nav-right a {
   background-repeat: no-repeat;
   background-position:center center;
   text-indent: -9999em;
   width: 45px;
   height:75px;
   display: block;
}

#showcase_slider .coda-nav-left a {
background-image: url(../images/showcase_nav_left.png);
}
	  
#showcase_slider .coda-nav-left a:hover {
background-image: url(../images/showcase_nav_left-hover.png);  
}

#showcase_slider .coda-nav-right a {
 background-image: url(../images/showcase_nav_right.png);
}
	  
#showcase_slider .coda-nav-right a:hover {
   background-image: url(../images/showcase_nav_right-hover.png);
}
	
/* Tab nav */
#showcase_slider .coda-nav ul li a.current { background: #39c }
			
/* Preloader */
#showcase_slider .showcase-slider p.loading { padding: 20px; text-align: center }


/* Miscellaneous */
#showcase_slider .showcase-slider-wrapper { clear:both; overflow:auto;}
#showcase_slider .showcase-slider {
 float: left;
 overflow: hidden;
 position: relative;
 margin: auto;
 width: 410px;
 }
 #showcase_slider .showcase-slider .panel-wrapper {padding: 0 30px;}
#showcase_slider .showcase-slider .panel { display: block; float: left }
#showcase_slider .showcase-slider .panel-container { position: relative }

#showcase_slider .picture-frame {
   position: relative;
}

#showcase_slider .picture-frame span.overlay {
   background: url(../images/showcase_img_overlay.png);
   background-repeat: no-repeat;
   position: absolute;
   top: -2px;
   left: 23px;
   display: block;
   width:425px;
   height:359px;
}

#showcase_slider .picture-frame span.award {
   background: url(../images/award-small.png);
   background-repeat: no-repeat;
   position: absolute;
   top: 225px;
   left: -5px;
   display: block;
   width: 135px;
   height: 135px;
}	

/*** Portfolio ***/
ul#portfolio_grid {
   overflow: hidden;
   margin-bottom:30px;
}	
ul#portfolio_grid img {
   width: 264px;
   border:1px solid #000000;
}

ul#portfolio_grid li {
   float: left;
   padding:20px 10px 0;
}

form#contact {
   -moz-border-radius:5px;
   -webkit-border-radius: 5px;
   background-color:#D6C695;
   border:3px solid #827756;
   font-weight:bold;
   margin:30px 0;
   padding:20px;
   color:#412E28;
   width: 50%;
   margin: 0 auto 30px;
}

form#contact input, form#contact textarea {
   margin:10px 0 20px;
   font-size:1.1em;
   font-family: helvetica, arial, sans-sherif;
   
}

form#contact textarea{
   width:425px;
}

form#contact .submit {
   font-size: 0.9em;
   margin:0;
}

form#contact .required {
   color: #B3204D;
}

label.error { 
   color:#B3204D;
   display:block;
   font-size:0.8em;
   margin-bottom:15px;
   margin-top:-15px;
  }
  
.thanks.message {
   -moz-border-radius:5px;
   -webkit-border-radius: 5px;
   background-color:#D6C695;
   color:#412E28;
   font-size:1.2em;
   font-weight:bold;
   margin:50px auto;
   padding:20px;
   text-align:center;
   width:75%;
}