@charset "utf-8";

/* ------------------------- Color scheme 

							font 			#ccc
							link 			#eee
							link hover		#09f
							orange	 		#f79007
							blue 			#06C
							h1				#bfbfbf

------------------------- */

body {
	background: #111 url(images/bg.gif) center repeat-y;
	font: 12px/120% Arial, Helvetica, sans-serif; /*'Gill Sans MT',*/
	color: #ccc;
	behavior: url("xtra/csshover3.htc");
}
#wrapper {
	position: relative;
	margin: 0 auto;
	width: 990px;
	text-align: left;
}
.fb_ltr {position: absolute; top: -3px;} 

a {color: #eee;	text-decoration: none;}
a:hover {color: #09f;}
a img {border: none;}

#logo {background: url(images/olga_rykova_fine_modern_art_sm.jpg) no-repeat; width: 240px; height: 210px; display: block;}

h1, h2, h3, h4, h5, h6 {font-family: 'Gill Sans MT', 'Gill Sans', Arial; margin: 20px 0; color: #bfbfbf;}
h3, h4, h5 {text-align: center;}
h1 {font-size: 22px; font-weight: normal; width: inherit; float: left; margin: 0 0 20px 0; position: relative; width: 90%;}
h1 a {font-size: 22px; font-weight: normal; color: #bfbfbf; padding: 3px 9px; margin: 0 6px; display: inline-block; float: right;}
h1 a:hover {color: #eee;}
h1 em {font-size: 12px;	font-style: normal;	color: #06c;}
h1 strong {color: #333;}
h2 {color: #06c; font-weight: normal; font-size: 14px; text-transform: uppercase; margin: 0 0 20px 0;}
h3 {font-size: 14px;}
h4 {font-size: 12px;color: #fff; text-transform: uppercase;}
h4.available {color: #f79007; font-size: 14px;}
h4.sold {
	color: #c00;
	text-align: center;
	vertical-align: bottom;
	text-transform: uppercase;
	font-size: 18px;
	height: 30px;
	padding: 10px 0 0 0;
	margin: 0 auto;
}
h5 {color: #eee; font-size: 14px;}

span {color: #06c;}
.linebreak {border-bottom: 1px solid #333; border-top: none; border-right: none; border-left: none; margin: 20px 0;}
.clear {clear: both;}

#result {width: 690px; position: relative; margin: 0 auto;}
/*#result .side {width: 60px; position: absolute; background: #000; right: 0; top: 0; height: 100%; z-index: 1100;}*/

#result a {
	position: relative;
  display: inline-block;
  max-width: 90px;
  max-height: 90px;
  overflow: hidden;
  z-index: 21;
  	
}
#result a:hover {
	-webkit-transition-timing-function: linear;
	overflow: visible; 
	z-index: 22;
	height: 90px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;}
#result img {}
#result a:hover img {height: 90px;}
#result .pop {display: hidden;}
#result a:hover .pop { position: absolute; height: auto !important; top: 0; left: 0; z-index: 23; border: 6px solid #000;}

#welcome {text-align: center; width: 100%; margin-top: 10%;}
#welcome img {margin: 0 auto 60px;}
#welcome a {font-size: 18px; color: #2a2a2a; text-transform: uppercase; text-align: center; margin: 20px;}
#welcome a:hover {color: #ccc;}

/* ------------------------- top content ------------------------- */

#header {
	margin: 32px 50px;
	position: relative;
}
#topmsg h1 {
	font-size: 14px;
	color: #999;
	margin: 0; 
	float: none;
	text-transform: uppercase;
	padding: 0 0 0 5px;
}


/* ------------------------- Navigation ------------------------- */

#menu {
	width: 600px;
	position: absolute;
	top: 0;
	right: 0;
	text-transform: capitalize;
	font-size: 14px;
	color: #01E9D7;
}
#menu ul {
	z-index: 20;
	padding: 0;
	margin: 0;
	float: right;
}
#menu li {
	position: relative;
	float: left;
	list-style: none;
	margin: 0;
	padding:0;
}
#menu li em {
	font-style: normal;
	display: block;
	color: #06c;
	text-align: left;
	padding: 5px;
	font-size: 12px;
}
#menu li a {
	padding: 0 10px;
	text-align: center;
	line-height: 30px;
}
#menu li a:hover {
	color: #09f;
}
#menu ul ul {
	position: absolute;
	top: 30px;
	visibility: hidden;
}
#menu ul li:hover ul {
	visibility:visible;
}
#menu ul ul li {
	margin: 0;
	width: 160px;
	background-color: #000;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter: alpha(opacity=85);
	-moz-opacity:0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	border-top: 1px dotted #000;
}
#menu ul ul li a {
	display: inline;
	text-align: left;
	margin: 2px 5px;
	width: 100%;
	font-size: 12px;
}


