/*
Theme Name:maystein v5 mit tag filter und 3er spalte im portfolio
*/
/* ----------------------------------------------- [ * ] */
@import url(css/grid-900.css); 


*{margin:0; padding:0}

.boxgrid{margin-top: -180px; width:288px; height:180px; float:left; /* background:#161613; *//* border:solid 2px #8399AF; */overflow:hidden; position: absolute; cursor:pointer; cursor:hand}

.boxcaption{float:left; position:absolute; background:#000000; height:190px; width:244px; opacity:0; /* For IE 5-7 */filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* For IE 8 */-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; padding-left:24px; padding-right:20px}

/* -------------------------------- [ General Elements ] */
body{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; font-size:12px; /*background:transparent url(images/grid-900.gif) repeat-y top center; */background:#f4f4f4; color:#1d1d1d}

hr{display:none}

img{vertical-align:middle; border:0}

h1, h2, h3, h4, h5, h6, headline_twitter, headline_news{/*padding-left:8px; padding-right:8px; */color:#000}

h1{margin-bottom:1em; font-size:20px; line-height:22px}

h2{margin-top:58px; margin-bottom:0em; font-size:16px; line-height:20px}

h3{margin-top:32px; margin-bottom:0em; font-size:16px; line-height:20px; margin-left:-1px}

h4{margin-top:32px; margin-bottom:0em; font-size:16px; line-height:20px; margin-left:-1px}

h5{margin-bottom:0px; margin-top:32px; font-size:16px; line-height:20px; margin-left:-1px}

h6{margin-bottom:0px; margin-top:32px; font-size:16px; line-height:20px; margin-left:-1px}

headline_twitter{margin-left: 38px; margin-top:32px; margin-bottom:12px; font-size:16px; line-height:20px; margin-left:-1px}

headline_news{margin-top:32px; margin-bottom:12px; font-size:16px; line-height:20px; margin-left:-1px}



/* competence_list */

ul.competence_list
{
padding-bottom: 30px;
}

.competence_list li
{
list-style: none;
font-family: Georgia;
font-style:italic;
font-size: 13px !important;
line-height: 20px;
}

.competence_list_header
{
font-weight: bold;
padding-bottom: 6px;
}





p{margin-bottom:1em; /*padding-left:8px; padding-right:8px; */font-size:12px; line-height:20px}

p.kundeninfo{font-family:Georgia; font-style:italic;  color:#777; font-size:13px; line-height:20px; margin-top:96px}
p.kundeninfo a{font-family:Georgia; font-style:italic;  color:#777; font-size:13px; line-height:20px;}
p.kundeninfo a:hover {color:#FF0050}
p.info {font-family:Georgia; font-style:italic;  color:#777; font-size:13px; line-height:20px;}

p.antiqua_kursiv{font-family:Georgia; font-style:italic; font-size:13px}

a{text-decoration:none; border-bottom:1px dotted #aaaaaa; font-weight:normal; color:#1D1D1D}



a:hover{color:#FF0050}

acronym{border-bottom:1px dotted #eee}

/* ----------------------------------------- [ Wrapper ] */
#wrapper{width:912px; margin:0 auto; margin-top:24px; margin-bottom:300px; overflow:hidden}

/* ----------------------------------------- [ Footer ] */
#footer
{margin-bottom:400px;}

.footer-impressum a
{
float:right;
font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif;
font-size:11px;
text-decoration: none;
border-bottom:none;
color:#908F8E;
}

.footer-impressum a:hover
{
color:#ff0050;
}

.footer-social a
{
float:left;
font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif;
font-size:11px;
text-decoration: none;
border-bottom:none;
color:#908F8E;
}

.footer-social a:hover
{
color:#ff0050;
}






/* ---------------------------------------- [ Main Nav ] */
#main_navigation{overflow:hidden; float:right}

#main_navigation ul{float:left; font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; font-size:11px; letter-spacing:0; line-height:13px; list-style-type:none; margin:0; padding:0}

#main_navigation li.page_item{margin-right:12px; float:none}

#main_navigation li{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; display:block; padding-left:0; width:132px}

#main_navigation li a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; display:block; font-weight:normal; margin-bottom:4px; margin-left:0; padding-bottom:1px; padding-left:24px; text-decoration:none; width:132px; color:#908F8E; border: none;}

#main_navigation li a:hover{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000 none repeat scroll 0 0; color:#FFF}

#main_navigation .current_page_item a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000 none repeat scroll 0 0; color:#FFF; border: none;}

#main_navigation .current-cat a{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000 none repeat scroll 0 0; color:#FFF; border: none;}

a.active_category{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000 none repeat scroll 0 0 !important; color:#FFF !important}

/* ------------------------------------------ [ Content ] */
#content{overflow:hidden; margin-top:84px; margin-bottom:0px}

#news {padding-top:84px; margin-bottom:0px; background-image: url(http://www.maystein.de/wp-content/themes/maystein/images/i_twitter_headline_bg.gif); background-repeat: no-repeat; background-position: 0px 72px;}

ul.nav{margin:0 0 0em 0; list-style-type:none; text-align:left}

.nav li{border-bottom:1px dotted #BBB; font-size:11px; line-height:16px; margin:0; padding:17px 36px}

.nav li:hover{background-color:#fff}

ul.nav li:last{border-bottom:0px dotted #bbb}


/* ----------------------------------------- [ category portfolio ] */

.thumbnail-caption{color: #1D1D1D; margin-top:128px;}

#thumbnail-caption img{margin-left:-24px !important; margin-top: -176px;}

img#thumbnail-caption-sticky{margin-left:-2px !important; margin-top:-150px; position:absolute !important}

img.thumbnail-caption-sticky{margin-top:-100px}

/* portfolio - projekt slideshow */
/*preload classes*/ 
.svw{min-width:912px; min-height:358px; background:#fff}

.svw ul{position:relative; left:-999em}

.thumbnail-list{overflow:hidden; list-style:none}

.thumbnails{float:left; margin-bottom:24px; width: 288px; overflow: hidden;}

#portfolio-project-caption
{
height: 72px;
padding-top: 6px;
padding-left: 0px;
padding-right: 0px;
padding-top:12px
}

#thumbnail-caption-content p
{
font-size:11px;
line-height:16px;
/* color: #908F8E; */
color: #777777;
}

#portfolio-project-caption-client p
{
font-weight: normal;
text-transform: uppercase;
font-size: 13px;
line-height:20px;
margin-bottom: 0px;
color: #ffffff;
}



/* ----------------------------------------- [ projekt post - client meta ] */
.client-signet{text-align:center; min-height:93px; vertical-align:bottom}

#client-meta a:link, a:visited{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; -moz-border-radius-bottomleft:2px; -moz-border-radius-bottomright:2px; -moz-border-radius-topleft:2px; -moz-border-radius-topright:2px; background:transparent none repeat scroll 0 0; color:#666; display:inline-block; float:none; font-weight:normal; line-height:15px; border: none;}

#client-meta a:hover{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; -moz-border-radius-bottomleft:1px; -moz-border-radius-bottomright:1px; -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px; background:#ff0050 none repeat scroll 0 0; color:#fff; display:inline-block; float:none; font-weight:normal}

#client-meta p{color:#666; font-weight:normal; font-size:11px; margin-bottom:0}

#client-meta strong{color:#1D1D1D}

#portfolio-navigation-bottom{margin-top:72px; /* border-left:1px dotted #BBB;  *//* border-right:1px dotted #BBB; */min-height:100px; padding-top:24px; padding-bottom:24px}

#portfolio-navigation-bottom:hover{background:#fff}

#portfolio-navigation-bottom-projectselection{padding-left:36px; padding-right:36px; margin-bottom:30px}

#portfolio-navigation-bottom-projectselection a:link{font-weight:normal; font-size:11px; text-transform:none; background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_overview.gif); background-position:2px 2px; background-repeat:no-repeat; padding-left:18px; color:#666; line-height:15px; display:inline-block; border: none;}

#portfolio-navigation-bottom-projectselection a:visited{font-weight:normal; font-size:11px; text-transform:none; background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_overview.gif); background-position:2px 2px; background-repeat:no-repeat; padding-left:18px; color:#666; line-height:15px; display:inline-block; border: none;}

#portfolio-navigation-bottom-projectselection a:hover{background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_overview.gif); background-position:2px -11px; background-repeat:no-repeat; color:#fff; padding-right:3px}

#portfolio-navigation-bottom-description{padding-left:36px; padding-right:36px}

#portfolio-navigation-bottom-description p{font-weight:bold; font-size:11px; text-transform:uppercase; margin-bottom:0px}

#portfolio-navigation-bottom-selection{margin-top:6px; /* background:#000; */text-align:left; padding-left:36px; padding-right:36px}

#portfolio-navigation-bottom-selection p.portfolio-navigation-bottom-selection-prev{margin-bottom:0px !important}

#portfolio-navigation-bottom-selection p.portfolio-navigation-bottom-selection-next{margin-bottom:0px !important}

/* tweak für den caps style von wp-typography */
#portfolio-navigation-bottom-selection p.portfolio-navigation-bottom-selection-prev .caps{font-size:100%}

#portfolio-navigation-bottom-selection p.portfolio-navigation-bottom-selection-next .caps{font-size:100%}

#portfolio-navigation-bottom-selection .portfolio-navigation-bottom-selection-prev a{background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_client_prev.gif); background-position:left 2px; background-repeat:no-repeat; font-size:11px; padding-left:18px}

#portfolio-navigation-bottom-selection .portfolio-navigation-bottom-selection-next a{background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_client_next.gif); background-position:left 2px; background-repeat:no-repeat; font-size:11px; padding-left:18px}

#portfolio-navigation-bottom-selection .portfolio-navigation-bottom-selection-next a:hover{background-position:0px -11px; padding-right:3px}

#portfolio-navigation-bottom-selection .portfolio-navigation-bottom-selection-prev a:hover{background-position:0px -11px; padding-right:3px}

/* ---------------------- [ wp required classes ] */
.categories{}
.cat-item{}
.current-cat{}
.current-cat-parent{}
.pagenav{}
.page_item{}
.current_page_item{}
.current_page_parent{}
.widget{}
.widget_text{}
.blogroll{}
.linkcat{}

 
/*core classes*/ 
.stripViewer{ position:relative; overflow:hidden;  border:0px solid #f00;  margin:0 0 1px 0; cursor:pointer}

.stripViewer ul{/* this is your UL of images */ margin:0; padding:0; position:relative; left:0; top:0; width:1%; list-style-type:none}

.stripViewer ul li{ float:left}

.stripTransmitter{overflow:hidden; width:1%}

.stripTransmitter ul{margin:0; padding:0; position:relative; list-style-type:none; float:left; margin-top:8px; margin-left:150px}

.stripTransmitter ul li{width:15px; float:left; margin:0 1px 1px 0}

.stripTransmitter a{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:center; color:#666; text-decoration:none; display:block; font-size:9px; font-weight:bold; width:15px; line-height:17px; vertical-align:middle; padding-top:1px; border: none;}

.stripTransmitter a.current{ color:#fff; /*  background:#000;  -moz-border-radius:8px; */background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_slideshow_navi_button_bg.gif); background-repeat:no-repeat; background-position:-3px 0; font-weight:bold; border: none;}

.stripTransmitter a:hover{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; color:#fff; background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_slideshow_navi_button_bg.gif); background-repeat:no-repeat; background-position:-3px -23px; font-weight:bold; border: none;}

 
/* projektinfo button - bottom of slideshow */
#portfolio-navigation-projectinfo{margin-top:-21px; float:left}

#portfolio-navigation-projectinfo a{font-weight:normal; font-size:11px; text-transform:none; background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_info.gif); background-position:left 2px; background-repeat:no-repeat; padding-left:18px; color:#666; border: none;}

#portfolio-navigation-projectinfo a:hover{font-weight:normal; font-size:11px; text-transform:none; background:#ff0050; background-image:url(http://www.maystein.de/wp-content/themes/maystein/images/i_button_portfolio_info.gif); background-position:left -11px; background-repeat:no-repeat; padding-left:18px; padding-right:3px; color:#fff; border: none;; /*  background:#ff0050;  */}

/* begin - prevnext project navigation  */
#portfolio-navigation-previousnext-project{margin-top:-21px; float:right}

.prevnext-description a {padding-left: 3px; padding-right: 3px; font-weight:normal; font-size:11px; text-transform:none; color:#666; border: none}
.prevnext-description a:hover {background-color:#FF0050; color: #FFFFFF}

.prevnext li{list-style-image:none; list-style:none}
.prevnext{margin:0px 0; padding:0; text-align:right}
.prevnext li{margin:0; padding:0 00px; display:inline-block}
.prevnext .next a{padding:0 7px 0 7px}
.prevnext .prev a{padding:0 7px 0 7px}
.prevnext .next a{background:url(images/i_button_portfolio_next_project.gif) no-repeat top right; background-position:right -1px; margin-left:-7px !important; border: none;}
.prevnext .prev a{background:url(images/i_button_portfolio_previous_project.gif) no-repeat top left; background-position:left -1px; margin-right:-6px !important; border: none;}
.prevnext .next a:hover{background:url(images/i_button_portfolio_next_project.gif) no-repeat top right; background-position:right -19px}
.prevnext .prev a:hover{background:url(images/i_button_portfolio_previous_project.gif) no-repeat top left; background-position:left -19px}

/* end - prevnext project navigation  */
#client-list table{table-layout:auto; width:912px; margin:1em auto; border-collapse:collapse}

#client-list th{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:center; color:#000;  font-size:10px; font-weight:normal; line-height:16px; border-bottom:1px dotted #bbb; padding-bottom:18px}

#client-list th.col-kunde{text-align:left; padding-left:12px; width:33%}

#client-list th.col-branche{text-align:left; width:33%}

#client-list td.col-kunde{text-align:left; padding-left:12px; width:33%}

#client-list td.col-branche{text-align:left; width:33%; padding-left:0px}

#client-list th.col-online, th.col-corporatedesign, th.col-print, th.col-illustration, th.col-fotografie{text-align:center; padding-left:12px}

#client-list td{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:center; color:#1D1D1D;  font-size:12px; font-weight:normal; line-height:16px; border-bottom:1px dotted #bbb; padding-left:12px}

#client-list th.col-client{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:left; color:#1D1D1D;  font-size:10px; font-weight:bold; line-height:16px; border-bottom:1px dotted #bbb; padding-top:6px; padding-bottom:6px; padding-left:12px}

#client-list td.col-branche{text-align:left; color:#1D1D1D;  font-size:10px}

/* agency list */
#agency-list table{width:912px; margin:1em auto; border-collapse:collapse}

#agency-list th{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:center; color:#000;  font-size:10px; font-weight:normal; line-height:16px; border-bottom:1px dotted #bbb; padding-bottom:18px}

#agency-list th.col-client{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:left; color:#1D1D1D;  font-size:10px; font-weight:bold; line-height:16px; border-bottom:1px dotted #bbb; padding-top:6px; padding-bottom:6px; padding-left:12px}

#agency-list th.col-kunde{text-align:left; padding-left:12px; width:22%}

#agency-list th.col-branche{text-align:left; width:22%}

#agency-list th.col-agentur{text-align:left; width:22%}

#agency-list th.col-online, th.col-corporatedesign, th.col-print, th.col-illustration, th.col-fotografie{text-align:center; padding-left:12px}

#agency-list td{font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; text-align:center; color:#1D1D1D;  font-size:12px; font-weight:normal; line-height:16px; border-bottom:1px dotted #bbb; padding-left:12px}

#agency-list td.col-agency{color:#1D1D1D; font-size:10px; text-align:left; padding-left:0}

#agency-list td.col-branche{color:#1D1D1D; font-size:10px; text-align:left; padding-left:0}

.displaynone{display: none}






/*
    anythingSlider v1.0
    
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
*/


#portfolio-navigation-projectinfo  {
float:left;
margin-top:8px;
}

#portfolio-navigation-previousnext-project  {
float: right;
margin-top:8px;
}

.anythingSlider                         { width: 912px; height: 358px; position: relative; margin: 0 auto 0px; }
.anythingSlider .wrapper                { width: 912px; overflow: auto; height: 358px; margin: 0 0px; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper ul             { width: 32000px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 0px solid #e0a213; border-bottom: 0px solid #e0a213; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0; height: 358px; width: 912px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 358px; width: 400px; background: none; text-indent: -9999px; position: absolute; top: 0px; cursor: pointer; border: none;}
.anythingSlider .forward                { background-position: 0 0; right: 0px; }
.anythingSlider .back                   { background-position: 0px 0; left: 0px; }
/*  .anythingSlider .forward:hover          { background-position: 0 -200px; }  */
.anythingSlider .back:hover             { background: url(http://www.maystein.de/wp-content/themes/maystein/images/b_slider_left-right.png) no-repeat -120px 0; }

.anythingSlider .forward:hover          { background: url(http://www.maystein.de/wp-content/themes/maystein/images/b_slider_left-right.png) no-repeat -416px 0; }


#thumbNav                               { position: relative; top: 368px; text-align: left; margin:0px 0 0 150px; width: 500px;}

/*
#thumbNav a                             { color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
*/

#thumbNav a                             {
border:medium none;
color:#666666;
display:inline;
font-family:"Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif;
font-size:9px;
font-weight:bold;
line-height:16px;
padding:0 6px;
text-align:center;
text-decoration:none;
vertical-align: baseline;
width:0;
border-bottom: 0px;
}

#thumbNav a:hover
{
/* background-image:url("http://www.maystein.de/wp-content/themes/maystein/images/i_slideshow_navi_button_bg.gif"); */
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background:none repeat scroll 0 0 #FF0050;
border:medium none;
color:#FFFFFF;
font-weight:normal;
}

#thumbNav a.cur
{
/* background-image:url("http://www.maystein.de/wp-content/themes/maystein/images/i_slideshow_navi_button_bg.gif"); */
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background:none repeat scroll 0 0 #000000;
border:medium none;
color:#FFFFFF;
font-weight:normal;
}

#start-stop                             { display: none; background: green; background-image: url(../slidertest_images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { display: none; background-color: red; }
#start-stop:hover                       { background-image: none; }

/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }




/* tooltips */
#tooltip
{
	position:absolute;
	background: #ff0050;
	padding:3px 8px;
	font-size: 11px;
	line-height: 12px;
	color:#ffffff;
	display:none;
}

#screenshot
{
	position:absolute;
	border:0px solid #ccc;
	background:#333;
	padding:0px;
	display:none;
	color:#fff;
} /* END - tooltips */


/* mixed */	
.rounded-corners
{
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;	
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.transparency_50
{
	-moz-opacity:0.5 !important;
	-khtml-opacity: 0.5 !important;
	filter:alpha(opacity=50) !important;  // for IE5-7
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;  // for IE8
	opacity: 0.5 !important; // for all other browsers
}




/* PORTFOLIO FILTER  */

#portfolio_filter_container
{
margin-bottom:18px;
text-align:right;
}



ul.filters
{
}

li.portfolio_filter_caption
{
display:inline-table;
margin-right:24px;
color: #908F8E;
font-size: 11px;
}

li.portfolio_filter
{
display:inline-table;
margin-right:16px;
}

li:last-child.portfolio_filter 
{
display:inline-table;
margin-right:0px;
}



.ibutton-container {
  position: relative;
  float:left;
  height: 11px;
  cursor: pointer;
  overflow: hidden;
	/* set max width to that of sprite */
	max-width: 400px;
	/* prevent text selection */
	-khtml-user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-moz-user-focus: ignore; 
	-moz-user-input: disabled;
	/* set default width based on ON/OFF labels */
	width: 23px;
	margin-top:2px; /* custom */
}

.ibutton-container input {
  position: absolute;
	top: 0;
	left: 0;

	/* hide the element */
	filter:alpha(opacity=0);
	-moz-opacity: 0.0; 
	opacity: 0.0;

	/* allow checking of input if visible */
	-moz-user-input: enabled  !important;
}

.ibutton-handle {
  display: block;
  height: 11px;
  cursor: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent url(images/ibutton-slider-default.png) no-repeat scroll 0 -11px;
  z-index: 3;
  padding-left: 3px;
	/* set default width based on ON/OFF labels */
	width: 5px; /* size off handle */
}

.ibutton-handle-right {
  height: 100%;
  width: 100%;
  padding-right: 2px;
  background: transparent url(images/ibutton-slider-default.png) no-repeat scroll 100% -11px;
  z-index: 3; 
}

.ibutton-handle-middle {
  height: 100%;
  width: 100%;
  background: transparent url(images/ibutton-slider-default.png) no-repeat scroll 50% -11px;
  z-index: 3; 
}

div.ibutton-label-on, div.ibutton-label-off {
  white-space: nowrap;
  font-size: 17px;
  line-height: 17px;
  font-weight: bold;
  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  cursor: inherit;
  display: block;
  height: 22px;
  position: absolute;
  width: auto;
  top: 0;
  padding-top: 5px;
  overflow: hidden; 
  background: transparent url(images/ibutton-slider-default.png) no-repeat scroll 0 0;
}

div.ibutton-label-on {
  color: #fff;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
  left: 0;
  padding-top: 5px;
  z-index: 1; 
}

div.ibutton-label-on span {
  padding-left: 8px;
}

div.ibutton-label-off {
  color: #7c7c7c;
  background-position: 100% 0;
  text-shadow: 0 -1px 2px rgba(153, 153, 153, 0.4);
  text-align: right;
  right: 0;
	/* the off label needs to near the left edge (ideally just 5px away) 
	 * it just needs to be close enough that it won't show under the handle if dragged to the left  
	 */
	width: 88%;  /* custom / original 95% */
}

div.ibutton-label-off span {
  padding-right: 8px; 
}

/* create an outline when button gets focus via keyboard */
.ibutton-container label {
	cursor: inherit;
	border: 1px dotted transparent;
	display: none; /* custom */
}

.ibutton-focus label {
	/* we must use border, since outline doesn't work in IE */
	border: 1px dotted #666 !important;
}

.ibutton-focus div.ibutton-label-on span label {
	/* use white for more contrast */
	border-color: #fff !important;
}

/* add padding to right/left so that text gets clipped before absolute edge */
.ibutton-padding-left, .ibutton-padding-right {
	position: absolute; 
	top: 4px;
	z-index: 2; 
	/* custom - original / background: transparent url(images/ibutton-slider-default.png) no-repeat scroll 0 -2px; */
	width: 5px;
	height: 1px;
}
	
.ibutton-padding-left {
	left: 0; 
}

.ibutton-padding-right {
	right: 0; 
	background-position: 100% -4px;
}

/* change the styles of the handle when being dragged */
.ibutton-active-handle .ibutton-handle {
	background-position: 0 -22px;
}

.ibutton-active-handle .ibutton-handle-right {
	background-position: 100% -22px;
}

.ibutton-active-handle .ibutton-handle-middle {
	background-position: 50% -22px;
}

/* styles to use when the button is disabled */
.ibutton-disabled {
	cursor: not-allowed !important; /* cursor options: default or not-allowed */
}

.ibutton-disabled .ibutton-handle {
	background-position: 0 -81px;
}

.ibutton-disabled .ibutton-handle-right {
	background-position: 100% -81px;
}

.ibutton-disabled .ibutton-handle-middle {
	background-position: 50% -81px;
}

.ibutton-disabled div.ibutton-label-on {
	background-position: 0 -54px;
}

.ibutton-disabled div.ibutton-label-off {
	background-position: 100% -54px;
}

.ibutton-disabled .ibutton-padding-left {
	background-position: 0 -54px;
}

.ibutton-disabled .ibutton-padding-right {
	background-position: 100% -54px;
}

.ibutton-disabled div.ibutton-label-on {
	color: #fff;
}

.ibutton-disabled div.ibutton-label-off {
	color: #cbcbcb;
}


/* custom */
#iphone_button_label
{
font-size: 11px;
line-height: 13px;
color: #908F8E;
margin-left:4px;
cursor: pointer;
}





#clickable-div a
{
background:none repeat scroll 0 0;
display:block;
height:180px;
margin-left:-24px;
margin-top:-170px;
padding:0;
text-decoration:none;
width:288px;
}


a.portfolio-overview-client-link
{
border: none;
color:#FFFFFF;
text-decoration:none;
}

.grey
{
color:#666666 !important;
}