/*
Copyright FRDR.net
Colin Dearing FRDR.net 20100610
*/

/* reset margin padding */

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

/* WRAPPER */
.filter ul {
  margin: 15px;
}
body,html{
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  color: #EEE;
  background: #000;
}
h1,h2,h3,h4 {
  font-family: Helvetica, sans-serif;
  color: white;
  font-weight: normal;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

h3 {
  font-size: 12px;
}
h4 {
  font-size: 11px;
}
a{
  color: #FFBA61;
  outline: none;
  text-decoration: none;
}

a:hover{
  color: #FFCF62;
  text-decoration: underline;
}

#background{
  position:relative;
   top:0px;
   left:0px;          /* or whatever value is good for u */
   z-index: 1;
   float:left;
   width: 100%;
}

.bg1{
  min-height:100%;
   background: url('/static/images/bg/theme/kaikoura_photography.jpg') center top no-repeat #000;
}

.bg2{
    min-height:100%;
   background: url('/static/images/bg/theme/nurburgring_photography.jpg') center top no-repeat #000;
}

#nav{
  float: left;
  position: relative;
  margin: 15px 0;
  height: 64px;
  width: 100%;
  background: #017600;
}

#logo{
  float:left;
  height:61px;
  margin-left:10px;
  position:relative;
  width:200px;
  z-index:1;
}

#logo span{
  position: absolute;
  top: 45px;
  left: 43px;
  font-family: Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #FFF;
  letter-spacing: -0.5px;
  text-shadow: -1px 1px #000;
}

#logo span > a, #logo span > a:hover{
  color: white;
  text-decoration: none;
}

#menu{
  height: 64px;
  left: 200px;
  position: absolute;
  overflow: hidden;
}


#menu_wrapper{
  height: 64px;
  float: left;
  width: 1000px;
  position: absolute;
}

#menu li{
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  line-height: 70px;
  float: left;
  list-style: none;
  text-transform: uppercase;
  color: #FFF;
  margin:0 8px;
  height: 64px;
  background:url("/static/images/bg/nav_left.png") repeat scroll top left transparent;
}

#menu a{
  display: block;
  cursor: pointer;
  color: white;
  height: 64px;
  text-decoration:none;
  padding-right: 5px;
}

#menu span{
  display: block;
  height: 64px;
  vertical-align: middle;
  padding-left: 5px;
  background:url("/static/images/bg/nav_right.png") no-repeat scroll top right transparent;
}

#menu .selected{
  background:url("/static/images/bg/nav_right.png") repeat scroll bottom right transparent;
  padding-right: 5px;
}

#menu .selected span{
  background:url("/static/images/bg/nav_left.png") no-repeat scroll bottom left transparent;
  padding-left: 5px;
}

#ticker{
  width: 993px;
  height: 33px;
  float: left;
  margin-left: 10px;
  position: relative;
}

#ticker .ticker-left{
  float: left;
  height: 33px;
  width: 20px;
  background: url('/static/images/bg/header_ticker_left.png') no-repeat;
}
#ticker .ticker-main{
  float: left;
  line-height: 33px;
  height: 33px;
  width: 830px;
  background: url('/static/images/bg/header_ticker_rep.png') repeat-x;
}
#ticker img{
  float: left;
  margin: 4px 10px 0 0;
}
#ticker .frdr_net-ticker-right{
  float: right;
  height: 33px;
  line-height: 33px;
  font-weight: bold;
  text-align: center;
  width: 143px;
  background: url('/static/images/bg/frdr_news_highlight.png') no-repeat;
}

#ticker .twitter-ticker-right{
  float: right;
  height: 33px;
  line-height: 33px;
  font-weight: bold;
  text-align: center;
  width: 143px;
  background: url('/static/images/bg/twitter_news_highlight.png') no-repeat;
}

