/* -------------- reset styles -------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead{border: 0pt none;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0pt;padding: 0pt;}
caption, th, td{font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after{content: "";}
blockquote, q{quotes: "" "";}

/* -------------- general styles -------------- */
html,body{
	margin:0;
	padding:0;
}

body.grey{background: #0f0f0f url(../images/background-grey.jpg) no-repeat center top;}
body.green{background: #061100 url(../images/background-green.jpg) no-repeat center top;}
body.blue{background: #000a14 url(../images/background-blue.jpg) no-repeat center top;}
body.purple{background: #0f0015 url(../images/background-purple.png) no-repeat center top;}

body, div, p, li, h1, h2, h3, h4, h5, a {
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 11px; 
    color: #fff; 
}
p{margin: 5px 0;}

ul{
	list-style: disc outside;
	margin: 10px 0;
}

ol li{list-style-type:decimal;}
ol ol li{list-style-type:lower-alpha}
ol ol ol  li{list-style-type:upper-roman;}

li{
	margin: 1px 25px;
	color: #4d6b90;
}

b, strong{font-weight: bold;}

i, em{font-style: italic;}

.clear{clear: both;}

.hidden{display: none;}

h1{
	color: #666;
	font-size: 20px;
	font-weight: normal;
}

h2{
    color : #fff;
    font-size : 17px;
    font-weight : bold;
}

h3 {
    color : #5c7992;
    font-size : 15px;
    font-weight : bold;
}

h4 {
    color: #a3b2bf;
    font-size: 14px;
    font-weight: bold;
}

h5 {
    color : #aaa;
    font-size : 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
    font-weight : bold;
}

a { 
    color: #396eae;
    text-decoration: none;
}

a:hover {
    color: #78a4db;
}


/* -------------- layout styles -------------- */
div#container{
	margin: 0 auto;
	width: 520px;
	position: relative;
}
	div#header{
		position: relative;
		height: 170px;
	}
		h1#logo a{
			display: block;
			width: 200px;
			height: 150px;
			position: absolute;
			top: 20px;
			left: 10px;
		}
		div#mainnav{
			position: absolute;
			top: 75px;
			left: 335px;
			line-height: 30px;
		}
		div#gallerynav{
			position: absolute;
			top: 105px;
			left: 220px;
			line-height: 30px;
		}
		div#mainnav a,
		div#gallerynav a{
			display: inline-block;
			margin: 0 10px;
			font-size: 11px;
			letter-spacing: 2px;
		}
	div#content{
		width: 500px;
		padding: 0 10px;
		min-height: 550px;
		_height: 550px;
	}
	div#footer{
		clear: both;
		height: 18px;
		margin: 10px 0;
		text-align: center;
	}
	body.grey div#footer{background: url(../images/footer-grey.png) no-repeat center top;}
	body.green div#footer{background: url(../images/footer-green.png) no-repeat center top;}
	body.blue div#footer{background: url(../images/footer-blue.png) no-repeat center top;}
	body.purple div#footer{background: url(../images/footer-purple.png) no-repeat center top;}
		a#ryvon{
			margin-top: 30px;
			display: inline-block;
			width: 79px;
			height: 36px;
		}
		body.grey a#ryvon{background: url(../images/ryvon-grey.png);}
		body.green a#ryvon{background: url(../images/ryvon-green.png);}
		body.blue a#ryvon{background: url(../images/ryvon-blue.png);}
		body.purple a#ryvon{background: url(../images/ryvon-purple.png);}


/* -------------- layout styles -------------- */
a.home-panels{
	display: block;
	width: 500px;
	height: 150px;
	margin: 0 0 20px 0;
	background: url(../images/home-panels.jpg) no-repeat;
}
a#panel-comics{background-position: left top;}
a#panel-comics:hover{background-position: left -150px;}
a#panel-fineart{background-position: left -300px;}
a#panel-fineart:hover{background-position: left -450px;}
a#panel-photography{background-position: left -600px;}
a#panel-photography:hover{background-position: left -750px;}


/* -------------- about styles -------------- */
.about-portrait {
	margin: 0 0 10px 10px;
	float: right;
}


/* -------------- error styles -------------- */
.error {
	padding: 10px 5px;
}


/* -------------- gallery styles -------------- */
.gallery-image {
	float: left;
	margin-left: 10px;
	
}

