/* RoyalGold theme */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent
}
article, aside, figure, footer, header, hgroup, nav, section {
display: block
}
.clearfix:before, .clearfix:after {
display: table;
content: ""
}
.clearfix:after {
clear: both
}
.ie7 .clearfix {
zoom: 1
}
.clear {
clear: both
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
position: static;
clip: auto;
height: auto;
width: auto;
margin: 0;
overflow: visible
}
@font-face {
font-family: 'Filetto';
src: url('../fonts/filetto_regular-webfont.eot');
src: url('../fonts/filetto_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/filetto_regular-webfont.woff') format('woff'), url('../fonts/filetto_regular-webfont.ttf') format('truetype'), url('../fonts/filetto_regular-webfont.svg#filettoregular') format('svg');
font-weight: 400;
font-style: normal
}
html {
background: #eaeaea url('../images/bg_pattern.png') repeat top center fixed;
font-size: 14px;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
::-moz-selection {
color:#fff;
background-color:#2582c2;
text-shadow:none
}
::selection {
color: #fff;
background-color: #2582c2;
text-shadow: none
}
body {
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 14px;
line-height: 24px;
color: #333
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: inherit;
font-weight: 700;
color: inherit;
text-rendering: optimizelegibility
}
h1 small, h2 small {
font-weight: 400;
color: #bfbfbf
}
h1 {
margin-bottom: 24px;
font-size: 32px;
font-size: 3.2rem;
line-height: 1.2
}
h2 {
margin-bottom: 24px;
font-size: 24px;
font-size: 2.4rem;
line-height: 1.2
}
h3 {
margin-bottom: 24px;
font-size: 21px;
font-size: 2.1rem;
line-height: 1.3
}
h4 {
margin-bottom: 12px;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.25
}
h5 {
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 12px
}
h6 {
margin-bottom: 24px;
font-size: 14px;
font-size: 1.4rem;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase
}
.no-bottom {
margin-bottom: 0!important
}
p, ol, ul, dl, address {
margin-bottom: 24px
}
.small {
font-size: 13px;
font-size: 1.3rem
}
ul, ol {
margin: 0 0 24px 24px;
list-style-position: inside
}
ul {
list-style-type: none
}
ol {
list-style-type: decimal
}
ul.square {
list-style-type: square
}
ul.circle {
list-style-type: circle
}
ul.disc {
list-style-type: disc
}
ol.upper-roman {
list-style-type: upper-roman
}
ol.lower-roman {
list-style-type: lower-roman
}
ol.upper-alpha {
list-style-type: upper-alpha
}
ol.lower-alpha {
list-style-type: lower-alpha
}
ul.mdash {
margin-left: 0
}
ul.mdash li:before {
content: '\2014';
margin-right: 8px;
position: relative;
top: -1px
}
ul.links {
margin-left: 0
}
ul.links li h5 {
padding-bottom: 5px;
margin-bottom: 5px;
font-family: 'Filetto';
border-bottom: 1px dotted #666
}
ul.links li h5:before {
content: '\00BB';
margin-left: 7px;
margin-right: 8px;
position: relative;
top: -1px
}
.list-bordered {
list-style-type: none;
margin: 0 0 24px 0;
padding: 0
}
.list-bordered li {
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px dotted #ddd
}
em {
font-style: italic
}
strong {
font-weight: 700
}
small {
font-size: 80%
}
li ul, li ol {
margin: 0
}
blockquote {
position: relative;
margin: 0 0 24px;
padding-left: 24px;
padding-right: 24px;
border-left: 1px solid #737373;
font-family: Georgia, Times, "Times New Roman";
font-style: italic;
color: #737373
}
blockquote:before, blockquote:after {
content: ''
}
blockquote:before {
position: absolute;
top: 0;
left: 1px;
border-left: 1px solid #737373;
height: 100%
}
cite {
display: block;
text-indent: 40px;
position: relative
}
cite:before {
content: "\201c";
font-weight: 700;
font-style: normal;
font: 94px/74px Arial;
position: absolute;
top: -2px;
left: -36px
}
cite a, cite a:visited, cite a:visited {
color: #737373
}
dl, dd {
margin-bottom: 24px
}
dt {
font-weight: 700
}
abbr[title] {
border-bottom: 1px dotted #ddd;
cursor: help
}
dfn {
font-style: italic
}
ins {
background-color: #fff;
color: #333;
text-decoration: none
}
mark {
background-color: #fff;
color: #333;
font-style: italic;
font-weight: 700
}
pre, code, kbd, samp {
font-family: Monaco, Courier New, monospace;
font-size: 14px;
font-size: 1.4rem;
line-height: 24px
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word
}
sub, sup {
position: relative;
font-size: 12px;
font-size: 1.2rem;
line-height: 0
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
hr {
display: block;
margin: 1em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff
}
img {
max-width: 100%;
height: auto;
border-width: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic
}
p img.left {
float: left;
margin: 5px 12px 12px 0
}
p img.right {
float: right;
margin: 5px 0 12px 12px
}
svg:not(:root) {
overflow: hidden
}
figure {
margin-bottom: 24px
}
figure img {
margin-bottom: 6px
}
figure figcaption {
display: block;
font-weight: 400;
font-size: 14px;
font-size: 1.4rem;
color: #808080
}
a {
text-decoration: none;
color: #2379b4;
}
a:visited {
color: #512700;
}
a:hover {
text-decoration: underline;
color: #33afe5;
}
a:focus {
outline: thin dotted;
color: #1e0e00
}
a:hover, a:active {
outline: 0
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 24px;
border-collapse: collapse;
border-spacing: 0;
background-color: #fff;
border: 1px solid #d9d9d9
}
table th, table td {
padding: 4px;
vertical-align: top;
border: 1px solid #d9d9d9;
font-size: 14px;
font-size: 1.4rem;
line-height: 24px;
text-align: left
}
table th {
font-weight: 700;
text-transform: uppercase;
background-color: #2582c2;
border: 1px solid #fe7900;
color: #fff
}
table thead th {
vertical-align: bottom
}
table tbody+tbody {
border-top: 2px solid #d9d9d9
}
table tbody tr td, table tbody tr th {
-webkit-transition: background-color .25s linear;
-moz-transition: background-color .25s linear;
-ms-transition: background-color .25s linear;
-o-transition: background-color .25s linear;
transition: background-color .25s linear
}
table tbody tr:hover td, table tbody tr:hover th {
background-color: #ededed!important
}
table.table-striped tbody tr:nth-child(odd) td, table.table-striped tbody tr:nth-child(odd) th {
background-color: #fafafa
}
.button, button, input[type=submit], input[type=reset], input[type=button] {
display: inline-block;
padding: 8px 12px;
margin-bottom: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
text-decoration: none;
cursor: pointer;
color: #fff;
background-color: #2582c2;
border: 0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear
}
.button.small, button.small, input[type=submit].small, input[type=reset].small, input[type=button].small {
font-size: 11px;
font-size: 1.1rem;
margin-bottom: 0;
padding: 0 4px
}
.button.big, button.big, input[type=submit].big, input[type=reset].big, input[type=button].big {
font-size: 21px;
font-size: 2.1rem;
padding: 20px 28.799999999999997px
}
.button:visited, button:visited, input[type=submit]:visited, input[type=reset]:visited, input[type=button]:visited, .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
color: #fff;
text-decoration: none
}
.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus {
background-color: #3ec1f2;
color: #fff
}
.button:active, button:active, input[type=submit]:active, input[type=reset]:active, input[type=button]:active {
background-color: #d16300
}
.button.full-width, button.full-width, input[type=submit].full-width, input[type=reset].full-width, input[type=button].full-width {
width: 100%;
padding-left: 0!important;
padding-right: 0!important;
text-align: center
}
.button.button-disabled, button.button-disabled, input[type=submit].button-disabled, input[type=reset].button-disabled, input[type=button].button-disabled {
opacity: .5;
filter: alpha(opacity=50);
cursor: default
}
.button.grey, button.grey, input[type=submit].grey, input[type=reset].grey, input[type=button].grey {
background-color: #ccc;
color: #000
}
.button.grey:hover, button.grey:hover, input[type=submit].grey:hover, input[type=reset].grey:hover, input[type=button].grey:hover, .button.grey:focus, button.grey:focus, input[type=submit].grey:focus, input[type=reset].grey:focus, input[type=button].grey:focus {
background-color: #bfbfbf
}
.button.grey:active, button.grey:active, input[type=submit].grey:active, input[type=reset].grey:active, input[type=button].grey:active {
background-color: #b3b3b3
}
.button.dark, button.dark, input[type=submit].dark, input[type=reset].dark, input[type=button].dark {
background-color: #333;
color: #eaeaea
}
.button.dark:hover, button.dark:hover, input[type=submit].dark:hover, input[type=reset].dark:hover, input[type=button].dark:hover, .button.dark:focus, button.dark:focus, input[type=submit].dark:focus, input[type=reset].dark:focus, input[type=button].dark:focus {
background-color: #4d4d4d
}
.button.dark:active, button.dark:active, input[type=submit].dark:active, input[type=reset].dark:active, input[type=button].dark:active {
background-color: #595959
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
form {
margin-bottom: 24px
}
label, legend {
display: block;
font-weight: 700;
font-size: 13px;
}
label.checkbox {
margin-bottom: 12px
}
input[type=text], input[type=password], input[type=email], input[type=date], textarea, select {
border: 1px solid #bfbfbf;
outline: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #000;
width: 230px;
max-width: 100%;
display: block;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 24px;
padding: 6px 4px
}
input[type=text].full-width, input[type=password].full-width, input[type=email].full-width, input[type=date].full-width, textarea.full-width, select.full-width {
width: 100%
}
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=date]:hover, textarea:hover, select:hover {
border: 1px solid #a6a6a6
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus {
border: 1px solid #2582c2;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.15);
box-shadow: 0 0 3px rgba(0,0,0,.15)
}
input[type=text]:focus:invalid, input[type=password]:focus:invalid, input[type=email]:focus:invalid, input[type=date]:focus:invalid, textarea:focus:invalid, select:focus:invalid {
border-color:#e55
}
input[type=text][readonly], input[type=password][readonly], input[type=email][readonly], input[type=date][readonly], textarea[readonly], select[readonly], input[type=text][readonly], input[type=password][readonly], input[type=email][readonly], input[type=date][readonly], textarea[readonly], select[readonly] {
opacity: .5;
filter: alpha(opacity=50);
cursor: not-allowed
}
.ie7 input[type=text].full-width, .ie7 input[type=password].full-width, .ie7 input[type=email].full-width, .ie7 input[type=date].full-width, .ie7 textarea.full-width, .ie7 select.full-width {
width: 85%
}
textarea {
width: 450px;
min-height: 60px;
overflow: auto
}
input.inline {
display: inline-block
}
select {
width: 230px
}
.oldie select {
width: 240px
}
input[type=checkbox], input[type=radio] {
display: inline;
position: relative;
top: 1px
}
label span, legend span {
font-weight: 400;
font-size: 12px;
font-size: 1.2rem
}
::-webkit-input-placeholder, :-moz-placeholder {
color:#ccc
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background: url("../images/loading.gif") no-repeat center center;
background-color: rgba(0,0,0,.02)
}
.video-container iframe, .video-container object, .video-container embed, .video-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.video-wrapper {
max-width: 100%
}
.sep {
margin-bottom: 24px;
height: 2px;
border-top: 1px solid #808080;
position: relative;
clear: both
}
.sep span {
display: block;
position: absolute;
left: 0;
top: 1px;
width: 100%;
border-top: 1px solid #808080
}
.sep-margin-top {
margin-top: 24px
}
.sep-no-margin {
margin-bottom: 0
}
.thumb {
position: relative;
display: inline-block;
margin-bottom: 24px
}
.thumb img {
width: 100%;
display: inline-block
}
.thumb .overlay {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: #2582c2;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear
}
.thumb .icon-fullsize, .thumb .icon-link, .thumb .icon-video {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
display: block;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
background: url("../images/sprite.png") no-repeat -999px 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear
}
.thumb .icon-link {
background-position: 0 -60px
}
.thumb .icon-fullsize {
background-position: -20px -60px
}
.thumb .icon-video {
width: 17px;
margin-left: -8px;
background-position: -40px -60px
}
.thumb:hover .overlay {
opacity: .75;
filter: alpha(opacity=75)
}
.thumb:hover .icon-fullsize, .thumb:hover .icon-link, .thumb:hover .icon-video {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none
}
.accordion {
margin-left: 0
}
.accordion .accordion-title {
cursor: pointer;
padding-bottom: 5px;
margin-bottom: 0;
font-family: 'Filetto';
color: #b75700;
border-bottom: 1px dotted #666
}
.accordion .accordion-title:hover {
color: #843f00
}
.accordion .accordion-title:before {
content: '+';
margin-left: 7px;
margin-right: 8px;
font-size: 15px;
font-size: 1.5rem;
font-family: Arial, sans-serif
}
.accordion .accordion-content {
height: 0;
margin-left: 22px;
margin-bottom: 5px;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear
}
.accordion .active .accordion-title {
color: #1a1a1a
}
.accordion .active .accordion-title:before, .accordion .no-js .accordion .accordion-title:before {
content: '\2013'
}
.accordion .active .accordion-content, .accordion .no-js .accordion .accordion-content {
padding-top: 5px;
height: auto;
opacity: 1;
filter: alpha(opacity=100)
}
.ie7 .accordion .accordion-title:before {
content: '';
width: 0;
margin: 0;
display: none
}
.ie7 .accordion .active .accordion-title {
color: #2582c2
}
.tab-container {
margin-bottom: 24px
}
.tab-container .tab_content {
border: 1px solid #ddd;
background: #f9f9f9;
padding: 20px 20px 0
}
.tab-container .tabs {
list-style: none;
margin: 0
}
.tab-container .tabs li {
float: left;
margin: 3px 5px 0 0
}
.tab-container .tabs li a {
display: block;
text-decoration: none;
color: #808080;
background: #f2f2f2;
border: 1px solid #ddd;
border-bottom: 0;
padding: 5px 15px;
font-size: 13px;
font-size: 1.3rem
}
.tab-container .tabs li a:hover {
background-color: #e6e6e6
}
.tab-container .tabs li.active {
margin-top: 0;
margin-bottom: -1px
}
.tab-container .tabs li.active a {
color: #b75700;
border-top: 3px solid #2582c2;
background: #f9f9f9;
padding: 6px 20px
}
.oldie .tabs li.active {
position: relative;
top: 1px
}
.dropcap {
float: left;
background-color: #bfbfbf;
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 23px;
font-size: 2.3rem;
margin: 2px 8px 0 0
}
.dropcap.color {
background-color: #2582c2;
color: #fff
}
.alert {
position: relative;
margin-bottom: 12px;
font-size: 13px;
font-size: 1.3rem;
border-left: 3px solid #c4c4c4;
padding: 10px 12px
}
.alert.info {
background-color: #fff;
border-color: #d9d9d9
}
.alert.success {
background-color: #dbfac9;
border-color: #acf483
}
.alert.notice {
background-color: #fff8be;
border-color: #fff072
}
.alert.error {
background-color: #ffc7b9;
border-color: #ff8a6d
}
.tipsy {
font-size: 11px;
font-size: 1.1rem;
position: absolute;
padding: 5px;
z-index: 100000
}
.tipsy .tipsy-inner {
background-color: #111;
color: #fff;
max-width: 200px;
padding: 4px 12px;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px
}
.tipsy .tipsy-arrow {
position: absolute;
width: 0;
height: 0;
line-height: 0;
border: 5px dashed #111
}
.tipsy .tipsy-arrow-n {
border-bottom-color: #111;
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-style: solid;
border-top: 0;
border-left-color: transparent;
border-right-color: transparent
}
.tipsy .tipsy-arrow-s {
border-top-color: #111;
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-style: solid;
border-bottom: 0;
border-left-color: transparent;
border-right-color: transparent
}
.tipsy .tipsy-arrow-e {
border-left-color: #111;
right: 0;
top: 50%;
margin-top: -5px;
border-left-style: solid;
border-right: 0;
border-top-color: transparent;
border-bottom-color: transparent
}
.tipsy .tipsy-arrow-w {
border-right-color: #111;
left: 0;
top: 50%;
margin-top: -5px;
border-right-style: solid;
border-left: 0;
border-top-color: transparent;
border-bottom-color: transparent
}
.panorama {
position: fixed;
z-index: -999;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.panorama .panorama-view {
width: 100%;
height: 100%;
overflow: hidden;
cursor: url("../images/openhand.cur"), default
}
.panorama .grab {
cursor: url("../images/closedhand.cur"), default
}
.panorama .panorama-container {
position: relative
}
.panorama .panorama-container img {
height: 100%;
position: absolute;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none
}
.panorama .info, .panorama .area {
position: absolute;
display: block
}
.panorama .info {
left: 10px;
bottom: 10px
}
.panorama .controls {
position: absolute;
right: 20px;
bottom: 20px
}
.panorama .controls a {
display: block;
float: left;
margin-right: 5px
}
.panorama .controls a span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url("../images/panorama-controls.png") no-repeat -999px 0
}
.panorama .controls a.prev span, .panorama .controls a.next span {
width: 10px;
height: 14px
}
.panorama .controls a.prev span {
background-position: 0 0
}
.panorama .controls a.next span {
margin-left: 1px;
background-position: -11px 0
}
.panorama .controls a.stop span {
margin: 2px 1px;
width: 10px;
height: 10px;
background-position: -22px -2px
}
.panorama .info, .panorama .controls a {
opacity: .8;
filter: alpha(opacity=80);
background-color: #fff;
color: #fff;
font: bold 11px/14px Arial, sans-serif;
text-decoration: none;
padding: 6px 7px;
cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear
}
.panorama .info:hover, .panorama .controls a:hover {
opacity: 1;
filter: alpha(opacity=100)
}
.panorama .panorama-view .area {
opacity: .4;
filter: alpha(opacity=40);
background-color: #fff;
cursor: pointer;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden
}
.panorama .panorama-view .area:hover {
opacity: .6;
filter: alpha(opacity=60)
}
.panorama .panorama-view .area.white {
background-color: #fff
}
.panorama .panorama-view .area.black {
background-color: #000
}
.panorama .preloader {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
text-indent: -999em;
background: #fff url('../images/loading.gif') no-repeat center center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px
}
@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.panorama .controls a.prev span, .panorama .controls a.stop span, .panorama .controls a.next span {
background-image: url("../images/panorama-controls2.png");
-webkit-background-size: 32px 14px;
background-size: 32px 14px
}
.panorama .preloader {
background-image: url("../images/loading2.gif");
-webkit-background-size: 26px 26px;
-moz-background-size: 26px 26px;
-o-background-size: 26px 26px;
background-size: 26px 26px
}
}
#supersized-loader {
position: fixed;
z-index: -1;
top: 50%;
left: 50%;
z-index: 0;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
text-indent: -999em;
background: #fff url('../images/loading.gif') no-repeat center center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px
}
#supersized {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
margin: 0;
visibility: hidden
}
#supersized img {
width: auto;
height: auto;
max-height: none;
max-width: none;
position: relative;
display: none;
outline: 0;
border: 0
}
#supersized li {
display: block;
list-style: none;
z-index: -30;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%
}
#supersized li.prevslide {
z-index: -20
}
#supersized li.activeslide {
z-index: -10
}
#supersized li.image-loading {
background: url('../images/loading.gif') no-repeat center center;
width: 100%;
height: 100%
}
#supersized li.image-loading img {
visibility: hidden
}
#supersized li.prevslide img, #supersized li.activeslide img {
display: inline
}
#supersized a {
width: 100%;
height: 100%;
display: block
}
.home #supersized {
right: 0;
height: 100%;
width: 100%
}
#supersized.speed img {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges
}
#supersized.quality img {
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality
}
@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
#supersized-loader, #supersized li.image-loading {
background-image: url("../images/loading2.gif");
-webkit-background-size: 26px 26px;
-moz-background-size: 26px 26px;
-o-background-size: 26px 26px;
background-size: 26px 26px
}
}
#okvideo-loader {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
text-indent: -999em;
background: #fff url('../images/loading.gif') no-repeat center center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px
}
#okplayer-mask {
display: none
}
@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
#okvideo-loader {
background-image: url("../images/loading2.gif");
-webkit-background-size: 26px 26px;
-moz-background-size: 26px 26px;
-o-background-size: 26px 26px;
background-size: 26px 26px
}
}
.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: 0;
vertical-align: top
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px
}
.fancybox-opened {
z-index: 8030
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25)
}
.fancybox-outer, .fancybox-inner {
position: relative
}
.fancybox-inner {
overflow: hidden
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%
}
.fancybox-image {
max-width: 100%;
max-height: 100%
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("../images/fancybox_sprite.png");
background-repeat: no-repeat
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: .8;
cursor: pointer;
z-index: 8060
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url("../images/loading.gif") center center no-repeat
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url(data:;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040
}
.fancybox-prev {
left: 0
}
.fancybox-next {
right: 0
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px
}
.fancybox-nav:hover span {
visibility: visible
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible!important
}
.fancybox-lock {
overflow: hidden
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVR42mIU4OHZwEAEYGIgEowqpI5CgAADAGiRAOzkX/wUAAAAAElFTkSuQmCC)
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0
}
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
text-shadow: none;
z-index: 8050
}
.fancybox-opened .fancybox-title {
visibility: visible
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent;
background: rgba(0,0,0,.8);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: 700;
line-height: 24px;
white-space: nowrap
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff
}
.fancybox-title-inside-wrap {
padding-top: 10px
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0,0,0,.8)
}
@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
#fancybox-loading div {
background-image: url("../images/loading2.gif");
-webkit-background-size: 26px 26px;
-moz-background-size: 26px 26px;
-o-background-size: 26px 26px;
background-size: 26px 26px
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("../images/fancybox_sprite2.png");
-webkit-background-size: 44px 152px;
-moz-background-size: 44px 152px;
-o-background-size: 44px 152px;
background-size: 44px 152px
}
}
.flexslider {
position: relative;
zoom: 1
}
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
outline: 0
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none
}
.flexslider .slides li {
display: none;
position: relative;
margin: 0;
-webkit-backface-visibility: hidden
}
.no-js .flexslider .slides li:first-child {
display: block
}
.flexslider .slides img {
width: 100%;
display: block
}
.flex-pauseplay span {
text-transform: capitalize
}
.flexslider .slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
html[xmlns] .slides {
display: block
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease
}
.flexslider .slides {
zoom: 1
}
.ie7 .flex-direction-nav {
height: 0
}
.flex-direction-nav a {
display: block;
width: 19px;
height: 30px;
margin: -15px 0 0;
text-align: center;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
-webkit-transition: opacity 250ms linear;
-moz-transition: opacity 250ms linear;
-ms-transition: opacity 250ms linear;
-o-transition: opacity 250ms linear;
transition: opacity 250ms linear
}
.flex-direction-nav .flex-next {
right: 10px
}
.flex-direction-nav .flex-prev {
left: 10px
}
.flexslider:hover .flex-direction-nav a {
opacity: 1;
filter: alpha(opacity=100)
}
.flexslider .flex-direction-nav .flex-disabled {
opacity: .3;
filter: alpha(opacity=30);
cursor: default
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 40px;
text-align: center
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1
}
.ie7 .flex-control-nav li {
display: inline
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0,0,0,.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0,0,0,.7)
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0,0,0,.9);
cursor: default
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
filter: alpha(opacity=70);
cursor: pointer
}
.flex-control-thumbs img:hover {
opacity: 1;
filter: alpha(opacity=100)
}
.flex-control-thumbs .flex-active {
opacity: 1;
filter: alpha(opacity=100);
cursor: default
}
#header {
margin-left: 20px;
margin-bottom: 10px;
width: 100%;
z-index: 8;
background:url(../images/header-bg.jpg) no-repeat right top;
background-color: #fff;
background-color: rgba(255,255,255,1);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
box-shadow: 0 0 5px rgba(0,0,0,.25);
}
#header #logo {
padding: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none
}
#header #logo h1 {
margin-bottom: 0;
text-align: center;
width:250px;
}
#header #logo h1 a {
display: block
}
#header #logo h1 a img {
display: block
}
#header #logo .menu-toggle {
padding-top: 17px;
height: 8px
}
#header #logo .menu-toggle span {
display: block;
width: 20px;
height: 10px;
margin: 0 auto;
cursor: pointer;
background: url("../images/sprite.png") no-repeat -68px -10px
}
#header nav {
height: auto;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
-webkit-transition: height, opacity 200ms ease-in-out;
-moz-transition: height, opacity 200ms ease-in-out;
-ms-transition: height, opacity 200ms ease-in-out;
-o-transition: height, opacity 200ms ease-in-out;
transition: height, opacity 200ms ease-in-out
}
#header nav ul {
margin: 0;
font-size: 15px;
font-size: 1.5rem
}
#header nav li {
display: block;
border-top: 1px solid #ddd
}
#header nav li a {
display: block;
padding: 10px 15px;
color: #333;
font-family: 'Filetto';
text-transform: uppercase;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear
}
#header nav li a:hover {
text-decoration: none
}
#header nav li.current_page_item>a {
color: #2582c2
}
#header nav li a:hover {
background-color: #e6e6e6;
background-color: rgba(0,0,0,.08)
}
#header nav li.arrow>a:after {
float: right;
content: '\00a0\002B';
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
top: -1px
}
#header nav li.expand-menu>a:after {
float: right;
content: '\00a0\2013'
}
#header nav li ul {
display: none;
font-size: 12px;
font-size: 1.2rem;
background-color: #e6e6e6;
background-color: rgba(0,0,0,.02)
}
#header nav li.expand-menu>ul {
display: block
}
#header nav li ul li {
border-top-color: #d0d0d0
}
#header.hide-menu nav {
height: 0;
opacity: 0;
filter: alpha(opacity=0)
}
#header.hide-menu #logo .menu-toggle span {
background-position: -68px 0
}
.no-js #header.hide-menu nav {
height: auto;
opacity: 1;
filter: alpha(opacity=100)
}
.ie7 #header nav li a {
padding: 10px 0
}
#supersized-info, #okvideo-info {
position: fixed;
z-index: 6;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
background-color: rgba(255,255,255,.9);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
box-shadow: 0 0 5px rgba(0,0,0,.25)
}
#supersized-info .inner, #okvideo-info .inner {
padding: 10px;
position: relative
}
#supersized-info .inner h2, #okvideo-info .inner h2, #supersized-info .inner p, #okvideo-info .inner p {
padding: 0 30px;
margin-bottom: 0;
text-align: center
}
#supersized-info .inner h2, #okvideo-info .inner h2 {
font-weight: 400;
font-size: 21px;
font-size: 2.1rem
}
#supersized-info .inner h2 a, #okvideo-info .inner h2 a {
color: #333
}
#supersized-info .inner h2 a:hover, #okvideo-info .inner h2 a:hover {
color: #843f00;
text-decoration: none
}
#supersized-info .inner p, #okvideo-info .inner p {
display: none;
padding-top: 6px;
font-size: 14px;
font-size: 1.4rem;
color: #808080
}
.ie7 #supersized-info, .ie7 #okvideo-info .inner p {
padding-bottom: 20px;
clear: both
}
#supersized-info a.supersized-next, #supersized-info a.supersized-prev {
position: absolute;
top: 50%;
display: block;
width: 40px;
height: 42px;
margin-top: -21px;
cursor: pointer
}
#supersized-info a.supersized-next span, #supersized-info a.supersized-prev span {
display: block;
width: 19px;
height: 30px;
margin-top: 6px;
background: url("../images/sprite.png") no-repeat -999px 0
}
#supersized-info a.supersized-prev {
left: 0
}
#supersized-info a.supersized-prev span {
margin-left: 9px;
background-position: 0 0
}
#supersized-info a.supersized-prev:hover span {
background-position: 0 -30px
}
#supersized-info a.supersized-next {
right: 0
}
#supersized-info a.supersized-next span {
margin-left: 14px;
background-position: -19px 0
}
#supersized-info a.supersized-next:hover span {
background-position: -19px -30px
}
.supersized-fullscreen {
display: none;
position: fixed;
z-index: 5;
right: 20px;
bottom: 47px;
width: 30px;
height: 30px;
opacity: .5;
filter: alpha(opacity=50);
background-color: #2582c2;
cursor: pointer
}
.supersized-fullscreen.on {
bottom: 20px
}
.supersized-fullscreen:hover {
background-color: #3ec1f2;
opacity: 1;
filter: alpha(opacity=100)
}
.supersized-fullscreen span {
display: block;
width: 20px;
height: 20px;
margin: 5px 0 0 5px;
background: url("../images/sprite.png") no-repeat -20px -60px
}
.expand-supersized .supersized-fullscreen {
right: 20px;
bottom: 20px
}
.flex-direction-nav a {
top: 50%;
z-index: 3;
display: block;
width: 40px;
height: 42px;
margin-top: - 21px;
background-color: #fff;
background-color: rgba(255,255,255,.9);
cursor: pointer
}
.flex-direction-nav a span {
display: block;
width: 19px;
height: 30px;
margin-top: 6px;
background: url("../images/sprite.png") no-repeat -999px 0
}
.flex-direction-nav a.flex-prev {
left: 0
}
.flex-direction-nav a.flex-prev span {
margin-left: 9px;
background-position: 0 0
}
.flex-direction-nav a.flex-prev:hover span {
background-position: 0 -30px
}
.flex-direction-nav a.flex-next {
right: 0
}
.flex-direction-nav a.flex-next span {
margin-left: 12px;
background-position: -19px 0
}
.flex-direction-nav a.flex-next:hover span {
background-position: -19px -30px
}
.post {
position: relative
}
.post:before, .post:after {
display: table;
content: ""
}
.post:after {
clear: both
}
.post h3 {
margin-bottom: 6px;
margin-right: 32px
}
.post h3 a {
color: #000
}
.post h3 a:hover {
color: #843f00
}
.post .date {
font-size: 12px;
font-size: 1.2rem;
margin-bottom: 6px;
font-styler: italic;
color: #808080
}
.post .date strong {
color: #bfbfbf;
font-weight: 400
}
.post .date em {
font-style: normal;
text-transform: uppercase;
color: #bfbfbf
}
.post .date span {
color: #bfbfbf
}
.post a.more {
text-transform: uppercase
}
.post .meta {
margin-bottom: 12px;
color: #808080;
background-color: #fff;
padding: 10px 15px;
font-size: 12px;
font-size: 1.2rem
}
.post .meta p {
margin-bottom: 0
}
.post .meta p span {
position: relative
}
.post .meta p span:before {
content: '';
float: left;
position: relative;
top: 3px;
width: 13px;
height: 13px;
margin-top: 2px;
margin-right: 4px;
background: url("../images/sprite.png") no-repeat -999px 0
}
.post .meta p span.permalink:before {
background-position: -82px -48px
}
.post .meta p span.comments:before {
width: 15px;
background-position: -95px -48px
}
.post .meta p span.tags:before {
margin-top: 3px;
background-position: -110px -48px
}
.post a.all {
position: absolute;
top: 0;
right: 0;
display: block;
width: 30px;
height: 30px;
background: url("../images/sprite.png") no-repeat -38px 0
}
.post a.all:hover {
background-position: -38px -30px
}
.commentlist {
list-style: none;
margin-left: 0
}
.commentlist .comment {
border-top: 1px solid #c4c4c4;
padding-top: 1.5em;
margin-top: 1.5em
}
.commentlist .bypostauthor {
border-top: 3px solid #2582c2;
background-color: #ddd;
background-color: rgba(0,0,0,.05);
padding-bottom: 1.5em
}
.commentlist .comment .comment-author {
float: left;
margin-right: .75em
}
.commentlist .comment .comment-author img {
display: block
}
.commentlist .comment h6 {
margin-bottom: 5px
}
.commentlist .comment h6 a.name {
text-decoration: none
}
.commentlist .comment a.reply {
font-weight: 400;
text-transform: none;
font-size: 11px;
margin-left: 5px;
position: relative;
top: -1px
}
.commentlist .comment p {
font-size: 13px;
line-height: 19px;
margin-bottom: 0;
margin-top: 5px
}
.commentlist .comment p.date {
font-size: 12px
}
.commentlist .comment p.date:before {
content: '';
float: left;
width: 13px;
height: 15px;
margin-right: 6px;
position: relative;
top: 1px;
left: 1px;
background: url("../images/sprite.png") no-repeat -68px -48px
}
.commentlist .comment .children {
margin: 0 0 0 2em;
list-style: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Filetto';
font-weight: 400;
color: #1a1a1a
}
.social-icons a {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 2px;
background: url("../images/sprite.png") no-repeat -999px 0
}
.social-icons a:hover {
opacity: .75;
filter: alpha(opacity=75)
}
.social-icons .twitter {
background-position: -88px 0
}
.social-icons .facebook {
background-position: -120px 0
}
.social-icons .rss {
background-position: -104px 0
}
.social-icons .dribbble {
background-position: -136px 0
}
.social-icons .googleplus {
background-position: -152px 0
}
.social-icons .pinterest {
background-position: -168px 0
}
.social-icons .evernote {
background-position: -88px -16px
}
.social-icons .vimeo {
background-position: -104px -16px
}
.social-icons .youtube {
background-position: -120px -16px
}
.social-icons .linkedin {
background-position: -136px -16px
}
.social-icons .forrst {
background-position: -152px -16px
}
.social-icons .flickr {
background-position: -168px -16px
}
.social-icons .behance {
background-position: -88px -32px
}
.social-icons .zerply {
background-position: -104px -32px
}
.social-icons .tumblr {
background-position: -120px -32px
}
.social-icons .email {
background-position: -136px -32px
}
.social-icons .digg {
background-position: -152px -32px
}
.social-icons .wordpress {
background-position: -168px -32px
}
#main {
margin-top: 40px;
z-index: 2;
background-color: #eaeaea;
background-color: rgba(235,235,235,.9);
background-image: url('../images/bg_pattern.png')
}
#main .wrapper {
padding: 20px
}
.staff-title h4 {
float: left
}
.staff-title .social-icons {
float: right;
margin-top: 3px
}
#footer {
height: 16px;
line-height: 16px;
padding: 6px 0;
z-index: 3;
font-size: 12px;
background-color: #eaeaea;
background-color: rgba(235,235,235,.9);
background-image: url('../images/bg_pattern.png')
}
#footer .social-icons {
float: left;
margin-left: 20px
}
#footer .links {
float: right;
margin-right: 20px
}
#footer .links a {
margin-left: 3px
}
@media only screen and (min-width: 480px) {
#supersized-info .inner h2, #okvideo-info .inner h2, #supersized-info .inner p, #okvideo-info .inner p {
padding: 0 35px
}
#supersized-info .inner p, #okvideo-info .inner p {
margin-top: 5px;
display: block
}
#supersized-info a.supersized-prev {
left: 5px
}
#supersized-info a.supersized-next {
right: 5px
}
}
@media only screen and (min-width: 768px) {
#header {
position: fixed;
width: 100%;
margin-left: 0
}
#header #logo {
padding: 5px
}
#header nav ul {
font-size: 16px;
font-size: 1.6rem
}
#header nav ul li a {
padding: 10px 20px
}
#header nav ul li ul {
font-size: 13px;
font-size: 1.3rem
}
#supersized-info, #okvideo-info {
left: 40px;
bottom: 40px;
width: 350px
}
#supersized-info .inner, #okvideo-info .inner {
padding: 0;
margin: 20px
}
#supersized-info .inner h2, #okvideo-info .inner h2, #supersized-info .inner p, #okvideo-info .inner p {
padding: 0;
text-align: left
}
#supersized-info .inner h2, #okvideo-info .inner h2 {
text-transform: uppercase;
font-size: 25px;
font-size: 2.5rem
}
#supersized-info .inner h2 a, #okvideo-info .inner h2 a {
display: inline
}
#supersized-info .inner p, #okvideo-info .inner p {
padding-top: 8px;
font-size: 15px;
font-size: 1.5rem
}
#supersized-info a.supersized-next, #supersized-info a.supersized-prev {
right: -65px;
margin-top: 0;
background-color: #eaeaea;
background-color: rgba(235,235,235,.9);
width: 40px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
box-shadow: 0 0 5px rgba(0,0,0,.25)
}
#supersized-info a.supersized-next {
top: -20px
}
#supersized-info a.supersized-next span {
margin-left: 12px
}
#supersized-info a.supersized-prev {
top: auto;
left: auto;
bottom: -20px
}
#supersized-info a.supersized-prev span {
margin-left: 10px
}
.supersized-fullscreen {
display: block;
right: 320px
}
#main {
position: absolute;
width: 300px;
top: 0;
right: 0;
min-height: 100%;
margin-top: 0
}
#main .wrapper {
padding: 20px 30px
}
#footer {
position: fixed;
left: 0;
bottom: 0;
right: 300px;
margin-top: 0
}
#footer .social-icons {
margin-left: 10px
}
#footer .links {
margin-right: 10px
}
#supersized {
right: 300px;
width: auto
}
}
@media only screen and (min-width: 992px) {
#main {
width: 380px;
margin-top:112px;
}
#footer {
right: 380px
}
#supersized {
right: 380px
}
.supersized-fullscreen {
right: 400px
}
@-webkit-keyframes shake {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translatex(0)
}
40% {
-webkit-transform:translatex(-10px)
}
60% {
-webkit-transform:translatex(-5px)
}
}
@-moz-keyframes shake {
0%, 20%, 50%, 80%, 100% {
-moz-transform:translatex(0)
}
40% {
-moz-transform:translatex(-10px)
}
60% {
-moz-transform:translatex(-5px)
}
}
@-o-keyframes shake {
0%, 20%, 50%, 80%, 100% {
-o-transform:translatex(0)
}
40% {
-o-transform:translatex(-10px)
}
60% {
-o-transform:translatex(-5px)
}
}
@keyframes shake {
0%, 20%, 50%, 80%, 100% {
transform:translatex(0)
}
40% {
transform:translatex(-10px)
}
60% {
transform:translatex(-5px)
}
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity:1
}
25%, 75% {
opacity:0
}
}
@-moz-keyframes flash {
0%, 50%, 100% {
opacity:1
}
25%, 75% {
opacity:0
}
}
@-o-keyframes flash {
0%, 50%, 100% {
opacity:1
}
25%, 75% {
opacity:0
}
}
@keyframes flash {
0%, 50%, 100% {
opacity:1
}
25%, 75% {
opacity:0
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translatey(0)
}
40% {
-webkit-transform:translatey(-10px)
}
60% {
-webkit-transform:translatey(-5px)
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform:translatey(0)
}
40% {
-moz-transform:translatey(-10px)
}
60% {
-moz-transform:translatey(-5px)
}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-o-transform:translatey(0)
}
40% {
-o-transform:translatey(-10px)
}
60% {
-o-transform:translatey(-5px)
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform:translatey(0)
}
40% {
transform:translatey(-10px)
}
60% {
transform:translatey(-5px)
}
}
@-webkit-keyframes tada {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
}
@-moz-keyframes tada {
0% {
-moz-transform:scale(1)
}
10%, 20% {
-moz-transform:scale(0.9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-moz-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-moz-transform:scale(1.1) rotate(-3deg)
}
100% {
-moz-transform:scale(1) rotate(0)
}
}
@-o-keyframes tada {
0% {
-o-transform:scale(1)
}
10%, 20% {
-o-transform:scale(0.9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-o-transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
-o-transform:scale(1.1) rotate(-3deg)
}
100% {
-o-transform:scale(1) rotate(0)
}
}
@keyframes tada {
0% {
transform:scale(1)
}
10%, 20% {
transform:scale(0.9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
transform:scale(1.1) rotate(3deg)
}
40%, 60%, 80% {
transform:scale(1.1) rotate(-3deg)
}
100% {
transform:scale(1) rotate(0)
}
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-webkit-transform-origin:top center
}
20% {
-webkit-transform:rotate(10deg)
}
40% {
-webkit-transform:rotate(-5deg)
}
60% {
-webkit-transform:rotate(2deg)
}
80% {
-webkit-transform:rotate(-3deg)
}
100% {
-webkit-transform:rotate(0deg)
}
}
@-moz-keyframes swing {
20% {
-moz-transform:rotate(10deg)
}
40% {
-moz-transform:rotate(-5deg)
}
60% {
-moz-transform:rotate(2deg)
}
80% {
-moz-transform:rotate(-2deg)
}
100% {
-moz-transform:rotate(0deg)
}
}
@-o-keyframes swing {
20% {
-o-transform:rotate(10deg)
}
40% {
-o-transform:rotate(-5deg)
}
60% {
-o-transform:rotate(2deg)
}
80% {
-o-transform:rotate(-2deg)
}
100% {
-o-transform:rotate(0deg)
}
}
@keyframes swing {
20% {
transform:rotate(10deg)
}
40% {
transform:rotate(-5deg)
}
60% {
transform:rotate(2deg)
}
80% {
transform:rotate(-2deg)
}
100% {
transform:rotate(0deg)
}
}
@-webkit-keyframes wobble {
0% {
-webkit-transform:translatex(0%)
}
15% {
-webkit-transform:translatex(-15%) rotate(-3deg)
}
30% {
-webkit-transform:translatex(10%) rotate(3deg)
}
45% {
-webkit-transform:translatex(-10%) rotate(-3deg)
}
60% {
-webkit-transform:translatex(5%) rotate(2deg)
}
75% {
-webkit-transform:translatex(-5%) rotate(-1deg)
}
100% {
-webkit-transform:translatex(0%)
}
}
@-moz-keyframes wobble {
0% {
-moz-transform:translatex(0%)
}
15% {
-moz-transform:translatex(-15%) rotate(-3deg)
}
30% {
-moz-transform:translatex(10%) rotate(3deg)
}
45% {
-moz-transform:translatex(-10%) rotate(-3deg)
}
60% {
-moz-transform:translatex(5%) rotate(2deg)
}
75% {
-moz-transform:translatex(-5%) rotate(-1deg)
}
100% {
-moz-transform:translatex(0%)
}
}
@-o-keyframes wobble {
0% {
-o-transform:translatex(0%)
}
15% {
-o-transform:translatex(-15%) rotate(-3deg)
}
30% {
-o-transform:translatex(10%) rotate(3deg)
}
45% {
-o-transform:translatex(-10%) rotate(-3deg)
}
60% {
-o-transform:translatex(5%) rotate(2deg)
}
75% {
-o-transform:translatex(-5%) rotate(-1deg)
}
100% {
-o-transform:translatex(0%)
}
}
@keyframes wobble {
0% {
transform:translatex(0%)
}
15% {
transform:translatex(-15%) rotate(-3deg)
}
30% {
transform:translatex(10%) rotate(3deg)
}
45% {
transform:translatex(-10%) rotate(-3deg)
}
60% {
transform:translatex(5%) rotate(2deg)
}
75% {
transform:translatex(-5%) rotate(-1deg)
}
100% {
transform:translatex(0%)
}
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform:skewx(9deg)
}
10% {
-webkit-transform:skewx(-8deg)
}
20% {
-webkit-transform:skewx(7deg)
}
30% {
-webkit-transform:skewx(-6deg)
}
40% {
-webkit-transform:skewx(5deg)
}
50% {
-webkit-transform:skewx(-4deg)
}
60% {
-webkit-transform:skewx(3deg)
}
70% {
-webkit-transform:skewx(-2deg)
}
80% {
-webkit-transform:skewx(1deg)
}
90% {
-webkit-transform:skewx(0deg)
}
100% {
-webkit-transform:skewx(0deg)
}
}
@-moz-keyframes wiggle {
0% {
-moz-transform:skewx(9deg)
}
10% {
-moz-transform:skewx(-8deg)
}
20% {
-moz-transform:skewx(7deg)
}
30% {
-moz-transform:skewx(-6deg)
}
40% {
-moz-transform:skewx(5deg)
}
50% {
-moz-transform:skewx(-4deg)
}
60% {
-moz-transform:skewx(3deg)
}
70% {
-moz-transform:skewx(-2deg)
}
80% {
-moz-transform:skewx(1deg)
}
90% {
-moz-transform:skewx(0deg)
}
100% {
-moz-transform:skewx(0deg)
}
}
@-o-keyframes wiggle {
0% {
-o-transform:skewx(9deg)
}
10% {
-o-transform:skewx(-8deg)
}
20% {
-o-transform:skewx(7deg)
}
30% {
-o-transform:skewx(-6deg)
}
40% {
-o-transform:skewx(5deg)
}
50% {
-o-transform:skewx(-4deg)
}
60% {
-o-transform:skewx(3deg)
}
70% {
-o-transform:skewx(-2deg)
}
80% {
-o-transform:skewx(1deg)
}
90% {
-o-transform:skewx(0deg)
}
100% {
-o-transform:skewx(0deg)
}
}
@keyframes wiggle {
0% {
transform:skewx(9deg)
}
10% {
transform:skewx(-8deg)
}
20% {
transform:skewx(7deg)
}
30% {
transform:skewx(-6deg)
}
40% {
transform:skewx(5deg)
}
50% {
transform:skewx(-4deg)
}
60% {
transform:skewx(3deg)
}
70% {
transform:skewx(-2deg)
}
80% {
transform:skewx(1deg)
}
90% {
transform:skewx(0deg)
}
100% {
transform:skewx(0deg)
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1)
}
25% {
-webkit-transform:scale(1.1)
}
50% {
-webkit-transform:scale(1)
}
75% {
-webkit-transform:scale(1.1)
}
100% {
-webkit-transform:scale(1)
}
}
@-moz-keyframes pulse {
0% {
-moz-transform:scale(1)
}
25% {
-moz-transform:scale(1.1)
}
50% {
-moz-transform:scale(1)
}
75% {
-moz-transform:scale(1.1)
}
100% {
-moz-transform:scale(1)
}
}
@-o-keyframes pulse {
0% {
-o-transform:scale(1)
}
25% {
-o-transform:scale(1.1)
}
50% {
-o-transform:scale(1)
}
75% {
-o-transform:scale(1.1)
}
100% {
-o-transform:scale(1)
}
}
@keyframes pulse {
0% {
transform:scale(1)
}
25% {
transform:scale(1.1)
}
50% {
transform:scale(1)
}
75% {
transform:scale(1.1)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes flip {
0% {
-webkit-transform:perspective(400px) rotatey(0);
-webkit-animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translatez(150px) rotatey(170deg);
-webkit-animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-webkit-animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) rotatey(360deg) scale(0.95);
-webkit-animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px) scale(1);
-webkit-animation-timing-function:ease-in
}
}
@-moz-keyframes flip {
0% {
-moz-transform:perspective(400px) rotatey(0);
-moz-animation-timing-function:ease-out
}
40% {
-moz-transform:perspective(400px) translatez(150px) rotatey(170deg);
-moz-animation-timing-function:ease-out
}
50% {
-moz-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-moz-animation-timing-function:ease-in
}
80% {
-moz-transform:perspective(400px) rotatey(360deg) scale(0.95);
-moz-animation-timing-function:ease-in
}
100% {
-moz-transform:perspective(400px) scale(1);
-moz-animation-timing-function:ease-in
}
}
@-o-keyframes flip {
0% {
-o-transform:perspective(400px) rotatey(0);
-o-animation-timing-function:ease-out
}
40% {
-o-transform:perspective(400px) translatez(150px) rotatey(170deg);
-o-animation-timing-function:ease-out
}
50% {
-o-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-o-animation-timing-function:ease-in
}
80% {
-o-transform:perspective(400px) rotatey(360deg) scale(0.95);
-o-animation-timing-function:ease-in
}
100% {
-o-transform:perspective(400px) scale(1);
-o-animation-timing-function:ease-in
}
}
@keyframes flip {
0% {
transform:perspective(400px) rotatey(0);
animation-timing-function:ease-out
}
40% {
transform:perspective(400px) translatez(150px) rotatey(170deg);
animation-timing-function:ease-out
}
50% {
transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
animation-timing-function:ease-in
}
80% {
transform:perspective(400px) rotatey(360deg) scale(0.95);
animation-timing-function:ease-in
}
100% {
transform:perspective(400px) scale(1);
animation-timing-function:ease-in
}
}
.shake:hover {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake
}
.flash:hover {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash
}
.bounce:hover {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce
}
.tada:hover {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada
}
.swing:hover {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing
}
.wobble:hover {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble
}
.pulse:hover {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse
}
.wiggle:hover {
-webkit-animation-name: wiggle;
-moz-animation-name: wiggle;
-o-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
.flip:hover {
-webkit-backface-visibility: visible!important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible!important;
-moz-animation-name: flip;
-o-backface-visibility: visible!important;
-o-animation-name: flip;
backface-visibility: visible!important;
animation-name: flip
}
.animated {
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
-o-animation-duration: 750ms;
animation-duration: 750ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.hinge {
-webkit-animation-duration: 1.4s;
-moz-animation-duration: 1.4s;
-o-animation-duration: 1.4s;
animation-duration: 1.4s
}
}
@media only screen and (min-width: 1260px) {
#main {
width: 460px
}
#footer {
right: 460px
}
#supersized {
right: 460px
}
.supersized-fullscreen {
right: 480px
}
}
@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
html, #main, #footer {
background-url: url('../images/bg_pattern2.png');
-webkit-background-size: 60px 59px;
-moz-background-size: 60px 59px;
-o-background-size: 60px 59px;
background-size: 60px 59px
}
#fancybox-loading div, #okvideo-loader, .panorama .preloader, .video-container {
background-image: url("../images/loading2.gif");
-webkit-background-size: 26px 26px;
-moz-background-size: 26px 26px;
-o-background-size: 26px 26px;
background-size: 26px 26px
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("../images/fancybox_sprite2.png");
-webkit-background-size: 44px 152px;
-moz-background-size: 44px 152px;
-o-background-size: 44px 152px;
background-size: 44px 152px
}
#supersized-info a.supersized-next span, #supersized-info a.supersized-prev span, #supersized .fullscreen span, .flex-direction-nav a span, .post .metap span:before, .post a.all, .commentlist .comment p.date:before, .social-icons a, .thumb .icon-fullsize, .thumb .icon-link, .thumb .icon-video {
background-image: url("../images/sprite2.png");
-webkit-background-size: 184px 80px;
-moz-background-size: 184px 80px;
-o-background-size: 184px 80px;
background-size: 184px 80px
}
}
@media print {
* {
background: transparent!important;
color: #000!important;
box-shadow: none!important;
text-shadow: none!important;
filter: none!important;
-ms-filter: none!important
}
@page {
margin: .5cm
}
h2, h3 {
orphans: 3;
widows: 3;
page-break-after: avoid
}
p {
orphans: 3;
widows: 3
}
pre, blockquote {
border: 1px solid #808080;
page-break-inside: avoid
}
abbr[title]:after {
content: " (" attr(title) ")"
}
a, a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
a[href^="javascript:"]:after, a[href^="#"]:after {
content: ""
}
img {
max-width: 100%!important;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr {
page-break-inside: avoid
}
}
.nav {
position: relative;
margin: 0;
padding: 0;
line-height: 17px;
padding-left:30px;
width:100%;
}
/* The main navigation link containers */
.nav>li {
display: block;
float: left; /* Displaying them on the same line */
margin: 0;
padding: 0;
}
/* The main navigation links */
.nav>li>a {
/* Layout */
display: block;
position: relative;
padding: 4px 20px;
/* Text */
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
color: #fff;
font-size: 12px;
text-transform:uppercase;
text-decoration: none;
/* Background */
background: black; /* For older browsers */
background: rgba(35, 121, 180, 1); /* Transparent background for modern browsers */
/* Making the color to change on hover with a transition */
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;
-ms-transition: color .3s ease-in;
}
/* Changing the color on hover */
.nav>li>a:hover, .nav>li:hover>a {
color: #fff;
background-color:#000;
}
/* The links which contain dropdowns menu are wider, because they have a little arrow */
.nav>.dropdown>a {
}
/* The arrow indicating the dropdown */
.dropdown>a::after {
}
/* Changing the color of the arrow on hover */
.dropdown>a:hover::after, .dropdown:hover>a::after {
border-color: #0fd0f9;
}
/* The submenus */
.nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
/* General layout settings for the link containers of the submenus */
.nav ul li {
position: absolute;
top: -9999px; /* Hiding them */
height: 0px;
display: block;
margin: 0;
padding: 0;
/* Making them to expand their height with a transition, for a slide effect */
-webkit-transition: height .2s ease-in;
-moz-transition: height .2s ease-in;
-o-transition: height .2s ease-in;
-ms-transition: height .2s ease-in;
}
/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */
.dropdown:hover>ul>li {
height: 22px;
position: relative;
top: auto;
}
/* The submenu links */
.nav ul li a {
/* Layout */
padding: 5px 20px 5px 20px;
width: 120px;
display: block;
position: relative;
/* Text */
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
color: #bbb;
text-decoration: none;
font-size: 12px;
text-transform:uppercase;
/* Background & effects */
background: black;
background: rgba(0, 0, 0, .8);
-webkit-transition: color .3s ease-in, background .3s ease-in;
-moz-transition: color .3s ease-in, background .3s ease-in;
-o-transition: color .3s ease-in, background .3s ease-in;
-ms-transition: color .3s ease-in, background .3s ease-in;
}
/* Changing the link's color and background on hover */
.nav ul li:hover>a, .nav ul li a:hover {
color: #0fd0f9;
background: rgba(0, 0, 0, .75);
}
/* Making the level 2 (or higher) submenus to appear at the right of their parent */
.nav ul .dropdown:hover ul {
left: 160px;
top: 0px;
}
/* The submenu links have a different arrow which indicates another dropdown submenu */
.nav ul .dropdown a::after {
border-bottom: 0;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
top: 12px;
}
/* Changing the color of the arrow on hover */
.nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {
border-right: 1px solid #0fd0f9;
border-top: 1px solid #0fd0f9;
}
.large-menu{
width:185px !important;
}
.large-menuu{
width:210px !important;
}
.menu-bg{
background-color:#2379b4;
width:100%;
height:25px;
}
#vertical {
top:124px;
width:981px;
padding-left:10px;
margin:auto;
position:relative;
}
#vertical div{
margin-right:15px;
float:left;
width:310px;
height:467px;
border:1px solid #999;
position:relative;
overflow:hidden;
}
#vertical img {
position:absolute;
}
.pro{
padding-top:135px;
width:992px;
margin:auto;
}
.pro img{
float:left;
margin-left:10px;
margin-bottom:10px;
border:5px solid #fff;
}
.proo{
padding-top:135px;
width:992px;
margin:auto;
}
.proo img{
float:left;
margin-left:6px;
margin-bottom:10px;
border:5px solid #fff;
}