html { background-color: #000; color: #eee; }
body { width: 950px; margin: 30px auto 0 auto; padding: 0px; }

html { background: #000 url(/images/bg-body-start.jpg) no-repeat 50% 0; }

h1 { font-family: 'adobe caslon pro', georgia, times, serif; color: #A99C07;}
h2 { font-family: 'adobe caslon pro', georgia, times, serif; margin: 0; padding: 1em 0 0 0; font-size: 18px; }
h3 { font-family: 'adobe caslon pro', georgia, times, serif; margin: 0; padding: 1em 0 0 0; font-size: 16px; color: #A99C07; }

h1 .category { font-size: 20px; text-transform: lowercase; color: #fff; margin-top: -7px;}
h2.news, h3.news { margin-top: 80px; }

p, ul, ol, td, label, textarea { font-family: 'lucida grande', lucida, arial, sans-serif; text-shadow: 0 0 0 rgba(0,0,0,0.1);}
p, li, td, label, textarea { font-size: 12px; line-height: 1.5; }

table { border-collapse: collapse; margin: 10px 0;}
td { border: 1px solid #111; padding: 5px; }

a { color: #A99C07; }
a img { border: none; }

strong { color: #fff; }

#logo        { margin: 0 0 0 55px; padding: 0;}

#navigation  { height: 55px; position: relative; margin:20px 0 0 0; background: #000;}
#start #navigation  { height: 55px; position: relative; margin:170px 0 0 0; background: #000; opacity: 0.5; filter:alpha(opacity='50');}
#nav         { margin: 0; padding: 0; position: absolute; top: 0px; left: 5px; list-style-type: none; }
#nav li      { float: left; margin: 15px 0 0 0; padding: 0 9px; font-size: 12px; border-right: 1px dotted #A99C07;  }
#nav li.here { font-weight: bold; text-decoration: underline; }
#nav li.last { border: none; }
#nav li a    { color: #eee; text-decoration: none; }
#nav li a:hover  { color: #c3b61e; text-decoration: none; }
#nav li.here a { font-weight: bold; text-decoration: underline; color: #A99C07;}


#start #content     { background-color: #000; clear: left; opacity: 0.70; filter:alpha(opacity='70'); }
#start #content { height: 200px; }
#welcome     { width: 850px; float: left; padding: 10px 50px 0 50px;}

#content p   { line-height: 1.5;}

#sidebar     { width: 439px; float: right; background: #111; opacity: 0.95; filter:alpha(opacity='95'); }
#sidebar .item { position: relative; height: 120px; border-top: 1px solid #222; border-bottom: 1px solid #000; }
#sidebar .item img { position: absolute; top: 25px; left: 20px; border: 1px solid #222;}
#sidebar .item .date { position: absolute; top: 20px; left: 150px; margin:0; padding:0; }
#sidebar .item h3 { position: absolute; top: 40px; left: 150px; margin:0; padding:0; }
#sidebar .item p { position: absolute; top: 60px; left: 150px; text-shadow: 0px 1px 1px #000; width: 250px; margin:0; padding:0; }

#page #content { background-color: none; clear: left; position:relative; float:left; margin-left:0px; overflow:hidden; padding: 20px 50px 100px 50px; width: 850px; }
#page #content .transparency { background: #000; opacity: 0.9; filter:alpha(opacity='90'); width: 950px; height:1500px; position:absolute; top:0px; left:0px; z-index:-1; }
#page #content #images { height: 300px; width: 850px; margin: 0; padding: 0; background-color: #000; opacity: 1.0; filter:alpha(opacity='100'); }
#page #content img { margin: 0 0 30px 0px; background: #000; opacity: 1;}
#page #content #news img { float: right; margin: 0 0 40px 40px; }

#page #partners { padding: 50px 0; }
#page #partners img { float: left; margin: 18px;}
#page #partners #images img { height: 300px; margin: 0; padding: 0}

/* start page footer */
#bottom { height: 220px; width: 100%; margin: 0; position: relative; border-top: 1px solid #111; }
#bottom h2 { position: absolute; left: 50px; }
#bottom #message { position: absolute; top: 50px; left: 50px; width: 425px; height: 175px; color: #000; font-family: 'adobe caslon pro', georgia, times, serif; font-size: 22px; }
#smallimages { width: 425px; height: 150px; }

#bottom #partners { position: absolute; top: 25px; left: 550px; width: 400px; height: 140px; }
#bottom #partners img { margin: 5px 15px; border: 1px solid #050505; }
#bottom #partners a img:hover { border: 1px solid #A99C07; }

/* 
#bottom { background: url(/images/bg-start-bottom.gif); height: 117px; width: 100%; margin: 20px 0; position: relative; }
#bottom #message { position: absolute; top: 15px; left: 50px; width: 400px; height: 140px; color: #000; font-family: 'adobe caslon pro', georgia, times, serif; font-size: 22px; }
#bottom #message img { position: absolute; right: -35px; bottom: 58px; }
#bottom #message a { color: #000; font-weight: bold; font-family: 'adobe caslon pro', georgia, times, serif; font-size: 18px; text-decoration: none; text-shadow: 0px 0px 3px#fff; }
#bottom #message a:hover { text-decoration: underline; }
#bottom #partners { position: absolute; top: 20px; left: 550px; width: 400px; height: 140px; }
*/

#app { margin-top: 50px; }

form label { float: left; width: 150px; clear: both; margin: 5px 0;}
form label.check { float: none; width: 50px; margin: 0; }
form input { width: 200px; margin: 7px 0; padding: 2px;}
form input.check { width: 15px; margin: 0;  }
form input.submit { width: 70px; margin-left: 150px; }
form textarea { width: 400px; height: 150px; margin: 7px 0; padding: 2px; }
form textarea.address { height: 50px; }



#footer   { clear: both; font-size: 0.8em; text-align: center; padding: 5px; background: #050505; color: #333; margin-bottom: 20px; }
#footer p { font-size: 10px; }



/* For images gallery */
#page #content img#profile_image     { margin-left: 15px;}
#loading					 { width: 400px; height: 300px; background: transparent url(/images/ajax-loader.gif) center center no-repeat; float: left;}
#page #content img#main_picture	 { margin: 0; }
#main_image { float: left; }
#page #content .info_wrapper								{ float: left; margin-left: 45px; border: 1px solid #222; padding: 5px 10px; width: 380px;}
#page #content .info_wrapper .description p { margin-top: 0; margin-bottom: 0;}
#page #content .info_wrapper .photograph p { margin-top: 0; margin-bottom: 0;}

#page #content .artist-list img { margin-bottom: 5px;}
.artist-list a   { text-decoration: none; display: block; float: left; margin-bottom: 20px; font-size: 14px;}

.pagination { clear: both; margin-top: 50px; font-family: 'adobe caslon pro',georgia,times,serif;}
.pagination a.next { float: right;}
.pagination a.previous { float: left;}
.pagination a:hover { text-decoration: none;}

.hide							 { display: none;}
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 

#scrollable_wrapper { margin-left: 5px; float: right;}
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 352px; 
    height:130px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
#page #content div.scrollable div.items img { 
    float:left; 
		cursor:pointer;
		border: 2px solid #000;
		background: #000;
		padding: 7px;
} 

#page #content div.scrollable div.items img:hover { 
    border: 2px solid #FFF;
}
 
/* active item */
#page #content div.scrollable div.items img.active {
	border:2px solid #A99C07;
	z-index:9999;
	position:relative;
}

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

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:25px;
	height:25px;
	float:left;
	margin:35px 5px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 0px; clear:right; margin-right: 0px; background:url(/images/scrollable/arrow/right_small.png) no-repeat;}
a.right:hover 		{ background-position:-0px -26px; }
a.right:active 	{ background-position:-0px -50px; } 


/* left */
a.left				{ margin-left: 0px; 	background:url(/images/scrollable/arrow/left_small.png) no-repeat;} 
a.left:hover  		{ background-position: 0 -26px; }
a.left:active  	{ background-position: 0 -50px; }

/* up and down */
a.up, a.down		{ 
	background:url(/images/scrollable/arrow/left.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;		
}