.gallery-scroller {
	width: 110px;
	height: 530px;
	float: right;
	margin-right: 10px;
	position: relative;
}
	.gallery-scroller .gallery-scroller-inner {
		width: 110px;
		height: 500px;
		overflow: hidden;
		margin-top: 15px;
	}
	.gallery-scroller .gallery-scroll {
		margin-left: 10px;
		display: none; /* set to block with js */
		position: absolute;
		width: 100px;
		height: 50px;
		outline: 0;
	}
		.gallery-scroller .gallery-scroll-up {
			top: 0;
			cursor: pointer;
		}
		.gallery-scroller .gallery-scroll-down {
			bottom: 0;
			cursor: pointer;
		}
			body.blue .gallery-scroller .gallery-scroll-up {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-blue-up.png', sizingMethod='crop') !important;
			}
			body.blue .gallery-scroller .gallery-scroll-down {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-blue-down.png', sizingMethod='crop') !important;
			}
			body.green .gallery-scroller .gallery-scroll-up {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-green-up.png', sizingMethod='crop') !important;
			}
			body.green .gallery-scroller .gallery-scroll-down {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-green-down.png', sizingMethod='crop') !important;
			}
			body.purple .gallery-scroller .gallery-scroll-up {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-purple-up.png', sizingMethod='crop') !important;
			}
			body.purple .gallery-scroller .gallery-scroll-down {
				_background-image: none !important;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-scroll-purple-down.png', sizingMethod='crop') !important;
			}
			body.blue .gallery-scroller .gallery-scroll-up {
				background: url('../images/backer-scroller.png') no-repeat 0px top;
			}
			body.blue .gallery-scroller .gallery-scroll-up:hover,
			body.blue .gallery-scroller .gallery-scroll-up:focus {
				background: url('../images/backer-scroller.png') no-repeat -100px top;
			}
			body.blue .gallery-scroller .gallery-scroll-down {
				background: url('../images/backer-scroller.png') no-repeat -200px top;
			}
			body.blue .gallery-scroller .gallery-scroll-down:hover,
			body.blue .gallery-scroller .gallery-scroll-down:focus {
				background: url('../images/backer-scroller.png') no-repeat -300px top;
			}
			body.green .gallery-scroll-up {
				background: url('../images/backer-scroller.png') no-repeat -400px top;
			}
			body.green .gallery-scroller .gallery-scroll-up:hover,
			body.green .gallery-scroller .gallery-scroll-up:focus {
				background: url('../images/backer-scroller.png') no-repeat -500px top;
			}
			body.green .gallery-scroller .gallery-scroll-down {
				background: url('../images/backer-scroller.png') no-repeat -600px top;
			}
			body.green .gallery-scroller .gallery-scroll-down:hover,
			body.green .gallery-scroller .gallery-scroll-down:focus {
				background: url('../images/backer-scroller.png') no-repeat -700px top;
			}
			body.purple .gallery-scroll-up {
				background: url('../images/backer-scroller.png') no-repeat -800px top;
			}
			body.purple .gallery-scroller .gallery-scroll-up:hover,
			body.purple .gallery-scroller .gallery-scroll-up:focus {
				background: url('../images/backer-scroller.png') no-repeat -900px top;
			}
			body.purple .gallery-scroller .gallery-scroll-down {
				background: url('../images/backer-scroller.png') no-repeat -1000px top;
			}
			body.purple .gallery-scroller .gallery-scroll-down:hover,
			body.purple .gallery-scroller .gallery-scroll-down:focus {
				background: url('../images/backer-scroller.png') no-repeat -1100px top;
			}
	.gallery-scroller .gallery-thumb {
		display: block;
		margin: 5px 0 0 10px;
		outline: 0;
		cursor: pointer;
	}
		.gallery-scroller .gallery-thumb span {
			display: block;
			width: 100px;
			height: 100px;
			background-position: right !important;
		}
		.gallery-scroller .gallery-thumb-active {
			margin-left: 0;
			padding-left: 10px;
			background-position: left;
			background: url('../images/gallery-thumb-active.png') no-repeat left center;
		}
			.gallery-scroller .gallery-thumb-active span,
			.gallery-scroller .gallery-thumb:focus span,
			.gallery-scroller .gallery-thumb:hover span {
				display: block;
				width: 100px;
				height: 100px;
				background-position: left !important;
			}
	.gallery-scroller .gallery-empty-space {
		height: 193px;
		width: 1px;
	}
	
