/*Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*No need to set list-style: none; since .list-group-item is block level*/
.list-group {
margin: 0 0 20px 25px;
font-size: 1.2em;
padding-left: 0; /*reset padding because ul and ol*/
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ========== GENERAL ========== */
body {
font: 62.5%/1.3 Arial, Helvetica, Tahoma, sans-serif;
color: #000;
background: #fff;;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
font-weight: normal;
}
h1 {
margin: .7em 0;
font-size: 2.5em;
}
h2 {
margin-bottom: .4em;
font-size: 2.25em;
}
h3 {
margin-bottom: .3em;
font-size: 1.75em;
line-height: 1.2;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.83em;
}
h6 {
font-size: 0.75em;
}
p {
font-size: 1.2em;
margin-bottom: .8em;
}
hr {
height: 1px;
margin: 1.2em 0;
border: none;
border-top: 1px solid #D8D7CA;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
pre {
margin: 1em 0;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ---------- links --------- */
a:link, a:visited {
outline: none;
color: #505050;
}
a:visited {
color: #707070;
}
a:hover {
color: #075CA3;
}
a img {
border: none;
}
/*Addresses `outline` inconsistency between Chrome and other browsers.*/
a:focus {
outline: thin dotted;
}
/*Improves readability when focused and also mouse hovered in all browsers.*/
a:active,
a:hover {
outline: 0;
}
/* ---------- forms --------- */
form {
margin: 0;
}
legend {
border: 0;
padding: 0;
white-space: normal;
}
button,
input,
select,
textarea {
margin: 0;
font-size: 100%;
vertical-align: baseline;
}
button,
input {
line-height: normal;
}
input, textarea {
outline: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
overflow: visible;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
/* ========== STRUCTURE ==========*/
html, body {
height: 100%;
}
.wrap,
.footer {
width: 922px;
padding: 0 38px 0 40px;
}
.wrap {
min-height: 100%;
margin: 0 auto -112px;
}
.push {
padding: 0 0 112px;
}
.header {
padding: 38px 0 15px;
}
.main-content {
float: left;
width: 614px;
margin-right: 12px;
}
.secondary {
float: right;
width: 296px;
}
.footer {
margin: 30px auto 0;
}
/* ========== HEADER ========== */
.header ul {
list-style: none;
}
/* ---------- logo --------- */
.logo {
float: left;
width: 86px;
height: 86px;
margin-right: 1.5em;
}
.logo span {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.logo a {
border: 0;
text-decoration: none;
}
.logo img {
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
.logo:hover img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/* ---------- ports-brand-car --------- */
.header .ports-brand-car {
float: left;
height: 60px;
}
.ports-brand-car .brand-car {
position: relative;
float: left;
width: 45px;
}
.brand-car a {
display: block;
height: 30px;
text-decoration: none;
background: url(../img/nav_logos.jpg) no-repeat;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.brand-car span {
display: block;
position: absolute;
top: 30px;
left: -32px;
width: 106px;
max-height: 0;
overflow: hidden;
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
line-height: 1;
text-transform: uppercase;
}
.brand-car:hover span {
max-height: 38px;
overflow: visible;
padding: 10px 0 2px;
background: url(../img/submenu_title.png) no-repeat;
}
.brand-car em {
display: block;
padding: 0 0 2px;
font-size: 12px;
text-decoration: underline;
text-transform: none;
font-style: normal;
}
.ports-brand-car .port-1 a:hover {background-position: 0 -30px;}
.ports-brand-car .port-2 a {background-position: -45px 0;}
.ports-brand-car .port-2 a:hover {background-position: -45px -30px;}
.ports-brand-car .port-3 a {background-position: -90px 0;}
.ports-brand-car .port-3 a:hover {background-position: -90px -30px;}
.ports-brand-car .port-4 a {background-position: -135px 0;}
.ports-brand-car .port-4 a:hover {background-position: -135px -30px;}
.ports-brand-car .port-5 a {background-position: -180px 0;}
.ports-brand-car .port-5 a:hover {background-position: -180px -30px;}
.ports-brand-car .port-6 a {background-position: -225px 0;}
.ports-brand-car .port-6 a:hover {background-position: -225px -30px;}
.ports-brand-car .port-7 a {background-position: -270px 0;}
.ports-brand-car .port-7 a:hover {background-position: -270px -30px;}
.ports-brand-car .port-8 a {background-position: -315px 0;}
.ports-brand-car .port-8 a:hover {background-position: -315px -30px;}
.ports-brand-car .port-9 a {background-position: -360px 0;}
.ports-brand-car .port-9 a:hover {background-position: -360px -30px;}
.ports-brand-car .port-10 a {background-position: -405px 0;}
.ports-brand-car .port-10 a:hover {background-position: -405px -30px;}
.ports-brand-car .port-11 a {background-position: -450px 0;}
.ports-brand-car .port-11 a:hover {background-position: -450px -30px;}
.ports-brand-car .port-1:hover span,
.ports-brand-car .port-5:hover span,
.ports-brand-car .port-11:hover span {background-position: 0 -111px;}
.ports-brand-car .port-2:hover span,
.ports-brand-car .port-4:hover span,
.ports-brand-car .port-6:hover span {background-position: 0 -37px;}
.ports-brand-car .port-3:hover span {background-position: 0 -148px;}
.ports-brand-car .port-10:hover span,
.ports-brand-car .port-7:hover span {background-position: 0 -74px;}
/* ---------- menu --------- */
.header .menu {
float: right;
margin: .2em 3.3em 0 12em;
}
.menu a {
color: #505050;
font-size: 1.4em;
line-height: 1.4;
}
.menu li:hover a {
color: #075ca3;
}
/* ---------- h1 container --------- */
h1 a {
display: inline-block;
color: #000;
border-bottom: 1px dashed #000;
font-size: 1.3em;
line-height: 1;
text-decoration: none;
}
h1 a:hover {
opacity: .6;
}
h1 a span {
color: #075ca3;
text-shadow: 2px 2px 0 #eee, 3px 3px 0 #075ca3;
}
/* ---------- nav --------- */
.nav li {
display: inline-block;
}
.nav a {
display: block;
margin-right: -4px;
padding: .3em .7em .3em;
font-size: 2em;
}
.nav a:hover {
color: #075ca3;
background: #e4e4e4;
}
.nav a:active,
.nav li.active a {
color: #fff;
background: #0057a0; /* Old browsers */
background: -moz-linear-gradient(top, #0075c1 0%, #0057a0 100%); /* FF3.6+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0075c1), color-stop(100%,#0057a0)); /* Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #0075c1 0%,#0057a0 100%); /*Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0075c1 0%,#0057a0 100%); /*Opera 11.10+*/
background: -ms-linear-gradient(top, #0075c1 0%,#0057a0 100%); /* IE10+ */
background: linear-gradient(to bottom, #0075c1 0%,#0057a0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0075c1', endColorstr='#0057a0',GradientType=0 ); /*IE6-8*/
}
.nav a:hover + span,
.nav a:active + span,
.nav .active span {
display: block;
width: 0;
height: 0;
margin: auto;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.nav a:hover + span {
border-top: 6px solid #e4e4e4;
}
.nav a:active + span,
.nav li.active span {
border-top: 6px solid #0057a0;
}
/* ---------- rss --------- */
#rss {
position: fixed;
right: 0;
top: 185px;
height: 37px;
}
#rss a {
display: block;
width: 1px;
height: 27px;
padding: 10px 0 0 46px;
color: #fff;
background: url(../img/rss.png) no-repeat;
font-size: 12px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#rss a:hover {
width: 80px;
text-decoration: underline;
}
/* ========== styles MAIN-CONTENT & SECONDARY ========== */
.wrap h3 a {
color: #075ca3;
}
.wrap h3 a:hover {
text-decoration: none;
}
.date {
display: block;
margin-bottom: .5em;
color: #707070;
font-size: 1.2em;
}
.wrap .secondary-article img {
float: left;
margin: 0 .8em 0 0;
}
.wrap .comment {
padding-left: 28px;
color: #707070;
font-size: 1.2em;
text-decoration: none;
background: url(../img/comment_icon.png) no-repeat 4px 0;
}
.wrap .comment:hover {
color: #3e3e3e;
text-decoration: underline;
}
/* ========== MAIN-CONTENT========== */
.main-content .main-article {
float: left;
width: 260px;
margin-right: 12px;
}
.main-content .secondary-article-container {
float: right;
width: 340px;
}
.main-content .secondary-article {
padding-bottom: 1.25em;
}
.main-content .secondary-article-container hr {
margin: 0 0 1em;
}
.main-content .main-article img {
margin-bottom: 1em;
}
.main-content .article img,
.main-content .post img {
float: left;
margin: 0 1em 1em 0;
}
/* ========== SECONDARY ========== */
/* ---------- form-search --------- */
#form-search {
width: 278px;
height: 61px;
margin-top: 16px;
padding: 11px 0 5px 16px;
background: url(../img/search_bg.png) no-repeat;
}
#form-search input {
float: left;
height: 14px;
border: 0;
background: none;
}
#form-search input.search-txt {
width: 220px;
margin-left: 5px;
padding: 2px 0 2px 6px;
color: #a6a6a6;
line-height: 14px;
font-size: 1.2em;
}
#form-search input.search-btn {
width: 19px;
padding: 2px 0;
}
#form-search input.search-btn:hover {
opacity: .5;
}
/* ---------- tags-cloud --------- */
.tags-cloud {
width: 295px;
margin-top: .8em;
}
.tags-cloud li {display: inline;}
.tags-cloud li.w1 a {font-size: 1em;}
.tags-cloud li.w2 a {font-size: 1.167em;}
.tags-cloud li.w3 a {font-size: 1.333em;}
.tags-cloud li.w4 a {font-size: 1.5em;}
.tags-cloud li.w5 a {font-size: 2.25em;}
.tags-cloud li.w6 a {font-size: 2.5em;}
.tags-cloud li a:hover {text-decoration: underline;}
/* ---------- readable-article-container --------- */
.readable-articles-container {
margin: 2.1em 0 1.7em;
padding: 1.7em 1.5em;
background: #f1f1f1;
}
.readable-article {
margin-bottom: 1.7em;
}
/* ========== FOOTER ========== */
.in-footer {
padding: 1.6em 0;
border-top: 1px solid #c0c0c0;
font-size: 1.2em;
}
.copyright {
float: left;
margin-top: .17em;
}
.copyright p {
margin-bottom: 0;
font-weight: bold;
}
.copyright a {
text-decoration: none;
}
.design-by {
float: right;
width: 13em;
height: 3.3em;
margin-right: 1.7em;
}
.design-by .design-logo {
display: block;
float: left;
width: 40px;
height: 40px;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
.design-by .design-link {
float: left;
width: 8.75em;
height: 3em;
padding: .33em 0 0 .6em;
}
.design-by .design-link a {
color: #075ca3;
font-weight: bold;
}
.design-by .design-link a:hover {
color: #707070;
}
.design-by .design-logo:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/* ========== Elements other html-page styles ========== */
/* ---------- pagination --------- */
#pagination {
width: 177px;
height: 58px;
margin: 14px auto 0;
}
#pagination li {
float: left;
height: 37px;
padding: 0 3px;
text-align: center;
line-height: 37px;
font-size: 24px;
list-style: none;
}
.page-nav li a {
display: block;
text-decoration: none;
}
.page-nav li a.pager-previous,
.page-nav li a.pager-next-last {
padding: 0 6px;
}
.page-nav li a.pager-previous:hover,
.page-nav li a.pager-next-last:hover {
background: #e4e4e4;
}
.next-prev a {
color: #000;
border-bottom: 1px dashed #000;
text-decoration: none;
font-size: 1.3em;
line-height: .9;
}
.next-prev a:hover {
color: #075ca3;
opacity: .7;
}
.next-prev .pager-last {
float: left;
}
.next-prev .pager-first {
float: right;
}
/* ---------- post --------- */
.post {
margin: 1.2em 0 3em;
}
.page p {
margin-bottom: 1.4em;
line-height: 1.4;
}
.page p a {
text-decoration: underline;
color: #075ca3;
}
.page p a:hover {
text-decoration: none;
color: #707070;
}
/* ---------- comment-list-container --------- */
.comments-list-container h3 {
margin-bottom: .6em;
}
.comment-list {
padding: 1.2em 1em .5em;
font-size: 1.2em;
background: #f0f0f0;
}
.comment-list .comment-item {
margin: 0 0 1em 1em;
color: #707070;
}
.comment-header {
margin-bottom: .3em;
}
.comment-item .users {
font-weight: bold;
}
.comment-item a {
text-decoration: none;
}
.comment-content {
margin-bottom: .5em;
font-size: .8em;
color: #000;
}
.comment-item .comment-answer {
padding-left: 28px;
color: #075ca3;
text-decoration: underline;
background: url(../img/comment_icon.png) no-repeat 4px 0;
}
.comment-item .comment:hover {
color: #075ca3;
}
.comment-item .comment-answer:hover {
color: #707070;
}
/* ---------- comments-holder --------- */
.comments-holder {
position: relative;
width: 446px;
margin: 18px 0 0 40px;
padding: 17px 18px 14px;
border: 1px solid #c9c9c9;
}
.holder-arrow,
.holder-arrow-border {
position:absolute;
left: 25px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px;
}
.holder-arrow {
top: -16px;
border-color: transparent transparent #fff transparent;
}
.holder-arrow-border {
top: -17px;
border-color: transparent transparent #a7a7a8 transparent;
}
.comments-holder textarea {
width: 436px;
height: 100px;
margin-bottom: 8px;
padding: 5px;
overflow: auto;
resize: vertical;
border: 1px solid #c9c9c9;
font: 14px Georgia, "Times New Roman", serif;
}
.comments-holder textarea:focus,
.comments-holder input:focus {
outline: 2px solid #aec8e6;
}
.comments-holder p {
margin-bottom: 6px;
}
.comments-holder p input {
width: 238px;
margin-right: 7px;
border: 1px solid #c9c9c9;
}
.comments-holder label span {
display: inline-block;
width: 106px;
font-weight: bold;
}
.comments-holder button {
margin: 20px 0 0;
}
.btn {
width: 84px;
height: 34px;
padding: 0 4px 5px;
border: none;
outline: none;
cursor: pointer;
font-size: 11px;
background: url(../img/bg_sprite-button.jpg) 0 -70px no-repeat;
}
.btn:hover {
background-position: 0 -36px;
}
.btn:active {
background-position: 0 0;
}
/* ---------- search-block --------- */
.search-block {
margin-top: 1.5em;
}
.check-search label {
float: left;
height: 38px;
font-size: 2.3em;
}
.check-search input {
float: left;
width: 16em;
height: 20px;
margin: 0 .3em;
padding: 5px 10px;
border: 1px solid #d7d7d7;
color: #707070;
font-size: 15px;
line-height: 20px;
}
.check-search input:focus {
color: #000;
outline: 2px solid #aec8e6;
}
.check-search button {
float: left;
margin-left: .9em;
font-size: 1.6em;
}
.checkbox-search {
margin: 1em 0 1.7em 9.1em;
font-size: 1.2em;
}
.checkbox-search label {
margin-right: .5em;
}
/* ---------- search-result-container --------- */
.search-result-container h2 em {
font: italic 1em Georgia, "Times New Roman", serif;
}
.result-item {
margin: 0 0 1.6em 1.6em;
font-size: 1.2em;
}
.result-item h3 {
margin: 0 0 .3em;
font-size: 19px;
}
.result-item h3 span {
color: #000;
font-size: 12px;
}
.result-item p {
margin: .4em 0 0;
font-size: 1em;
}
/* ---------- video --------- */
.pop-video {
margin-top: 1.6em;
padding: 1.8em;
background: #f1f1f1;
}
.pop-video .pop-img {
float: left;
margin: 0 1em 1em 0;
}
.video-list {
margin: 3em 0 0;
}
.video-item {
display: inline-block;
width: 120px;
margin: 0 40px 20px 0;
vertical-align: top;
font-size: 1.2em;
}
.video-item.last {
margin-right: 0;
}
.video-item img {
margin-bottom: 1em;
}
.video-item h4 {
clear: both;
margin-bottom: 8px;
}
.video-item h4 a,
.related-video-item h4 a {
font-size: 1.3em;
font-weight: normal;
color: #075CA3;
}
.video-item h4 span {
font-weight: normal;
}
.video-item h4 a:hover,
.related-video-item h4 a:hover {
color: #707070;
text-decoration: none;
}
/* ---------- rating-stars --------- */
.rating {
position: relative;
width: 80px;
height: 16px;
background: url(../img/stars.png);
}
.rating div,
.rating span {
position: absolute;
top: 0;
left: 0;
width: 0;
cursor: pointer;
height: 100%;
}
.rating div {
background: url(../img/stars.png) 0 100%;
z-index: 1;
}
.rating span {
display: block;
background: url(../img/stars.png) 0 50%;
z-index: 2;
}
/* ---------- watch-video-container --------- */
.watch-video-container {
margin-bottom: 3em;
}
.video-title {
margin-top: 18px;
}
.video-title .description {
float: left;
width: 355px;
margin-right: 1em;
}
.video-title .metadata {
float: right;
width: 242px;
font-size: 1.2em;
}
.rating-star {
margin-bottom: 14px;
padding: 15px 0 15px 17px;
background: #f1f1f1;
}
.rating-star p {
float: left;
margin-right: 2px;
font-size: 12px;
}
.rating-star .rating {
float: left;
}
.rating-star .rating-info {
clear: both;
font-size: 21px;
}
.user-date,
.category {
margin-bottom: 4px;
}
.user-date .date {
display: inline;
font-size: 1em;
}
.category a {
color: #075CA3;
}
.category a:hover {
color: #505050;
}
/* ---------- related-videos --------- */
.related-videos {
margin-top: 6em;
}
.related-video-item {
margin-bottom: 18px;
font-size: 1.2em;
}
.related-video-item a iframe {
float: left;
margin-right: 12px;
}
.related-video-item h4 span {
font-weight: normal;
}
.rating-wrap {
float: left;
width: 150px;
}
/* ---------- self-clear floats --------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