#footer_spacing{
  height:60px;
  position:relative;
  width: 100%;
  float: left;
}
#footer_wrapper{
  bottom:0px;
  position:fixed;
  width: 100%;
  height: 90px;
  z-index: 3;
}
#footer_wrapper div{
  color:#FFFFFF;
  font-family:Helvetica,sans-serif;
  font-size:12px;
  padding:0 10px;
  text-shadow:-2px 2px #000000;
}
#footer{
  height: 65px;
  position: absolute;
  border-top: #595959 1px solid;
  background: url('/static/images/bg/footer.png') repeat-x #000;
  width: 100%;
  bottom:0px;
}
#picture-info{
  background: #111;
  width: 400px;
  height: 25px;
  float: left;
  border-right:1px dashed #555555;
  border-top:1px dashed #555555;
  line-height:25px;
  position: relative;
}
#footer_logos{
  border-right: 1px solid #595959;
  float: left;
  position: relative;
  height: 40px;
  width: 565px;
  margin-top: 10px;
  margin-left: 5px;
}

#adobe_footer_img{
  float: left;
  position: relative;
  width: 76px;
  height: 19px;
  margin: 10px;
}

#cpn_footer_img{
  float: left;
  position: relative;
  width: 64px;
  height: 18px;
  margin: 12px 10px;
}

#apple_mac_footer_img{
  float: left;
  position: relative;
  width: 24px;
  height: 28px;
  margin: 5px 10px;
}

#dell_servers_footer_img{
  float: left;
  position: relative;
  width: 34px;
  height: 34px;
  margin: 3px 10px;
}

#linux_footer_img{
  float: left;
  position: relative;
  width: 63px;
  height: 25px;
  margin: 7px 10px;
}

#microsoft_footer_img{
  float: left;
  position: relative;
  width: 79px;
  height: 14px;
  margin: 13px 10px;
}

#sagepay_footer_img{
  float: left;
  position: relative;
  width: 83px;
  height: 22px;
  margin: 11px 10px;
}

#footer_info{
  float:left;
  font-size:10px;
  height:20px;
  line-height:15px;
  margin-left:10px;
  margin-top:17px;
  position:relative;
}

#footer_info img{
  float: left;
  position: relative;
}

#footer_info span{
  color:#AAAAAA;
  float:left;
  font-size:11px;
  height:22px;
  line-height:11px;
  padding:3px 5px 0;
  position:relative;
}

/* main layout */

#page_content{
  width: 1010px;
  margin-left:10px;
  margin-bottom: 50px;
  float: left;
  position: relative;
}

#lh_page{
  float: left;
  width: 620px;
}

#rh_page_wrapper{
  float: left;
  width: 360px;
}

#rh_page{
  position: static;
}

/*BOX MODEL*/
.box {
  float: left;
  position: relative;
}

.box div{
  float: left;
  position: relative;
}

.box h1, h2, h3{
  float: left;
  padding: 10px 10px;
  font-family: Helvetica, sans-serif;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
}

.box h1{
  line-height: 18px;
  font-size: 16px;
}

.box h2{
  line-height: 14px;
  font-size: 12px;
}

.box span{
  float: left;
  padding: 10px 10px;
  line-height: 18px;
  font-family: Helvetica, sans-serif;
  color: white;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
}

.box hr{
  clear:both;
  background: url('/static/images/bg/horz_line.png') repeat-x;
  border: none;
  height:4px;
  margin:0 65px;
  padding: 0;
  outline: none;

}

.box .bright {
  background: url('/static/images/bg/horz_line_bright.png') repeat-x;
  border: none;
  height:4px;
  padding:5px;
  margin: 0;
  padding: 0;
}

.box strong{
  color: #FFBA61;
  font-weight: normal;
  text-decoration: none;
}
.box table{
  width: 100%;
  padding: 10px;
  border-spacing: 2px;
}
.box th{
  height: 20px;
  text-align: left;
  vertical-align: top;
}
.box table hr{
  height: 20px;
  background: url('/static/images/bg/horz_line.png') repeat-x center left;
  margin: 0;
}
.box table td img{
  padding: 0 3px;
}
.box .date{
  vertical-align: top;
  color: #aaa;
}

.box .features img{
  border: 4px solid #808080;
}

/* JQUERY TABS */
  
.scrollable {
	position:relative;
	overflow:hidden;
	width: 290px;
	height:225px;
}

