/* global styles for all projects */
html {
height: 100%;
}
html, body, form, td, th {margin: 0; padding: 0;}
body {
outline: none;
background: #c8c8c8 url('../images/bg-main.png') repeat-x;
color: #333;
font: 12px Tahoma, Arial, sans-serif, monospace;
height: 100%;
}
body * {
outline: 0px none;
}
table {border-collapse: collapse; font: 12px Tahoma, Arial, sans-serif, monospace;}
img {border:0;}
a {text-decoration:underline; color: #3e3517;}
a:hover {text-decoration:none;}
.clear {clear: both; display: block; }
.fleft {float: left;}
.fright {float: right;}
.tech-table {
}
.tech-table tr {
background: #4a4e50;
}
.tech-table tr:hover {
background: #3a3e40;
}
.tech-table td, .tech-table th {
border-right: 1px solid #53575a;
padding: 5px 20px;
}
/* project's custom styles */
#container {
position: relative;
width: 900px;
margin: 0 auto;
background: #c8c8c8 url('../images/bg-content.png') repeat-x;
min-height: 100%;
height: auto !important;
height: 100%;
}
#bg-shadow-left {
width: 75px; height: 100%;
background: url('../images/bg-shadow-left.png') no-repeat top;
position: absolute;
top: 0; left: -75px;
z-index: 5;
}
#bg-shadow-right {
width: 75px; height: 100%;
background: url('../images/bg-shadow-right.png') no-repeat top;
position: absolute;
top: 0; right: -75px;
z-index: 5;
}
#header .logo {
display: block;
width: 224px; height: 87px;
background: url('../images/logo.png') no-repeat;
margin: 20px 0 0 30px;
float: left;
}
/*logo*/
#header .logo span {
display: none;
}
/*menu*/
#header .menu {
float: right;
margin: 84px 30px 0 0;
}
#header .menu ul {
list-style: none;
margin: 0; padding: 0;
}
#header .menu li {
float: left;
margin: 0 7px;
}
#header .menu li a {
color: #fff;
display: block;
margin-top: -2px;
font-size: 24px;
line-height: 24px;
}
#header .menu li a span {
display: block;
padding: 10px 10px 10px 20px;
}
#header .menu li.active {
background: #fff;
}
#header .menu li.active a {
color: #d1191f;
background: url('../images/bg-menu-active.png') no-repeat;
text-decoration: none;
}
#header .menu li.active a span {
background: url('../images/bg-menu-active-sh.png') no-repeat bottom right;
}
/*menu*/
#header .submenu {
margin: 0 0 0 360px;
height: 25px;
}
#header .submenu ul {
list-style: none;
margin: 0; padding: 0;
}
#header .submenu li {
float: left;
margin: 3px 7px 0 7px;
}
#header .submenu li a {
color: #d41920;
display: block;
margin-top: -3px; padding: 6px 20px 7px 10px;
font-size: 12px;
line-height: 12px;
}
#header .submenu li.active {
background: #cd191f;
}
#header .submenu li.active a {
color: #fff;
background: url('../images/bg-submenu-active.png') no-repeat right top;
text-decoration: none;
}
#content {
position: relative;
padding: 0 0 65px 75px;
}
#content .nova {
position: absolute;
z-index: 5;
left: 20px;
background: url('../images/nova.png') no-repeat 387px 13px;
}
/*main page video*/
#content .video-promo {
color: #fff;
width: 430px;
position: relative;
z-index: 5;
}
#content .video-promo a {
color: #fff;
}
#content .video-promo .title {
font-size: 16px;
padding: 20px 0 5px 5px;
margin: 0;
font-weight: bolder;
}
#content .video-promo .clients {
padding-left: 5px;
}
#content .video-promo .player {
padding: 15px 0 20px 0;
}
#content .video-promo .description {
color: #000;
padding-left: 5px;
}
/*shadow corner block*/
#content .shadow-corner {
margin-left: -10px;
padding: 7px 0 0 15px;
background: url('../images/bg-shadow-corner.png') no-repeat;
}
/*video player*/
#content .video-player {
width: 395px; height: 290px;
padding-top: 12px;
text-align: center;
background: url('../images/video-layer.png') no-repeat;
}
/*main page news*/
#content .news-blocks {
position: relative;
background: #fff;
padding: 15px;
margin-top: 50px;
width: 730px;
z-index: 10;
}
#content .news-blocks .columns {
position: relative;
width: 330px;
float: left;
margin-right: 25px;
}
#content .news-blocks .news-block {
margin-bottom: 10px;
}
#content .news-blocks .news-block p {
margin: 0 0 10px 0; padding: 0;
}
#content .news-blocks .news-block h2 a {
color: #c2171d;
}
#content .news-blocks .news-block .illustration {
margin-bottom: 10px;
}
#content .news-blocks .news-block .illustration .client,
#content .news-blocks .news-block .illustration .description {
font-size: 10px;
margin-left: 10px;
}
#content .news-blocks .news-block .illustration .client {
margin-top: 5px;
}
#content .news-blocks .news-block .illustration .thumb-frame {
width: 150px; height: 127px;
padding: 2px 0 0 2px;
background: url('../images/thumb-frame.png') no-repeat;
}
/*portfolio*/
#content .portfolio {
width: 760px;
}
#content .portfolio .illustration {
margin: 20px 30px 10px 0;
float: left;
width: 160px;
}
#content .portfolio .illustration .client,
#content .portfolio .illustration .description {
font-size: 10px;
margin-left: 10px;
margin-top: 5px;
}
#content .portfolio .illustration .client a,
#content .portfolio .illustration .description a {
color: #000;
}
#content .portfolio .illustration .client {
margin-top: 5px;
}
#content .portfolio .illustration .thumb-frame {
width: 150px; height: 127px;
padding: 2px 0 0 3px;
background: url('../images/thumb-frame.png') no-repeat;
}
#content .portfolio .clear {
height: 30px;
width: 700px;
}
/*pager*/
#content .pager {
position: relative;
clear: both;
width: 455px; height: 33px;
margin-left: 10px;
padding: 8px 0 0 276px;
background: url('../images/bg-pager.png') no-repeat;
color: #fff;
}
#content .pager a {
position: relative;
color: #fff;
}
#content .pager .prev {
position: relative;
float: left;
margin-right: 20px;
}
#content .pager .pages {
position: relative;
float: left;
}
#content .pager .pages a,
#content .pager .pages b {
position: relative;
margin: 0 2px;
}
#content .pager .next {
position: relative;
float: left;
margin-left: 20px;
}
/*contacts*/
#content .contacts {
color: #fff;
width: 720px;
position: relative;
z-index: 5;
}
#content .contacts a {
color: #fff;
}
#content .contacts .title {
font-size: 16px;
color: #fff;
background: #951316;
padding: 10px 0 15px 15px;
width: 100px;
}
#content .contacts .address {
font-size: 22px;
line-height: 32px;
padding: 5px 0 20px 0;
}
#content .contacts .player {
padding: 15px 0 20px 0;
}
/*headings*/
#content h2 {
color: #c2171d;
margin: 0; padding: 10px 0 10px 0;
font-size: 16px;
font-weight: normal;
}
#content h3 {
display: block;
color: #fff;
font-size: 16px;
font-weight: normal;
width: 721px;
height: 33px;
margin: 0; padding: 8px 0 0 10px;
background: url('../images/bg-pager.png') no-repeat;
}
/*clients-page*/
#content .clients-page {
height: 340px;
}
#content .clients-page .illustration {
margin: 40px 15px 10px 0;
width: 400px;
float: left;
}
#content .clients-page .illustration .description {
margin: 30px 0 30px 10px;
color: #fff;
}
#content .clients-page .illustration .shadow-corner {
width: 150px; height: 127px;
margin: 0 auto;
}
#content .clients-page .illustration .thumb-frame {
width: 150px; height: 127px;
padding: 2px 0 0 2px;
background: url('../images/thumb-frame.png') no-repeat;
}
#content .clients-page .division {
margin: 40px 15px 10px 0;
width: 48px; height: 221px;
background: url('../images/}.png');
float: left;
}
#content .clients-page .client-description {
margin: 130px 0 10px 0;
color: #fff;
width: 270px;
float: left;
}
#content .clients-page .client-description a {
color: #000;
}
/*about us*/
#content .aboutus-work {
color: #fff;
width: 310px;
position: relative;
z-index: 5;
padding: 50px 0 0 120px;
}
#content .aboutus-work ul {
margin: 0; padding: 0;
list-style: none;
font-size: 24px;
}
#content .aboutus-work ul li {
padding: 5px 0 5px 0;
}
#content .aboutus-red-bg {
background: #cd181f;
width: 100%; height: 470px;
left: 0;
position: absolute;
}
#content .aboutus {
color: #fff;
position: relative;
z-index: 5;
width: 731px;
padding: 15px 0 0 0;
}
#content .aboutus .big-gray {
font-size: 20px;
color: black;
padding: 40px 20px 30px 20px;
}
#content .aboutus .big-gray strong {
font-weight: normal;
color: #CD181F;
}
#content .aboutus .black {
color: #000;
padding-left: 10px;
}
#content .aboutus .black li {
padding-bottom: 5px;
}
#content .aboutus dl {
margin: 0; padding: 0;
font-size: 14px;
}
#content .aboutus dl dt {
float: left;
color: black;
width: 250px;
display: block;
font-weight: bold;
text-align: right;
margin-right: 15px;
margin-bottom: 10px;
}
#content .aboutus dl dd {
margin-bottom: 10px;
}
/*blog*/
#container.blog-content {
background: #c8c8c8 url('../images/bg-content-blog.png') repeat-x;
}
#content .blog {
}
#content .blog .tags {
float: left;
width: 200px;
}
#content .blog .tags a {
display: block;
color: #d11920;
padding: 2px 10px 4px 10px;
float: left;
}
#content .blog .tags a.active {
background: #9c1317;
color: #fff;
}
#content .blog .posts {
float: right;
width: 530px;
}
#content .blog .posts .post {
margin-bottom: 20px; padding: 15px;
}
#content .blog .posts .post.mod {
background: #fff;
}
#content .blog .posts h4 {
display: block;
font-size: 16px;
font-weight: normal;
margin: 0; padding: 8px 0 0 20px;
background: url('../images/bullet.png') no-repeat 0 11px;
}
#content .blog .posts .timestamp {
padding: 5px 0 5px 20px;
}
#content .blog .posts .post-tags {
padding: 0 0 15px 20px;
}
#content .blog .posts .post-tags a {
margin-right: 5px;
}
#content .blog .posts .comments-count {
padding: 10px 0 5px 20px;
}
#content .blog .posts p {
padding: 0 0 0 5px;
}
#content .blog-comments {
padding: 20px 0 0 0;
margin: 0 19px 0 20px;
}
#content .blog-comments .thread {
padding: 15px;
margin-right: 65px;
}
#content .blog-comments .thread.mod {
background: #fff;
}
#content .blog-comments .thread .comment {
}
#content .blog-comments .thread .comment.second {
padding-left: 50px;
}
#content .blog-comments .thread .comment .author {
position: relative;
font-weight: bold;
float: left;
margin-right: 10px;
}
#content .blog-comments .thread .comment .timestamp {
position: relative;
float: left;
}
#content .blog-comments .thread .comment .text {
clear: both;
padding: 5px 0;
}
#content .blog-comments .thread .comment .answer {
position: relative;
float: right;
height: 20px;
}
#content .blog-comments .thread .comment .answer a {
color: #d11920;
}
#content .blog-comments .pager {
margin-top: 20px;
}
#content .portfolio-work {
}
#content .portfolio-work .title {
font-size: 16px;
color: #fff;
background: #951316;
padding: 10px 0 15px 15px;
width: 65px;
}
#content .portfolio-work .title a {
color: #fff;
}
#content .portfolio-work .illustration {
margin: 20px 15px 10px 0;
float: left;
}
#content .portfolio-work .illustration .client,
#content .portfolio-work .illustration .description {
font-size: 10px;
margin-left: 10px;
}
#content .portfolio-work .illustration .description {
margin-top: 5px;
}
#content .portfolio-work .illustration .client {
margin-top: 5px;
}
#content .portfolio-work .illustration .thumb-frame {
width: 150px; height: 127px;
padding: 2px 0 0 2px;
background: url('../images/thumb-frame.png') no-repeat;
}
#content .portfolio-work .clear {
height: 30px;
}
#content .portfolio-work .work {
float: left;
margin-top: 20px;
position: relative;
}
#content .portfolio-work .work a.arrow-left {
position: relative;
display: block;
position: absolute;
top: 100px; left: -40px;
width: 38px; height: 44px;
background: url('../images/arrow-left.png') no-repeat;
}
#content .portfolio-work .work a.arrow-left:hover {
background: url('../images/arrow-left-active.png') no-repeat;
}
#content .portfolio-work .work a.arrow-right {
position: relative;
display: block;
position: absolute;
top: 180px; right: -50px;
width: 38px; height: 44px;
background: url('../images/arrow-right.png') no-repeat;
}
#content .portfolio-work .work a.arrow-right:hover {
background: url('../images/arrow-right-active.png') no-repeat;
}
#content .portfolio-work .grad {
background: url('../images/grad-basic.png') no-repeat;
float: left;
margin: 25px 0 0 20px;
width: 35px; height: 167px;
}
#content .portfolio-work .grad .mark {
width: 23px; height: 19px;
float: right;
}
#content .portfolio-work .grad .mark.g10 {
margin-top: 149px;
background: url('../images/grad-10.png') no-repeat;
}
#content .portfolio-work .grad .mark.g20 {
margin-top: 133px;
background: url('../images/grad-20.png') no-repeat;
}
#content .portfolio-work .grad .mark.g30 {
margin-top: 117px;
background: url('../images/grad-30.png') no-repeat;
}
#content .portfolio-work .grad .mark.g40 {
margin-top: 101px;
background: url('../images/grad-40.png') no-repeat;
}
#content .portfolio-work .grad .mark.g50 {
margin-top: 85px;
background: url('../images/grad-50.png') no-repeat;
}
#content .portfolio-work .grad .mark.g60 {
margin-top: 69px;
background: url('../images/grad-60.png') no-repeat;
}
#content .portfolio-work .grad .mark.g70 {
margin-top: 53px;
background: url('../images/grad-70.png') no-repeat;
}
#content .portfolio-work .grad .mark.g80 {
margin-top: 37px;
background: url('../images/grad-80.png') no-repeat;
}
#content .portfolio-work .grad .mark.g90 {
margin-top: 21px;
background: url('../images/grad-90.png') no-repeat;
}
#content .portfolio-work .grad .mark.g100 {
margin-top: 5px;
background: url('../images/grad-100.png') no-repeat;
}
#content .portfolio-work .work-description {
float: right;
color: #fff;
width: 280px;
margin-top: 25px;
padding-right: 65px;
}
#content .portfolio-work .work-description a {
color: #fff;
}
#content .portfolio-work .work-description h4 {
font-size: 16px;
margin: 0; padding: 0 0 5px 0;
}
#content .portfolio-work .work-description .clients {
}
#content .portfolio-work .video-selector .clear {
height: auto;
}
#content .portfolio-work .video-selector a,
#content .portfolio-work .image-selector a {
/*border-bottom: 3px solid transparent;*/
padding-bottom:4px;
width: 67px; height: 56px;
float: left;
display: block;
margin: 1px 6px 6px 1px;
}
#content .portfolio-work .image-selector {
/*height: 90px;*/
}
#content .portfolio-work .image-selector a.current {
padding-bottom: 1px;
border-bottom: 3px solid #951316;
}
#content .portfolio-work .video-selector a img,
#content .portfolio-work .image-selector a img {
border: 1px solid #951316;
}
#content .portfolio-work .video-selector .active {
border-width: 2px;
margin: 0px 5px 5px 0;
}
.blog_comment_post_add {
position: absolute;
width: 713px;
height: 218px;
padding: 10px 0 22px 18px;
color: #fff;
}
.blog_comment_post_add_bg {
width: 731px;
height: 250px;
/*margin-top: -13px;*/
background: transparent url(../images/bg-pager2.png) no-repeat;
}
.commentsbody {visibility: hidden;}
.blog_comment_post_add input {margin: 0 14px 14px 0; border: 0 none; width: 336px; height: 28px; color: #000; font-size: 21px; padding: 0; }
.blog_comment_post_add input.thec {margin: 0; width: 45px; height: 31px; }
.blog_comment_post_add .form_error {color: #fff; padding: 0; }
.blog_comment_post_add .form_error ul {margin: 5px 0 5px 15px; padding: 0;}
.blog_comment_post_add .name_email div {float: left;}
.blog_comment_post_add .buttons { margin: 6px 25px 0 0; text-align: right; padding: 0;}
.blog_comment_post_add .buttons div{ float: right; vertical-align: middle; margin: 0 0 0 14px; padding: 0; }
.blog_comment_post_add .buttons a {color: #FFFFFF; font-size: 16px; text-decoration: none; line-height:26px; }
.blog_comment_post_add .textarea { margin: 0; padding: 0; border: 0 none; space: 0px; border-spacing: 0px; width: 686px; height: 110px; color: #000; font-size: 21px;}
.blog_comment_post_add .textarea.error {height: 86px;}