.gallery-overlay-overlay {
	display: block;
	position: absolute;
	background: black;
	top: 0;
	left: 0;
}
.gallery-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	display: none;
}
	.gallery-overlay .gallery-overlay-shadow-top {
		width: 478px;
		height: 14px;
		background: url('../images/gallery-overlay-shadow-h.png') no-repeat top left;
		
		_background-image: none !important;
		/*_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-overlay-shadow-ht.png', sizingMethod='scale') !important;*/
	}
	.gallery-overlay .gallery-overlay-shadow-bottom {
		width: 478px;
		height: 14px;
		background: url('../images/gallery-overlay-shadow-h.png') no-repeat bottom right;
		
		_background-image: none !important;
		/*_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-overlay-shadow-hb.png', sizingMethod='scale') !important;*/
	}
	.gallery-overlay .gallery-overlay-shadow-left {
		margin-left: 4px;
		width: 457px;
		padding-left: 14px;
		background: url('../images/gallery-overlay-shadow-v.png') repeat-y left;

		_background-image: none !important;
		/*_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-overlay-shadow-vl.png', sizingMethod='scale') !important;*/
	}
	.gallery-overlay .gallery-overlay-shadow-right {
		padding-right: 14px;
		background: url('../images/gallery-overlay-shadow-v.png') repeat-y right;
		
		_background-image: none !important;
		/*_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-overlay-shadow-vr.png', sizingMethod='scale') !important;*/
	}
	.gallery-overlay .gallery-overlay-box {
		background: #0f0f0f;
		border: 1px solid #1e1e1e;
		position: relative;
	}
		.gallery-overlay .gallery-overlay-close {
			position: absolute;
			right: 10px;
			_right: 20px;
			top: 10px;
		}
		.gallery-overlay .gallery-overlay-title {
			font-weight: bold;
			color: white;
			font-size: 13px;
			margin: 20px 0 0 20px;
		}
		.gallery-overlay .gallery-overlay-tools {
			color: #7b7b7b;
			font-size: 12px;
			margin: 10px 0 0 20px;
		}
		.gallery-overlay .gallery-overlay-description {
			margin: 10px 20px 20px 20px;
			padding: 10px 0 0 0;
			font-size: 11px;
			color: #7b7b7b;
			background: url('../images/gallery-overlay-description-line.png') no-repeat top center;
		}
	
.gallery-image {
}
	.gallery-image a {
		display: block;
		position: relative;
	}
		.gallery-image a span {
			display: none;
			position: absolute;
			width: 190px;
			height: 30px;
			cursor: pointer;
			top: 50%;
			left: 50%;
			margin-top: -15px;
			margin-left: -95px;
		}
		.gallery-image a:hover span,
		.gallery-image a:focus span {
			display: block;
			background: url('../images/gallery-image-info.png') no-repeat;

			_background-image: none !important;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/public/images/gallery-image-info.png', sizingMethod='crop') !important;
		}
	
.contact-left {
	width: 245px;
	margin-right: 20px;
	float: left;
}
	.contact-left .name {
		font-size: 15px;
		font-weight: bold;
	}
	.contact-left p {
		margin-top: 25px;
	}
	.contact-left h2 {
		margin-bottom: 5px;
	}
	.contact-left .facebook {
		cursor: pointer;
		display: block;
		margin-top: 15px;
		padding-top: 3px;
		padding-left: 100px;
		background: url('../images/facebook.png') no-repeat left top;
		height: 36px;
	}
	.contact-left .contact-error {
		margin-top: 15px;
	}
.contact-right {
	width: 220px;
	float: left;
}
	.contact-right .contact-form-input {
		clear: both;
		margin: 7px 0;
	}
	.contact-right .contact-form-input label {
		display: block;
		margin: 2px 0;
	}
	.contact-right .contact-form-input .input-text {
		width: 220px;
		border: 1px solid white;
		background: white url('../images/input-text-tile.png') repeat-x bottom;
	}
	.contact-right .contact-form-input textarea.input-text {
		background: white url('../images/input-textarea-tile.png') repeat-x bottom;
	}
	.contact-right .contact-form-submit {
		margin-top: 15px;
	}