.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
  height: 225px;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url('/static/images/features/arrow.png') no-repeat;
	display:block;
	width:23px;
	height:17px;
	float:left;
	margin:60px 5px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: -23px 0; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-23px -17px; }
a.right:active 	{ background-position:-23px -34px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:0px -17px; }
a.left:active  	{ background-position:0px -34px; }

/* up and down */
a.up, a.down		{ 
	background:url('/static/images/features/arrow.png') no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

#bg_buttons{
  position: absolute;
  width: 20px;
  left: 990px;
  top: 158px;
  z-index: 1;
}

#rh_menus{
  float:left;
  width: 360px;
  overflow: hidden;
}

a.bg-button {
	background:url('/static/images/bg/bg_button.png') no-repeat 0 -13px;
	display:block;
	width:23px;
	height:13px;
	float:left;
  margin: 2px;
	cursor:pointer;
	font-size:1px;
}
a:hover.bg-button{
	background:url('/static/images/bg/bg_button.png') no-repeat 0px 0px;
}
a.selected{
	background:url('/static/images/bg/bg_button.png') no-repeat 0px -26px;
}

.items {
	float:left;
  width: 300px;
}

.panel{
  display: block;
}
.items div .feature-image{
  float: left;
  position: relative;
  background: #000;
  width: 132px;
  opacity: .4;
}
.hover{
  float: left;
  position: relative;
  background: #000;
  width: 132px;
  opacity: 1;
}


.items .text h3{
  letter-spacing: -1px;
  font-size: 14px;
}

.items .text {
  float: left;
  background: #010101;
  width: 150px;
  height: 124px;
  padding: 4px;
}

/* INDEX */
.index-content{
  margin-left: 630px;
  width: 356px;
}

.home{
  width: 356px;
}

.home p{
  padding: 20px 20px;
  line-height: 14px;
}

.text p{
  padding: 5px 0px;
  font-size: 11px;
  clear:both;
}

.text i{
  display: block;
  font-size: 10px;
  font-family: georgia, serif;
  margin: 8px;
}

.home > .top{
  float: left;
  height: 35px;
  background: url('/static/images/bg/box/homepage_top.png') no-repeat;
  width: 356px;
}

.home .body{
  background: url('/static/images/bg/box/homepage_main.png') no-repeat;
  width: 356px;
}

.home .bottom{
  height: 1px;
  background: url('/static/images/bg/box/homepage_bottom.png') no-repeat;
  width: 356px;
  padding-bottom: 10px;
}

.highlight > .top{
  float: left;
  height: 35px;
  background: url('/static/images/bg/box/highlight_top.png') no-repeat;
  width: 356px;
}

.highlight .body{
  background: url('/static/images/bg/box/highlight_main.png') no-repeat;
  width: 356px;
}

.highlight .bottom{
  height: 1px;
  background: url('/static/images/bg/box/highlight_bottom.png') no-repeat;
  width: 356px;
  padding-bottom: 10px;
}

#featured{
  padding: 0 4px;
}

/* about */

.about {
  width: 610px;
  padding-right: 10px;
}

.about p{
  padding: 20px 20px;
  line-height: 14px;
}

.about > .top{
  float: left;
  height: 35px;
  background: url('/static/images/bg/box/main_top.png') no-repeat transparent;
  width: 630px;
}

.about > .top_wide{
  float: left;
  height: 35px;
  background: url('/static/images/bg/box/main_top_wide.png') no-repeat transparent;
  width: 630px;
}

.about .body{
  background: url('/static/images/bg/box/main_main.png') no-repeat transparent;
  width: 610px;
}

.about .bottom{
  height: 1px;
  background: url('/static/images/bg/box/main_bottom.png') no-repeat transparent;
  width: 630px;
  margin-bottom: 10px;
}

.arrow{
  background: url('/static/images/icons/arrow.png') no-repeat;
  width: 17px;
  height: 12px;
}
.arrow a{
  display: block;
  width: 17px;
  height: 12px;
}
/* root-index */

#title{
  margin-left: 40px;
  position: relative;
  float: left;
  padding: 5px;
}

