/**
*	Styles file for ClaraMaidment.com
*	Copyright (C) 2009 - Gabriel Hernandez Castellanos
* 	http://intentsolutions.co.uk
*/

/*----[ Defaults ]------*/
html { overflow-y:scroll; margin:0; padding:0; font-family: Trebuchet MS, Georgia, Arial, sans-serif; font-size:75%; color:rgb(42,42,42); background-color:white; /*background-color:rgb(32,32,32); */}
body { margin:0; padding:0; text-align:center; }
hr { clear:both; margin:0; padding:0; float:none; display:block; border:0px solid rgb(235,235,235); height:0px;}
a { text-decoration:none;}
a:hover, a:focus { text-decoration:underline; }

#page { text-align:left; width:968px; margin:0px auto;}
#header { margin-top:20px; }
#content {margin-top:40px; margin-bottom:20px; display:block; position:relative; }
#footer {margin:20px 0px 10px 0px; display:block; height:1%;}
#photo-container { width:auto; height:486px; background-color:#AAA7A4; display:block; }
#photo-container img {width:726px; height:486px;}
#display { position:relative; padding-top:20px;}
#display-nav { position:absolute; top:48%; width:100%; z-index:1000; height:25px;}
.display-arrow a { display:block; width:25px; height:25px; background:transparent url(../components/button_prev_next.png) no-repeat 0px 0px; text-indent:-99999px;}
.display-arrow .next { background-position:-25px 0px; }
.display-arrow .next:hover { background-position:-25px -25px; }
.display-arrow .prev { background-position:0px 0px; }
.display-arrow .prev:hover { background-position:0px -25px; }
.display-arrow.arrow-left { float:left; padding-left:10px; }
.display-arrow.arrow-right { float:right; padding-right:10px; }

.show-display-nav {border:5px red solid;}
#thumbnailpannel-trigger { border:1px solid black; position:absolute; z-index:1; width:auto; background-color:red; right:-25px; top:20px; width:50px; height:25px;}
#thumbnails {position:absolute; right:0px; width:150px; height:350px; background:silver; z-index:2;}
.photo-wrapper { background-color:#AAA7A4; display:block; width:auto; text-align:center; padding:10px; }
.pannel.hover {height:300px; width:150px;}

.logotipo { float:left; background: url(../components/logo_clara_maidment.png) no-repeat; width:206px; height:16px; display:block; overflow:hidden; text-indent: -9999px; margin-top:5px;}
.navigation { float:right; margin-top:5px;}
.navigation li, .navigation li a  { float:left; }
.navigation li { border-right:1px solid rgb(225,225,225); }
.navigation li a { padding:2px 10px 4px 10px; border-bottom:2px solid rgb(255,255,255); text-decoration:none;}
.column-left, .column-right, .column-left-double {float:left; margin-right:10px;}
.column-left { width:746px; }
.column-left-double { width:746px }
.column-right { float:right; width:130px; margin-right:0px; overflow:hidden; height:506px;}
.thumbnails { background-color:rgb(170,167,164); color:white; }
.thumbnails-list {padding:10px 10px 0px 10px;}
.thumbnails-list dt { color:rgb(240,240,240); text-indent:-9999px; height:0px;}
.thumbnails-list dd { height:50px; width:50px; float:left; margin-right:10px; margin-bottom:10px; overflow:hidden; }
.thumbnails-list dd img {width:50px; height:50px; margin:0px; padding:0px; cursor:pointer;}
.thumbnails-list .last-image {margin-right:0px;}
/*---- images ----*/
.minus5px {}
#photo-container img { float:left; /* -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; */} 

/*---- text ------*/
strong {font-weight:bold;}
.small, small {font-size:0.83em; }
.copyright { float:right; text-align:right;}
.developed { float:right; }

/*---[ Colours ]----*/
a { color:rgb(42,42,42);}
a:hover, a:focus { color:#7D968C; }
a:active, .current a:active { color:#FF5D68; }
.greenish { color:#7D968C; color:rgb(125,150,140); }
.grayish { color:#AAA7A4; color:rgb(170,167,164); }
.navigation .no-border, .no-border { border-width:0px; }
/*.navigation .no-border a { padding-right:0px; }*/
.navigation .current a { border-bottom-color:rgb(125,150,140) }
.navigation li a:hover { border-bottom-color: rgb(219,219,218); }
.navigation li a:active { border-bottom-color: rgb(255,206,210); }

.current a { color:#FF5D68; }
.current a { color:rgb(125,150,140); }


/*-------  Scrollable --------*/
/* root element for single scroll */ 
.scroll { 
    position:relative; 
    overflow:hidden; 
	width:968px;
	height:648px;
	float:left; 
	margin-top:20px;
} 
 
/* root element for the scroll pics */ 
.scroll .pics { 
    width:20000em; 
    position:absolute; 
    clear:both; 
} 
 
/* single scroll item */ 
.pics img { 
    float:left; 
    cursor:pointer; 
    width:968px; 
    margin:0px; 
} 
 
/* possible settings for the active scroll */ 
.scroll.active { 

}


/*--------- Useful Styles, clearfix classes and round corners -----------*/	
.clearfix:after { content:".";display:block;height:0;clear:both;visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }
/* End hide from IE Mac */

.clear { clear:both; display:block; }

.photo-wrappers { -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; }