/* ------------------------- content ------------------------- */

.content {
	position: relative;
	padding: 0 50px;
}
.contentbox {
	position: relative;
	background: #181818;
	border-top: 1px solid #212121;
	border-bottom: 1px solid #212121;
	padding: 15px;
	line-height: 20px;
	color: #838383;
	clear: both;
}
.contentbox a {color: #ccc;}
.contentbox a:hover {color: #09f;}
.contentbox .threecol, .contentbox .twocol, .overflow {
	overflow: hidden;
	}
.twocol  ul {
	float: left;
	width: 49%;
	margin: 0 0.5% 10px 0.5%;
	padding: 0;
	list-style: none;
	margin-bottom: -1000px; 
    padding-bottom: 1000px;
}

.threecol  ul {
	float: left;
	width: 32%;
	margin: 0 0.5% 10px 0.5%;
	padding: 0;
	list-style: none;
	margin-bottom: -1000px; 
    padding-bottom: 1000px;
}
.threecol ul p {padding: 0 40px 0 0;}
.twocol ul.off, .threecol ul.off {border: none;}
.twocol ul.line, .threecol ul.line {border-right: 1px solid #333;}
.imgright {padding: 0 0 15px 60px;}


/* ------------------------- painting Box ------------------------- */

.painting {
	text-align: center;;
	margin: 0 auto;
	font-size: 14px;
	color: #999;
	line-height: 20px;
	clear: both;
}
.painting .details {float: left; width: 180px; margin: 20px 20px 0 0; text-align: left; font-size: 11px;}
.painting span {color: #06c;}
.painting em {font-style: normal; width: 100px;}
.painting h4 {text-align: left; margin: 0 0 3px 0;}
.painting .button {margin: 12px 0;}

input.button {
	width:100px;
	height:40px;
	border: none;
	background:url('images/template-sprite.png') 0 124px;
	cursor: pointer;
}
input.button:hover {
	background:url('images/template-sprite.png') 0 84px;
}

#face {padding: 3px 6px 0 0;}
#google {padding: 3px 0 0 0;}
#titter-div {
	margin: 3px 6px 0 0;
    border-radius: 4px; /* to mimic the curved edges of the count box */
    border-right: 1px solid #AAAAAA; /* this is the width and color of the count box border */
    height: 20px; /* this height works for the medium button */
    width: 94px; /* precise width to hide the word 88 */
    overflow: hidden; /* actually hides the word */
}
#face, #google, #titter-div {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  	filter: alpha(opacity=85);
  	-moz-opacity: 0.85;
  	-khtml-opacity: 0.85;
  	opacity: 0.85;}
#face:hover, #google:hover, #titter-div:hover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);
  	-moz-opacity: 1;
  	-khtml-opacity: 1;
  	opacity: 1;}

#social em, .social a {
	display: inline-block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";
  	filter: alpha(opacity=0.8);
 	-moz-opacity: 0.8;
 	-khtml-opacity: 0.8;
  	opacity: 0.8;
	padding: 3px 0;
}
#social em:hover, .social a:hover {
	/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  	filter: alpha(opacity=1); ie not playing nice */
 	-moz-opacity: 1;
 	-khtml-opacity: 1;
  	opacity: 1;
}
#artwork {float: left; position: relative; display: inline-block; margin: 20px 20px 0 60px;}
#artwork a {font: 60px bold; display: inline-block; height: 100%; width: 100%; color: #ccc; }
#artwork #next {
	position: absolute; 
	left: -60px; 
	top: 0; 
	width: 60px; 
	height: 100%; 
	background:  url("images/sprite-arrows.png") no-repeat scroll 15px 50% #111;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
 	-moz-opacity: 0;
 	-khtml-opacity: 0;
  	opacity: 0;
}
#artwork #next:hover {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  	filter: alpha(opacity=85);
  	-moz-opacity: 0.85;
  	-khtml-opacity: 0.85;
  	opacity: 0.85;
}
#artwork #prev {
	position: absolute; 
	right: -60px; 
	top: 0; 
	width: 60px; 
	height: 100%; 
	background: url("images/sprite-arrows.png") no-repeat scroll -279px 50% #111;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	-moz-opacity: 0;
  	-khtml-opacity: 0;
 	opacity: 0;
}
#artwork #prev:hover {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  	filter: alpha(opacity=85);
  	-moz-opacity: 0.85;
  	-khtml-opacity: 0.85;
  	opacity: 0.85;
}
#edit {position: absolute; z-index: 6; top: 30px; right: 60px; font-size: 11px;}