/* root-gallery-shop */
/* the overlayed element */
.apple_overlay {
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#333; 
     
    width:800px;     
    min-height:200px; 
    border:1px solid #666;
    
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
  background-image:url('/static/images/close.png');
  position:absolute; right:-15px; top:-15px;
  cursor:pointer;
  height:35px;
  width:35px;
}

/* use a semi-transparent image for the overlay */ 
#overlay {
    background: #FFF;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    color:#000; 
    /*height:595px;*/
    padding: 10px;
} 
 
/* container for external content. uses vertical scrollbar, if needed */ 
.contentWrap { 
    /*height:605px; */
    overflow-y:auto; 
}

.tabs{
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
.tabs li{
  margin: 0;
  padding: 0;
  float: left;
}
.deselect{
  color: white;
  float: left;
  position: relative;
  display: block;
  padding: 0 5px;
  width: 4px;
  height: 13px;
  margin-left: 3px;
  position: relative;
  background:url('/static/images/bg/bg_button.png') no-repeat 0 -13px;
}

	/*background:url('/static/images/bg/bg_button.png') no-repeat 0 -13px;*/
	/*background:url('/static/images/bg/bg_button.png') no-repeat 0px 0px;*/
	/*background:url('/static/images/bg/bg_button.png') no-repeat 0px -26px;*/
.deselect a{
  display: none;
  border: none;
}
.deselect:hover{
  background:url('/static/images/bg/bg_button.png') no-repeat 0px 0px;
  border:none;
}

.current-tab {
  float: left;
  position: relative;
  display: block;
  padding: 0 5px;
  width: 4px;
  height: 13px;
  margin-left: 3px;
  position: relative;
  background:url('/static/images/bg/bg_button.png') no-repeat 0px -26px;
}
#pagination{
  float: right;
  position: relative;
  height: 40px;
  padding: 0;
  margin-left: 9px;
  right: 35px;
  z-index: 4;
}
.panes{
  float: left;
  margin: 20px 0 0 17px;
  padding: 0;
}
.portfolio-box{
  padding: 3px;
  float: left;
  color: #AAA;
  float: left;
  position: relative;
  background-color: #111;
}
.picture{
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding:3px;
}
.picture img{
  margin:2px;
  border: #444 1px dashed;
}
.picture p{
  margin: 5px;
}
.prev{
  float: left;
  position: relative;
}
.prev a{
  color: white;
  float: left;
  position: relative;
  display: block;
  width: 4px;
  height: 18px;
  width: 12px;
  margin-left: 3px;
  text-indent: 50em;
  overflow:hidden;
  position: relative;
  background:url('/static/images/bg/mini_arrow.png') no-repeat 0px 0px;
}
.prev a:hover{
  background:url('/static/images/bg/mini_arrow.png') no-repeat 0px -34px;
}
.prev a:active{
    background:url('/static/images/bg/mini_arrow.png') no-repeat 0px -17px;
}
.next{
  float: left;
  position: relative;
}
.next a{
  color: white;
  float: left;
  position: relative;
  display: block;
  width: 12px;
  height: 18px;
  margin-left: 3px;
  text-indent: 50em;
  overflow:hidden;
  position: relative;
  background:url('/static/images/bg/mini_arrow.png') no-repeat -12px 0px;
}
.next a:hover{
  background:url('/static/images/bg/mini_arrow.png') no-repeat -12px -34px;
}
.next a:active{
  background:url('/static/images/bg/mini_arrow.png') no-repeat -12px -17px;
}
.portfolio-title{
  width: 100%;
  padding: 3px;
  color: #AAA;
  text-align: center;
}
.portfolio-title em{
  font-size: 10px;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(/static/images/bg/tooltip_arrow.png);
	font-size:12px;
	height:120px;
	width:250px;
	padding:15px 25px;
  float: left;
  position: absolute;
	color:#fff;
  z-index: 3;
}

.tooltip > h1{
  font-size: 12px;
}


/* PHOTOGRAPHY */

.border img{
    margin: 3px;
    border: 4px solid #808080;
}

