@import "lib/reset.css";
@import "lib/nav.css";
@import "lib/sifr.css";

/* =body 
   (1em = default browser 16px of font-size)
   for 12px (0.75em = 1/16px * 12px)
 */
html { font-size: 100.01% }
body { font-size: 1em; }
body { background: #000000 url(../images/utils/bg.jpg) repeat-y center top; text-align: center; font-family: "Trebuchet MS"; color: #666666; }

/* =hx */
h2, h3, h4, h5, h6 { font-weight: bold; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; }

h2 { font-size: 0.81em; color: #cccccc; }
h3 { font-size: 0.94em; margin: 20px 0 10px 0 }
h4 { font-size: 1.1em; margin: 0 0 10px 10px; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

/* =txt p/abr/acronym/address/del/blockquote/strong/em/dfn/pre/code/tt  */
p { margin: 0 0 1.5em; }
abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: italic; }
del { color: #000; }
blockquote { margin: 1.5em; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; } 
tt { display: block; margin: 1.5em 0; line-height: 1.5; }

span { font-weight: normal; }

/* =table caption/tr/th/td/thead/tbody/tfoot */
table {  }
th {  }
td { padding: 0 0 7px 0; }
th, td {  }
tfoot { font-style: italic; }
caption { background: #ffc; }

/* =ul li */
ul { margin: 0 1.5em 1.5em 1.5em; list-style-type: circle; }

/* =ol li */
ol { margin: 0 1.5em 1.5em 3.5em; list-style-type: decimal; }

/* =dl dt/dd */
.twocollumns { position: relative; width: 100%; }
dl { margin: 0 0 15px 0; padding: 0; }
dl.left { width: 210px; }
dl.right { position: absolute; right: 0; top: 0; width: 210px; }
dl dt { font-weight: normal; border-left: 4px solid #c9f1ff; }
dl dt.alt { background: #dcf6ff; border-left: 4px solid #93e3ff; }
dl dd { margin-left: 1.5em; }
dl dt { margin: 0 0 5px 0; padding: 4px 0 4px 7px; }

/* =a */
a { color: white; text-decoration: underline; }
a:hover { text-decoration: none; }

/* =form */
form { margin: 20px 0 20px 0; padding: 0; }
input { background: black; border: 1px solid #0b0b0b; }
select { background: #dcf6ff; border: 1px solid #93e3ff; margin: 0 0 0 0 }
label { font-weight: normal; }
fieldset { padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ddd; }
legend { padding: 0 .4em; font-weight: bold; font-size: 1.2em; }


/* general styles */
.transON { opacity:.70; -moz-opacity: 0.7; }

/* layout begin */
#wrapper { text-align: center }
#header { background: url(../images/utils/bg_header.jpg) no-repeat left bottom; padding: 20px 0 0 0; position: relative; height: 166px; width: 994px; text-align: left; }
#content { background: #292929; clear: both; padding: 0 0 120px 0; margin: 0 0 0 0; width: 990px; text-align: left }
html>body #content { background: transparent url(../images/utils/bg_content.png); }
#content .main_content { padding: 40px 20px 0 20px;  }
#navigation { height: 45px; width: 770px; margin: 0 auto; text-align: left }
#container { position: relative; width: 994px; margin: 0 auto; text-align: left; border-top: 3px solid black }

/* header */
h1 { position: absolute; right: 25px; width: 346px; height: 81px; top: 42px; }
#main_text { position: absolute; top: 50px; left: 22px; }

/* content */
#content h2 { border-bottom: 1px solid #474747; padding: 0 0 7px 0; }

/* Examples Items */
#list { margin: 32px 0 0 0; }
#list .item { background: #141414; padding: 0 0 10px 10px; margin: 0 0 20px 0; width: 935px; }
html>body #list .item { background: transparent url(../images/utils/bg_item_off.png); }
#list .item .thumbs { float: left; width: 455px; }
#list .item .thumbs img { border: 1px solid black; opacity:.60; -moz-opacity: 0.6; }
#list .item .thumbs span em { display: block; }
html>body #list .item .thumbs span em { display: none; }
		#list .item .thumbs span { float: left; position: relative; margin: 10px 5px 0 0; height: 141px; width: 221px; }
		#list .item .thumbs span em { position: absolute; bottom: 0px; left: 0px; padding: 6px 0 6px 13px; width: 221px; background: black; font-style: normal; font-size: 0.81em; font-weight: bold; }
		html>body #list .item .thumbs span em { bottom: 1px; left: 1px; width: 206px; }	
#list .item .details { float: right; width: 460px; }
#list .item p { font-size: 0.81em; color: white; padding: 0 20px 0 0 }
html>body #list .item  p { color: #666666 }
#list .item h3 { color: white }
html>body #list .item h3 { color: #666666 }

		/* Item over */
		#list .item:hover { background: transparent url(../images/utils/bg_item_on.png); }
		#list .item:hover h3, #list .item:hover p { color: white }
		#list .item:hover .thumbs img { /*border: 1px solid #666666;*/ }
		#list .item:hover .thumbs span:hover img { border: 1px solid white; }
		#list .item:hover .thumbs img { opacity:1; -moz-opacity: 1; }
		#list .item:hover .thumbs span em { display: block; text-decoration: underline; cursor: pointer }
		#list .item:hover .thumbs span em:hover { text-decoration: none }

/* Example Item Details */
body#samples #list .item { padding-bottom: 13px; }
body#samples #list .item .thumbs { float: right; width: 725px; }
body#samples #list .item .thumbs img { width: 173px; }
body#samples #list .item .details { float: left; width: 170px; }
body#samples #list .item .thumbs span { height: 108px; width: 175px; margin: 10px 5px 0 0; float: left }
body#samples #list .item .thumbs span em { width: 160px; }
html>body#samples #list .item .thumbs span em { bottom: -3px; }	
html>body#samples #list .item h3 { margin-left: 20px }

/* Despre */
#despre #content h2 { font-size: 1.125em; color: white }
#despre #content .list { width: 950px }
#despre #content .info { margin-top: 15px; font-size: 0.81em; color: white; line-height: 1.6em }
#despre #content .items-left { float: left; width: 465px;  }
#despre #content .items-right { float: right; width: 465px; }
#despre #content .items .item { height: 140px; background: transparent url(../images/utils/bg_item_off.png); padding: 10px; margin: 0 0 20px 0; color: #666666; font-size: 0.81em; }
#despre #content .items .item:hover { background: transparent url(../images/utils/bg_item_on.png); color: white; cursor: default }
#despre #content .items .item h4 { font-size: 1.25em; margin: 0.5em 0 0.5em 0 }
#despre #content .items .item img { float: left; margin: 0 10px 0 0; opacity:0.6; -moz-opacity: 0.6; }
#despre #content .items .item:hover img { opacity:1; -moz-opacity: 1; }

/* Case Studies */
body#studii #content { padding: 0 0 250px 0; }
body#studii #list .item .thumbs img { margin-top: 10px; }
body#studii #list .item .details a { color: #666666 }
body#studii #list .item:hover .details a { color: white }
body#studii #list .item { margin: 0 0 10px 0 }

body#studiidetalii #list .item { padding-bottom: 13px; margin: 0 0 10px 0 }
body#studiidetalii #list .item .thumbs { float: right; width: 545px; }
body#studiidetalii #list .item .thumbs img { width: 173px; }
body#studiidetalii #list .item .details { float: left; width: 370px; }
body#studiidetalii #list .item .details { padding: 0 0 0 20px }
body#studiidetalii #list .item .thumbs span { height: 108px; width: 175px; margin: 10px 5px 0 0; float: left }
body#studiidetalii #list .item .thumbs span em { width: 160px; }
html>body#studiidetalii #list .item .thumbs span em { bottom: -3px; }	

/* Contact Us */
body#contact #content { padding: 0 0 200px 0; }
body#contact #content h2 { font-size: 1.125em; color: white }
body#contact #content .info { margin-top: 15px; font-size: 0.81em; color: white; line-height: 1.6em }
body#contact #content .list { width: 950px }
body#contact #content .info { margin-top: 15px; font-size: 0.81em; color: white; line-height: 1.6em }
body#contact #content .items-left { float: left; width: 465px;  }
body#contact #content .items-right { float: right; width: 465px; }
body#contact #content .items .item { height: 115px; width: 445px; background: transparent url(../images/utils/bg_item_off.png); padding: 10px; margin: 0 0 20px 0; color: #666666; font-size: 0.81em; }
body#contact #content .items .item:hover { background: transparent url(../images/utils/bg_item_on.png); color: white; cursor: default }
body#contact #content .items .item:hover a { color: white }
body#contact #content .items .item h4 { font-size: 1.25em; margin: 0.5em 0 0.5em 20px }
body#contact #content .items .item p { padding-left: 20px }
body#contact #content .items .item a { color: #666666 }

/* Request a Quote */
body#estimare #content h2 { font-size: 1.125em; color: white }
body#estimare #content .info { margin-top: 15px; font-size: 0.81em; color: white; line-height: 1.6em }
/* Form */
form#commentForm { margin: 15px 0 0 0; }
form#commentForm h3 { margin: 0 0 15px 10px; padding: 20px 0 0 0; }
form#commentForm div { float: left; width: 710px; clear: left; display: inline; padding: 0 0 0 10px; margin: 0 0 8px 0; font-size: 0.88em }
form#commentForm div input,
form#commentForm div textarea { float: left; width: 280px; background: #202020; border: 1px solid #666666; padding: 7px 20px 7px 5px; font-family: "Trebuchet MS"; color: white }
form#commentForm div textarea { font-size: 1em; height: 120px; overflow: auto; margin: 0!important }
form#commentForm div label { float: left; padding: 6px 15px 0 0; width: 180px; text-align: left }
form#commentForm div.submit { background: none; width: 512px; padding: 0; text-align: right }
form#commentForm div.submit input { width: auto; background: #202020; color: #666666; cursor: pointer; font-weight: bold; text-align: center; width: 110px; height: 35px; padding: 0; float: none }
form#commentForm .mandatory { float: left; font-size: 0.75em; padding: 10px 0 0 10px; }
form#commentForm div input.required { color: white!important; font-size: 1em; margin: 0!important; background: #202020 url(../images/utils/mandatory_off.gif) no-repeat right top; }
form#commentForm .mandatory-field { float: left; font-size: 0.75em; margin: 0 0 0 200px; color: #ffd700; }
.success { font-weight: bold; margin: 15px 0; display: none; color:#ffd700!important }
form#commentForm .tip { display: block; clear: both; width: 410px; float: left; font-size: 0.75em; padding: 0 0 0 200px  }

#list .item:hover form#commentForm div label { color: white;  }
#list .item:hover form#commentForm div input,
#list .item:hover form#commentForm div textarea { background: #000000; border: 1px solid #666666; }
#list .item:hover form#commentForm div input.required { background: #000000 url(../images/utils/mandatory.gif) no-repeat right top; }
#list .item:hover form#commentForm .tip { color: #ebebeb; }
#list .item:hover form#commentForm div.submit input { background: black; color: white;  }

/* breadcrumb */
#breadcrumb { border-bottom: 1px solid #474747; font-size: 0.81em; color: #cccccc; padding: 0 0 7px 0 }
#breadcrumb ul, #breadcrumb li { margin: 0; padding: 0; list-style: none; }
#breadcrumb ul li { font-weight: bold; display: inline; }
#breadcrumb ul li a { font-weight: normal; color: #cccccc; }
		
/* footer */
#footer { position: relative; width: 990px; background: black; height: 68px; color: #404040; margin: 0 0 50px 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.63em }
#footer .copy { position: absolute; left: 20px; top: 20px; line-height: 1.2em }
#footer .x3logo { position: absolute; right: 20px; top: 20px; }
#footer a { color: #404040; }

/* site info */
#site_info { width: 802px; margin: 0 auto; }
#site_info ul { list-style: none; margin: 0 0 0 0; padding: 12px 0 0 0; }
#site_info ul li { list-style: none; display: inline; font-size: 0.82em; margin: 0; padding: 0 }
#site_info ul li b { font-weight: bold; padding: 0 2px 0 2px  }













/* Template DESIGN - REMOVE when building the website */


#gallery {
	
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }


/*** Navigation (Setting up some fonts, colors and more)***/

#navigation{font:14px Arial; background: #454545;}

#navigation a:link, #navigation a:visited{ color: #999999; padding:10px; text-decoration:none;}

#navigation a:hover { color:#fff; text-decoration:none;}

#navigation a:link, #navigation a:visited{color: #999999; padding:10px; text-decoration:none;}

#navigation a:hover { background-color: #75AB2C;  color:#fff; text-decoration:none;}

#navigation .current a:link, #navigation .current a:visited{color: #fff;text-decoration:none;padding:10px;}

/*** Essential styles - Superfish menu (Setting the positions for the list elements etc.) ***/

.nav, .nav * {margin:0;padding:0;list-style:none;}

.nav ul {position:absolute;top:-999em;width:15em;}

.nav li {float:left;position:relative;z-index:99;font-size:12px;}

.nav a {display:block;}

.nav ul li{width: 100%;}

.nav li:hover ul,ul.nav li.sfHover ul {left:-1px;top:2.9em;}

.nav li:hover li ul,.nav li.sfHover li ul {top:-999em;}

.nav li li:hover ul,ul.nav li li.sfHover ul {left:15em;top:0px;}

.nav li:hover ul,.nav li li:hover ul {top: -999em;}

/*** Skinning - Superfish menu (Some final font colors and backgrounds) ***/

.nav li {background-color:#454545;}

.nav li li:hover {background-color:#505050;}

.nav li li li {background-color:#454545;}

.nav li li li:hover {background-color:#505050; color: #ffffff;}