/* ------------------------- New Thumb ------------------------- */

#contentleft {float: left; width: 480px; border-right: 1px dotted #333; padding: 0 50px 0 20px;}
#recent {width: inherit; float: left; width: 200px; margin: 0 0 0 10px; padding: 0 0 0 10px; position:relative; margin-bottom: -1000px; padding-bottom: 1000px;}
#recent a img {max-width: 180px; height: auto;}
#recent h2 {margin: 0 0 15px 0;}
#recent h3, #recent h5 {text-align: center;}
#recent ul {list-style: none; border-top: 1px dotted #333; margin: 0; padding: 0; }
#recent ul li {margin: 0; padding: 5px; border-bottom: 1px dotted #333;}
#recent ul li span {border-bottom: 1px dotted #333; padding:0 10px; color: #838383;}
#recent ul li span a img {height: 40px; width: auto; margin: 5px;}


/* ------------------------- Pagination ------------------------- */

.pagination {float: right; text-align: right; width: inherit; margin: 3px 30px 3px 0; color: #999; font: 10px Verdana;}
.pagination span {color: #999;}
.pagination em {font-style: normal; color: #999;}
.pagiborder {
	padding: 1px 4px;
	border: 1px solid #333;
	background: #181818;
	color: #999;
	margin-left: 1px;
}
.pagiborder:hover, .pagicurrent {background: #000; border: 1px solid #000; padding: 1px 4px; margin-left: 1px;}


/* ------------------------- Footer ------------------------- */

.footer {
	clear: both;
	margin: 30px 60px;
	padding: 20px 0px;
	font-size: 12px;
	border-top: 1px dotted #333;
}
.footer ul {
	float: left;
	padding: 0 30px;
	margin: 0;
	list-style: none;
    width: 25%;
}
.footer ul li {
	margin: 10px 0;
}
.footer h2 {margin: 0; padding: 0;}
#copy {
	text-align: center;
	color: #999;
	line-height: 20px;
}
#copy em {
	font-style: normal;
	color: #06C;
}
#payment {margin: 0 auto; background: url('images/template-sprite.png') 0 23px; width: 284px; height: 23px; line-height: normal;}
#nojs {padding: 0 0 5px 0; text-align: center; font-size: 12px; color: #999; border-bottom: 1px dotted #333; position: absolute; top: -30px; z-index: 4; margin: 0 auto; width: 100%;}


/* ------------------------- Contact ------------------------- */

#contactside {float: left; width: 200px; padding: 0 20px 0 0; border-right: 1px solid #333;}
#contactside h2 {margin: 0; padding: 0;}
#contactside span {color: #ccc; display: block; text-align: center;}
#contactside span em {font-style: normal; color: #838383;}

.contact input, .contact textarea {margin: 2px 0 15px 0; width: 230px; background-color: #ddd; color: #838383; border: 1px solid #333; padding: 4px 2px;}
.contact input:hover, .contact textarea:hover {background-color: #eee;}


.textfield {background-color: #eee; color: #838383; border: 1px solid #333; padding: 2px;}
.seenot {display: none;}


/* ------------------------- Form Elements ------------------------- */

input.textbtn {
	font-weight: bold;
	font-size: 12px;
    color: #999;
    text-transform: uppercase;
    border: 0;
    background: #000;
    padding: 6px;
	border-radius: 50%;
	width: inherit;
}
input.textbtn:hover {
	cursor: pointer;
	color: #ccc;
}
.contentbox .textbtn, .contentbox .textbtn:hover {background: #181818;}
.form label {display: inline-block; width: 120px; padding: 6px 0;}
.form input, .form textarea, .form select {background-color: #ddd; color: #838383; border: 1px solid #333; padding: 6px 3px;}
.form input:hover, .form textarea:hover, .form select:hover {background-color: #eee;}

input.fileupload, input.fileupload:hover {background: #000; border: none;}

.errors {color: #cc0000;}

input.email {background-color: #ddd; color: #838383; border: 1px solid #333; padding: 6px 3px; width: 120px;}


/* ------------------------- links content ------------------------- */

.links {margin: 0 210px 0 0;}
.links p span {display: none; color: #999;}
.links p a {display: block; width: inherit;}
#linkad {position: absolute; top: 60px; right: 15px;}


/* ------------------------- Email signup ------------------------- */

#newsletter span {color: #999;}
#newsletter .text {background-color: #333; color: #777; border: 0; padding: 6px; border-radius: 50%; width: 140px;}


/* ------------------------- cartbox ------------------------- */
#result {clear: both;}
#more, #no-more {
	display: none;
	font-weight: bold;
	padding: 20px;
	text-align: center;
	border-top: 1px dotted #333;
	position: fixed;
	bottom: 20px;
	background: #111;
} 


.cartbox {
	float: left;
	min-height: 240px;
	margin: 10px;
    width: 240px;
	text-align: center;
	border: 2px solid #333;
}
.frame {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 240px;
	width: 240px;
	background: url(images/paintings-sm-bg-blue.png) no-repeat;
	margin: 0 auto;
}
.frame a img {
	-moz-box-shadow: 3px 3px 3px #40404a;
	-webkit-box-shadow: 3px 3px 3px #40404a;
	box-shadow: 3px 3px 3px #40404a;
	margin: 0 0 10px 0;
}
.cartbox div {
	padding: 10px;
	text-align: center;
}
.cartbox div span {
	font-size: 14px;
	color: #ff3;
}
.cartbox div .facebook {
	padding: 10px 0 10px 50px;
}
input.button {
	width:100px;
	height:40px;
	border: none;
	background:url('images/template-sprite.png') 0 124px;
	cursor: pointer;
}
input.button:hover {
	background:url('images/template-sprite.png') 0 84px;
}


/* ------------------------- recently viewed paintings ------------------------- */

div#recentthumbs {clear: both; padding: 12px 0; width: 600px; text-align: center; float: right;}
div#recentthumbs img {height: 72px; width: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.6)";
  	filter: alpha(opacity=0.6);
 	-moz-opacity: 0.6;
 	-khtml-opacity: 0.6;
  	opacity: 0.6;
}
div#recentthumbs img:hover {
	/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  	filter: alpha(opacity=1); ie not playing nice */
 	-moz-opacity: 1;
 	-khtml-opacity: 1;
  	opacity: 1;