/* JQUERY TABS */
.photography_scrollable_wrapper{
  margin: 0 20px;
  padding: 10px 0;
}
.photography_scrollable {
	position:relative;
	overflow:hidden;
	width: 510px;
	height:125px;
}

.photography_scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/* this makes it possible to add next button beside scrollable */
.photography_scrollable {
	float:left;	
}

.items .photography-image{
  float: left;
  position: relative;
  background: #000;
  width: 170px;
  height: 123px;
}

.photography_scrollable {
	position:relative;
	overflow:hidden;
	width: 510px;
	height:125px;
}

.website_scrollable_wrapper{
  margin: 0 20px;
  padding: 10px 0;
}
.website_scrollable {
	position:relative;
	overflow:hidden;
	width: 510px;
	height:131px;
}
.website_scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/* this makes it possible to add next button beside scrollable */
.website_scrollable {
	float:left;	
}

.items .website-image{
  float: left;
  position: relative;
  background: #000;
  width: 124px;
  height: 124px;
    border: 4px solid #808080;
}
.items .website-feature-text{
  float: left;
  position: relative;
  background: #000;
  width: 386px;
  height: 132px;
}

.items .website-image{
  float: left;
  position: relative;
  background: #000;
  width: 124px;
  height: 124px;
}

/* contact form styling */
/* form style */
#quick_contact {
	padding:15px 20px; 
	color:#eee;
	width:315px;
	margin:0 auto;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
} 

/* nested fieldset */
#quick_contact fieldset {
	border:0;
	margin:0;
	padding:0;
}

/* typography */
#quick_contact h3 	{ color:#eee; margin-top:0px; }
#quick_contact p 	{ font-size:11px; }


/* input field */
#quick_contact input {
	border:1px solid #444;
	background-color:#666;
	padding:5px;
	color:#ddd;
	font-size:12px;
  margin: 2px;
	
	/* CSS3 spicing */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	text-shadow:1px 1px 1px #000;
}

#quick_contact input:focus 		{ color:#fff; background-color:#777; }
#quick_contact input:active 	{ background-color:#888; }


/* button */
#quick_contact button {
	outline:0;
	border:1px solid #666;	
}


/* error message */
.error {
	height:15px;
	background-color: #DA8683;
	font-size:11px;
	border:2px solid #DA0500;
	color:#FFF;
  font-weight: bold;
	margin:0 0 4px 4px;
	padding: 3px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
  z-index: 5;
}

/* field label */
label {
  width:100px;
  padding: 9px 0px;
	display:block;
	font-size:13px;
  float: left;
  font-weight: bold;
	color:#555;
}

.box span.error-highlight{
  color: #DA0500;
  float: left;
  font-size: 15px;
  font-family: "times", sans-serif;
}

button{
  margin: 5px;
  -moz-border-radius:10.2em 10.2em 10.2em 10.2em;
  -moz-box-shadow:0 0.1em 0.2em rgba(0, 0, 0, 0.5);
  background-color:#444;
  border-bottom:0.2em solid #666666;
  border-width:1px 1px 0.2em;
  color:#FFFFFF;
  cursor:pointer;
  font-size:1em;
  line-height:1;
  padding:0.3em 0.6em;
}

.portfolio-information{
  margin: 10px; width: 365px; float: left;
}
.portfolio-information p{
  padding: 5px;
}
.portfolio-testimonial{
  font-style: italic;
  font-family: Georgia, Gadget, sans-serif;
  padding: 10px;
  margin: 15px 5px;
  background: #000;
  border: #333 Dashed 1px;
}

.filtered-portfolio {
  list-style: none;
  padding: 5px;
  color: #999;
  clear:both;
}

.filtered-portfolio li{
  margin: 5px;
  padding: 5px;
  background: #111;
}

.filtered-portfolio em{
  font-size: 14px;
  color: #FFF;
  font-style: normal;
  clear: both;
}

.orange-box-filter{
  width: 594px;
  padding: 3px;
  margin:5px;
  background: #FF9900;
}

.orange-box-filter a, .orange-box-filter a:visited{
  color: #FFF;
  text-decoration: underline;
}

.orange-box-filter a:hover{
  text-decoration: none;
}