/* 
Author: X3 Studios
CSS Designer: Razvan Stavila
*/

/* GENERAL */
body { 
	background: #b9b9b9 url(../img/bg.jpg) no-repeat 50% 0;
	font-size: 0.75em;
	line-height: 1.6em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000;
}
a { color: #000000; text-decoration: none; }
a:hover { text-decoration: underline }
h4 { font-weight: normal; margin: 0 0 0 9px; color: #666666; }
h2 { margin-bottom: 15px; }
h3 { margin: 0 0 0 10px; line-height: 1em }
.float-left { float: left }
.float-right { float: right }
.break { margin-bottom: 0; }
.cleardiv { height: 1px; font-size: 1px; clear: both }
/* LAYOUT */
#container { width: 943px; margin: 0 auto; text-align: left; position: relative }
.container-area { padding: 0 }
#branding { height: 180px; width: 940px; position: relative; border-top: 3px solid #000000 }

#logo { height: 45px; width: 532px; position: absolute; top: 110px; left: 0 }
#logo a { display: block; height: 45px; width: 532px; background: url(../img/logo.png) no-repeat left top; text-indent: -9999px }

/* Navigation */
#sup-nav { margin-top: 15px; background: #000000; position: relative; width: 940px; line-height: 1.3em; text-transform: uppercase; font-size: 0.83em; overflow: hidden }
#sup-nav ul li { float:left; font-family:Arial,Helvetica,sans-serif; list-style: none; padding:5px; text-transform:uppercase; }
#sup-nav a { color: #d8d8d8; padding: 3px 5px 2px 5px; text-decoration: underline; display: block; line-height: 1em }
#sup-nav a:hover,
#sup-nav li.active a { background: #fefefe; color: #000000; text-decoration: none; }
#sup-nav ul li a { margin-right: 5px; }

#sup-nav li.bloglink { position: absolute; right: 0; top: 0; padding-right: 0 }

/* PORTFOLIO */
#p-nav { position: relative; width: 940px; height: 21px; padding: 7px 0; border-bottom: 1px solid #000; border-top: 4px solid #000; line-height: 1.75em }
#p-nav ul { height: 18px; }
#p-nav li { float: left; text-align: left; height: 21px; display: block; text-transform: uppercase; font-size: 1.2em }
#p-nav li a { display: block; float: left; font-weight: bold; color: #000000; }
#p-nav li em { margin: 0 7px; }
#p-nav li#showall-p-nav { position: absolute; right: 0; top: 7px; }

/* Body class change menu active */
body.featured li#featured-p-nav a,
body.identity li#identity-p-nav a,
body.print li#print-p-nav a,
body.interactive li#interactive-p-nav a,
body.multimedia li#multimedia-p-nav a,
body.archviz li#archviz-p-nav a,
body.showall li#showall-p-nav a,
#p-nav li.active a
{ background: #000000; color: #fefefe; padding: 0 4px; cursor: auto }
body.featured li#featured-p-nav a:hover,
body.identity li#identity-p-nav a:hover,
body.print li#print-p-nav a:hover,
body.interactive li#interactive-p-nav a:hover,
body.multimedia li#multimedia-p-nav a:hover,
body.archviz li#archviz-p-nav a:hover,
body.showall li#showall-p-nav a:hover,
#p-nav li.active a:hover
{ text-decoration: none }


/* List of Projects */
#lst-container { width: 943px; height: 455px; position: relative; overflow: hidden; z-index: 1 }
.lst { margin-top: 20px; position: absolute; left: 0; top: 0; height: 435px; width: 10000px; }
.item { position: relative; float: left; width: 220px; height: 435px; margin: 0 17px 0 3px; background: #787878; cursor: pointer; z-index: 100 }
.item a { position: relative; top: -3px; left: -3px; display: block; width: 220px; height: 435px; background: #dddddd; line-height: 1.2em; color: #000000!important }
.item a:hover { text-decoration: none; background: #fefefe; }
.item a:hover .client-name b,
.item a:hover .client-name em { text-decoration: underline }
.item img { background: transparent; border-bottom: 3px solid #000 }
.item .client-name { display: block; padding: 7px 0 0 0; margin: 0 0 0 10px; font-weight: bold; }
.item em { font-style: normal }
.item .date { font-weight: normal; display: block; margin-top: 4px; color: #666666 }
.hover { background: #5d5d5d }
.item .featured { position: absolute; right: 5px; bottom: 40px; }

/* Navi Page */
#navi { /*background: #787878;*/ width: 940px; margin: 17px 0 20px 0; clear: both; }
#navi div.navi-container { background: #000000; position: relative; /*top: -3px; left: -3px; */ width: 940px; padding: 10px 0; text-align: center }
#navi li { position: absolute; top: 10px; }
#navi li.navi-prev { left: 13px; }
#navi li.navi-next { right: 13px; }
#navi a { color: #fefefe; text-decoration: underline; font-weight: bold; cursor: pointer; padding: 2px 3px 2px 2px; }
#navi a:hover { text-decoration: none; background: #fefefe; color: black }
#navi .navi-perpage { color: #cccccc; padding: 3px 10px; font-weight: bold; }
#navi li.navi-prev a.first-page,
#navi li.navi-next a.last-page,
#navi-gallery.oneimage a { color: #999999; text-decoration: none; cursor: auto; }
#navi li.navi-prev a.first-page:hover,
#navi li.navi-next a.last-page:hover,
#navi-gallery.oneimage a:hover  { background: none; color: #999999 }
#navi-gallery.noimages { display: none!important }

/* Navi Item */
/*
#navi-item { width: 100%; height: 39px; position: absolute; left: 0; top: 400px; z-index: 0; overflow: hidden; z-index: 0 }
#navi-item .navi-item-container { width: 1020px; height: 39px; margin: 0 auto; text-align: left }
#navi-item .navi-item-container ul { width: 1020px; height: 39px; position: relative }
#navi-item .navi-item-container li.next-item { position: absolute; right: 0; top: 0; }
#navi-item .navi-item-container li { height: 39px; width: 20px; }
#navi-item .navi-item-container li img { cursor: pointer; }
#navi-item .navi-item-container li.first-item img,
#navi-item .navi-item-container li.last-item img { cursor:auto }
*/
#navi-item { width: 100%; height: 39px; position: absolute; left:0; top: 400px; z-index: 0; overflow: hidden; z-index: 0 }

#navi-item .navi-item-container { width: 1020px; height: 39px; margin: 0 auto; text-align: left }
#navi-item .navi-item-container ul { width: 1020px; height: 39px; position: relative }
#navi-item .navi-item-container li.next-item { position: absolute; right: 0; top: 0; }
#navi-item .navi-item-container li { height: 39px; width: 20px; }
#navi-item .navi-item-container li img { cursor: pointer; }
#navi-item .navi-item-container li.first-item img,
#navi-item .navi-item-container li.last-item img { cursor:auto }

/* Project details */
#project-details { display: /*none*/block; position: absolute; left: 50%; top: 186px; width: 941px; margin: 0 0 0 -469px; height: 552px; background: #787878; z-index: 20; }
#project-details .project-details-area { background: #fefefe; position: relative; left: -3px; top: -3px; height: 552px; width: 941px; }
#project-details .close-window { position: absolute; right: 7px; top: 7px; cursor: pointer }
#project-details #gallery { position: relative; overflow: hidden; width: 650px; height: 552px }
#project-details ul.gallery { position: absolute; left: 0; top: 0; width: 25000px; height: 552px; z-index: 21 }
#project-details ul.gallery li { float: left; width: 650px; }
#project-details #navi-gallery a { padding: 0 3px;  }
#project-details a { color: #fefefe; font-weight: bold; text-decoration: underline; }
#project-details a:hover { text-decoration: none; background: #fefefe; color: black }

/* Project details NAVI */
#project-details #navi-gallery { position: absolute; left: 0; bottom: 0; width: 650px; height: 20px; padding: 10px 0; color: #cccccc; background: #000; text-align: center; z-index: 22 }
#project-details #navi-gallery span { font-weight: bold; }
#project-details #navi-gallery .prev-image { position: absolute; left: 12px; top: 11px; }
#project-details #navi-gallery .next-image { position: absolute; right: 12px; top: 11px; }
#project-details #navi-gallery .prev-image:hover { color: black; background: #fefefe }
#project-details .proj-info { position: absolute; right: 20px; top: 50px; width: 250px; font-size: 0.89em; line-height: 1.4em }
#project-details .proj-info a { color: #666666 }
#project-details .proj-info h4,
#project-details .proj-info h3
{ line-height: 14px; font-weight: bold; margin: 0; padding: 0; }
#project-details .proj-info h4 span,
#project-details .proj-info h3 span
{  color: black }
#project-details .proj-info h4 { font-size: 14px;  }
#project-details .proj-info h3 { font-size: 15px; line-height: 20px; margin: 0 0 25px 0; }


/* PROJECT DETAILS 
#projectDetailsContainer{width:100%;position:absolute;overflow:hidden; z-index: 10000; left: 0; top: 0}
#projectDetails { text-align: left; position: absolute; left: 50%; top: 100px; margin: 0 0 0 -572px; width: 990px; height: 552px; padding: 77px; background: url(http://www.x3studios.com/img/bg-details.png) no-repeat left top; z-index: 10001; }
#projectDetails .detailsContent { width: 990px; height: 552px; position: relative; background: #fefefe; text-align: left }
#projectDetails .detailsContent .imageNavigation { width: 650px; height:552px; position: relative; overflow:hidden; }
#projectDetails .detailsContent .imageNavigation #imagesContainer { height: 552px; position: absolute;top:0;left:0;}
#projectDetails .detailsContent .imageNavigation .nextImg,
#projectDetails .detailsContent .imageNavigation .prevImg { position: absolute; top: 0; height: 552px; width: 325px; cursor: pointer }
#projectDetails .detailsContent .imageNavigation .nextImg { right: 0; background: transparent url(http://www.x3studios.com/img/next.gif) no-repeat right center; }
#projectDetails .detailsContent .imageNavigation .prevImg { left: 0; background: transparent url(http://www.x3studios.com/img/previous.gif) no-repeat left center; }
#projectDetails .detailsContent .projectInfo { position: absolute; left: 670px; top: 30px; width: 290px; }
#projectDetails .detailsContent .projectInfo h3,
#projectDetails .detailsContent .projectInfo h4 { margin: 0; padding: 0; color: #fefefe; font-weight: normal; line-height: 24px }
#projectDetails .detailsContent .projectInfo h4 { font-size: 16px; }
#projectDetails .detailsContent .projectInfo h3 { font-size: 24px; margin-bottom: 30px; line-height: 28px }
#projectDetails .detailsContent .projectInfo h3 span,
#projectDetails .detailsContent .projectInfo h4 span { background: #000; padding: 2px 5px; }
#projectDetails .detailsContent .projectInfo p { font-size: 11px; line-height: 14px; margin: 0 0 14px 0 }
#projectDetails .detailsContent .projectInfo p.projectLink { line-height: 14px; font-weight: bold; }
#projectDetails .detailsContent .projectInfo a { color: #84806a; text-decoration: underline }
#projectDetails .detailsContent .projectInfo a:hover { text-decoration: none; }
#projectDetails .detailsContent .projectInfo ol { font-size: 11px; padding: 10px 0 0 0 }
#projectDetails .detailsContent .projectInfo ol li { margin-bottom: 13px; line-height: 14px; }
#projectDetails .detailsContent .projectInfo ol span { display: block; font-weight: bold; }
#projectDetails .detailsContent .projectInfo ol em { font-style: normal }
.imgCount { position: absolute; bottom: 0; left: 300px; padding: 2px 0; line-height: 16px; text-align: center; width: 50px; background: #000; color: #fefefe; font-weight: bold; font-size: 11px; }
.closeWindow { position: absolute; right: 66px; top: 66px; cursor: pointer; z-index: 1002; }
*/

/* FOOTER */
#footer { margin: 0 0 0 0; padding: 85px 0 30px 0; text-align: left; clear: both }
#footer .footer-area { margin: 0 auto; width: 940px; }
#footer .float-left { width: 640px; position: relative }
#footer .float-left .more { position: absolute; right: -10px; bottom: 10px; width: 180px; line-height: 1.4em; font-size: 0.89em; font-weight: bold; margin: 0; padding: 0 }
#footer .float-left .more a { color: #b9b9b9; text-decoration: none!important }
#footer .float-left .more span { padding: 2px 5px; background: #000; color: #b9b9b9; text-decoration: underline }
#footer .float-left .more:hover span { text-decoration: none; background: #fefefe; color: black }
#footer .float-left .more:hover a { color: black }
#footer .float-left .more em { font-style: normal; }
#footer .float-right { width: 260px; line-height: 1.5em }
#footer .float-right div { float: left; }
#footer p { margin: 0 0 18px 0}
#footer p.new { margin: 0 0 37px 0; }
#footer a { color: #fefefe; text-decoration: underline }
#footer a:hover { text-decoration: none }
#footer .lst-complete { background: #fefefe; color: black; font-weight: bold; font-size: 0.89em; line-height: 1.4em; padding: 3px 6px }
#footer .lst-complete a { color: black }
#footer .contact { margin-top: 20px; padding: 30px 0 20px 0; background: #000; overflow: hidden; color: #fefefe; width: 100% }
#footer .contact a { color: #fefefe; padding: 1px 3px 1px 3px;}
#footer .contact a:hover{background:#fefefe;color:black;}
#footer .contact ul { margin-left: 20px; }
#footer .contact li { float: left; margin: 0 51px 0 0 }
#footer .contact p { margin: 0}
#footer .contact li:first-child p strong{padding: 0 0 0 3px;} /* fix for links padding */
#footer .contact .highlighted span { background: #000; color: #fefefe }
#footer .contact .highlighted a { color: black }
#footer .contact .highlighted span { padding: 3px 6px }
#footer .contact li.last { margin: 0; line-height: 1.4em }
#footer .footer-info { margin-bottom: 10px; }

.title-awards { background: url(../img/title-awards.gif) no-repeat left top; height: 34px; text-indent: -9999px; margin-bottom: 30px; }
.title-services { background: url(http://www.x3studios.com/img/title-services.gif) no-repeat left top; height: 28px; text-indent: -9999px; margin-bottom: 40px; }

form.cmxform { margin: 7px 0 0 0; }
input { border: none; background: none; }
input#email { width: 200px; color: #fefefe; }
input#submit { position: absolute; right: 10px; top: 4px; color: #000; width: 67px; cursor: pointer }
.newsletter { position: relative; width: 291px; height: 45px; background: url(../img/input_bg.png) no-repeat left top; padding: 3px 0 0 4px; overflow: hidden }
label.error { position: absolute; bottom: 0; left: 0; font-size: 0.89em }


.findus { margin-top: 30px; text-align: center; line-height:1em }
.findus p { margin: 0!important; }
.findus a { font-weight: bold; margin: 0 3px; padding: 1px 3px 1px 3px; color: #000!important }
.findus a:hover{background:#fefefe;color:black;}
.copy {  font-size: 0.89em; color: #333333; text-align: center; padding: 5px 0 0 0; line-height:1.2em }
.copy img { margin-top: 20px }

/* Clear margins */
.alpha { margin-left: 0; }
.omega { margin-right: 0 }
/* Clear line */
.clear {
	height: 1px;
	overflow: hidden;
	clear: both;
}
.tooltip{
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color: #333333;
    border: none;
    width:auto;
	text-align: left;
	display: none;
	margin: 0 0 0 3px;
}

.tooltip p{
    margin:0;
    padding:0;
    color:#000;
    background-color:#fefefe;
    padding: 7px 10px;
	 position: relative;
	 left: -3px; top:-3px
}
#tooltip0 p,
#tooltip1 p,
#tooltip2 p,
#tooltip3 p,
#tooltip4 p,
#tooltip5 p { background: #fefefe; padding: 2px 5px; font-weight: bold;}