/**
 * General Page Styles
 */
html {
margin:0;
padding:0;
height: 100%;
}

body {
height: 100%;
margin:0;
padding:0;
background:#000;
color:#ccc;
text-align:center;
font:normal 13px georgia, serif;
}

p {
margin: .75em 0 1em 0;
line-height: 130%;
}

a img {
border: none;
}

a:link,
a:visited {
color:#0cf;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

#container, #ajax-content {
width:650px;
margin:0 auto;
text-align:left;
}

hr.a {
	border: none 0;
	border-top: 1px solid #CCC;/*the border */
	width: 100%;
	text-align: left;/*this will align it for IE*/
	margin: 0 auto 0 0; /*this will align it left for Mozilla*/
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
} 

hr.b {
	border: none 0;
	border-top: 1px dashed #CCC;/*the border*/
	width: 100%;
	text-align: left;/*this will align it for IE*/
	margin: 0 auto 0 0; /*this will align it left for Mozilla*/
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
} 

/**
 * Header
 */
 
#header {
height:100px;
background:url(../images/header.gif) bottom left no-repeat;
margin-bottom:2px;
}

#header h1 {
margin:0;
padding-top: 35px
}

/* Main feature */

.featured, #ajax-container {
position: relative;
min-height: 470px;
background: url(../images/loader-black.gif) center center no-repeat;
}

.featured  .hero {
/*display: block;*/
}

.featured .info, #ajax-container .info {
position: absolute;
right: 24px;
bottom: 24px;
display: none;
}

.featured .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 610px;
height: 110px;
padding: 20px;
background: url(../images/bg-black65.png);
}

#ajax-content  .overlay {
position: static;
}

.featured .description {
width: 444px;
float: left;
color: #fff;
}

.featured .description h2 {
margin:0;
font-weight: normal;
color: #fd6c34;
}

.featured .description h3 {
margin:0;
color:#a2a2a2;
font-weight: normal;
font-size:12px;
}

.featured .description p {
font-size: 12px;
}

.featured .related {
width:146px;
height: 110px;
padding-left: 14px;
float:right;
border-left: 1px solid #707070;
overflow: hidden;
}

.featured .noContent{
	border-left: 0;
}

.featured .related h3 {
margin:0;
font-size: 12px;
}

.featured .related p {
margin: 4px 0;
font-size: 12px;
}

.button-left, .button-right {
position: absolute;
top: 208px;
width: 20px;
height: 38px;
background: transparent left top no-repeat;
cursor: pointer;
}

.button-left {
left: 6px;
background-image: url(../images/arrow-left.png);
}

.button-right {
right: 6px;
background-image: url(../images/arrow-right.png);
}

/**
 * Contact Information
 * To adjust the gap between the featured image and the contact details, change the margin-top
 * To adjust the gap between the folio and the contact details, adjust the margin-bottom
 */

#contact {
margin-bottom:15px;
color:white;
padding:10px 0;
background:#353535;
text-align:center;
}

#contact span {
padding:0 5px;
}

/**
 * Portfolio Styles
 * To adjust the gap betweeen the thumbnails, change the padding-right/bottom on the ul li element.
 */
.portfolio {
overflow:auto;
margin-right:-10px;
}

.portfolio ul {
margin:0;
padding:0;
list-style:none;
}

.portfolio ul li {
float:left;
padding-right:10px;
padding-bottom:8px;
}

.portfolio h2 {
margin:10px 0 0 0;
padding:0;
float:none;
}

.portfolio h2 span {
display:none;
}

.portfolio li img
{
	width:100px;
	height:100px;
	display:block;
	background-color:#111;
}


/**
 * Hello Styles
 * To adjust the space between the image and the text, modify the "margin-left" style in the #hello .anton_emdin_image element.
 */
#hello {
border-top:1px solid #ccc;
margin-top:50px;
overflow:auto;
}

#hello .anton_emdin_image {
float:right;
margin-left:15px;
}

#hello p {
text-align:justify;
line-height:1.5em;
}

/**
 * Footer Styles
 */

#footer {
color:#666;
height:200px;
background:url(../images/footer_img.jpg) bottom center no-repeat; 
margin-top:10px;
margin-bottom:60px;
text-align:center;
}

/**
 * Info Styles
 */
 
 
#info a:link,
#info a:visited {
color:#0cf;
text-decoration:none;
}

#info a:hover {
text-decoration:underline;
}

#info h3 {
margin: 1em 0 -.4em 0;
color:#369;
font-weight: bold;
font-size:14px;
cursor: pointer;
}

#info ul {
margin: .5em 0;
color:#999;
}

#info li {
padding: .25em;
}
 
 
/**
 * Info  & Home Buttons
 */
 
.button {
margin-top:26px;
}

.button a img {
	opacity: .6;			/* Works on Firefox and other browsers */
}

.button a:hover img {
	opacity: 1;			/* Works on Firefox and other browsers */
}

.button a img {
	filter: alpha(opacity=60);   /* IE fix */
}

.button a:hover img {
	filter: alpha(opacity=100);   /* IE fix */
}

/**
 * Lightbox styles
 */
.lightboxScreen {
 display: none;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #000;
 z-index: 1000;
 position: fixed;
}

.lightboxContainer {
 display: none;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1001;
}
 
.lightbox {
 width: 849px;/*
 min-height: 600px;*/
 padding: 10px;
 margin: 20px auto;
 background: #222;
 position: relative;
 text-align: center;
}

.lightbox .inner {
 /*background-color: #000;*/
}


.lightbox .featured {
/* min-height: 600px;*/
 background: url(../images/loader-charcoal.gif) center center no-repeat;
}

.lightbox .featured .overlay {
 text-align: left;
}

.lightbox .featured .overlay .description {
 width: 60%;
}

.lightbox .featured .overlay .related {
 width: 35%;
 padding-left: 5px;
}

.lightbox .featured .hero {
 margin: 0 auto;
 /* height: 600px; */
}

.lightbox .button-left, .lightbox .button-right {
 top: 281px;
}

.lightbox .button-left {
left: 12px;
}

.lightbox .button-right {
right: 12px;
}

.lightbox .close {
 width: 36px;
 height: 36px;
 position: absolute;
 top: -12px;
 right: -12px;
 background: url(../images/close.png) no-repeat;
 cursor: pointer;
}