/*
common.css - the primary styles
Author: Laza
*/
/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* 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;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
/*
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Addresses margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/*
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Addresses CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
margin:0;
font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size:13px;
line-height:1.385;
color:#ff9933;
background-color:#000000;
}
a {
color:#ffffff;
text-decoration:none;
}
a:hover, a:focus {
text-decoration:underline;
}
/* Resetting some elements */
table {
font-size:100%;
}
h1, h2, h3, h4, h5 {
font-weight:normal;
margin:0.2em 0;
}
h1 { font-size:200%; }
h2 { font-size:160%; }
h3 { font-size:140%; }
h4 { font-size:120%; }
h5 { font-size:110%; }
a img {
border:0;
text-decoration:none;
}
p { margin:0.5em 0; }
/* Utility styles */
.fleft {
float:left;
display:inline;
}
.fright {
float:right;
display:inline;
}
.clear {
clear:both;
}
/*********************************** Page structure */
#main {
margin:0 auto;
background-color:#222222;
width:892px;
}
#slide #main {
width:890px;
}
#navigation {
background-color:#ff9933;
z-index:999;
}
#header {
padding:20px;
}
#content {
padding:0 20px 0 20px;
}
#slide #content {
padding:0 0 0 0;
}
#footer {
font-size:85%;
padding:0.75em 20px;
text-align:center;
}
#footer .bottom-nav a {
padding:0.2em 0.5em;
color:#ff9933;
}
#footer .bottom-nav ul {
display:inline-block;
margin:0;
padding:0;
list-style-type:none;
}
#footer .bottom-nav ul li {
display:inline-block;
}
#footer .bottom-nav ul li a {
display:block;
}
/*********************************** Top navigation */
#navigation {
position:relative;
text-align:center;
line-height:40px;
}
#navigation .logo {
/*height:40px;*/
width:25%;
float:left;
display:inline-block;
margin-right:2%;
text-align:center;
}
#navigation .logo a {
display:block;
line-height:40px;
overflow:hidden;
}
#navigation .logo img {
max-width:100%;
vertical-align:middle;
margin-top:-2px;
}
.top-nav {
text-align:center;
}
.top-nav.with-logo {
margin-left:27%;
}
.top-nav a {
display:block;
white-space:nowrap;
color:#222222;
}
.top-nav > ul {
}
.top-nav ul {
display:inline-block;
vertical-align:top;
padding:0;
margin:0;
list-style-type:none;
z-index:998;
}
.top-nav li.actual {
background-color:#ffffff;
}
.top-nav > ul > li {
position:relative;
display:inline-block;
width:auto;
height:100%;
}
.ie7 .top-nav > ul > li {
float:left;
}
.top-nav > ul > li.home {
width:30px;
height:30px;
margin-top:5px;
}
.top-nav > ul > li.home a {
display:block;
line-height:30px;
background-image:url(home_d.png);
background-position:center 0px;
background-repeat:no-repeat;
text-decoration:none;
}
.top-nav > ul > li.home a:hover {
background-position:center -30px;
}
.top-nav > ul > li > a {
line-height:40px;
font-size:1.2em;
padding:0 0.75em;
}
.top-nav > ul > li ul {
display:none;
position:absolute;
z-index:999;
background-color:#ff9933;
}
.top-nav > ul > li > ul {
min-width:100%;
}
.top-nav > ul > li > ul li {
position:relative;
display:block;
}
.top-nav > ul > li > ul > li a {
line-height:30px;
font-size:1em;
padding:0 0.75em;
}
.top-nav > ul > li > ul > li ul {
left:100%;
top:0;
}
.top-nav > ul > li:hover > ul,
.top-nav > ul > li > ul > li:hover > ul,
.top-nav > ul > li > ul > ul > li > li:hover > ul {
display:block;
}
/*********************************** Navigation buttons */
a.navigation,
span.navigation {
display:inline-block;
width:40px;
height:40px;
line-height:40px;
background-image:url(navigation.png);
background-repeat:no-repeat;
}
a.navigation {
text-decoration:none;
background-position:0 0;
}
a#up {
background-position:0 0;
}
a#up:hover {
background-position:0 -40px;
}
span#up {
background-position:0 -80px;
}
a#prev {
background-position:-40px 0;
}
a#prev:hover {
background-position:-40px -40px;
}
span#prev {
background-position:-40px -80px;
}
a#next {
background-position:-80px 0;
}
a#next:hover {
background-position:-80px -40px;
}
span#next {
background-position:-80px -80px;
}
a#first {
background-position:-120px 0;
}
a#first:hover {
background-position:-120px -40px;
}
span#first {
background-position:-120px -80px;
}
a#last {
background-position:-150px 0;
}
a#last:hover {
background-position:-150px -40px;
}
span#last {
background-position:-150px -80px;
}
/*********************************** Head section */
.headln {
margin:0 80px;
text-align:center;
}
.headln small {
font-size:80%;
margin-right:0.5em;
}
.headln h1 {
min-height:40px;
}
/*********************************** Index page thumbnail grid */
table.thumbs {
border-collapse:separate;
border-spacing:2px;
margin:0 auto;
}
.thumbs td {
width:168px;
text-align:center;
}
.thumbs td.empty {
}
.thumbs td:hover {
background-color:#eee;
}
.thumbs td.empty:hover {
background-color:transparent;
}
.thumbs .thumb {
position:relative;
width:168px;
height:120px;
padding:4px 0;
}
.thumbs .thumb em {
position:absolute;
right:4px;
top:4px;
width:20px;
height:20px;
background:url(foldericon.png) center center no-repeat;
}
.thumbs .thumb a {
display:inline-block;
line-height:120px;
height:100%;
text-decoration:none;
}
.thumbs .thumb a img {
margin-top:-3px;
vertical-align:middle;
border:0;
outline:none;
}
.thumbs .thumb a i {
line-height:0;
font-size:1px;
height:1px;
width:1px;
margin-right:-1px;
overflow:hidden;
}
.thumbs .caption {
width:160px;
padding:4px;
overflow:hidden;
}
.thumbs .caption h5 {
margin:0.5em 0;
}
.thumbs .caption p {
font-size:85%;
margin:0.25em 0;
}
/*********************************** Slide page's main image */
.mainimage {
position:relative;
margin:20px auto 0 auto;
min-width:200px;
width:auto;
text-align:center;
padding:10px;
background-color:#dddddd;
overflow:hidden;
}
.mainimage img {
border:0;
vertical-align:top;
outline:none;
}
.mainimage map {
display:block;
visibility:hidden;
}
.mainimage map area {
outline:none;
}
.mainimage .other {
margin:0 auto;
}
.mainimage .caption {
padding:10px;
overflow:hidden;
color:#444;
background-color:#fff;
}
.mainimage .caption .title {
font-size:120%;
font-weight:bold;
}
.mainimage .caption .comment {
}
.mainimage .caption .meta {
font-size:85%;
}
.mainimage .caption .meta b {
font-weight:normal;
color:#999;
}
.mainimage .caption .title,
.mainimage .caption .comment,
.mainimage .caption .meta {
display: inline;
}
/*********************************** Thumbnail navigation */
.thumbnavigation table {
margin:0 auto;
border-spacing:0;
border-collapse:collapse;
}
.thumbnavigation table td {
padding:0;
}
.thumbnavigation .actual {
padding:0 2px;
}
.thumbnavigation .actual img {
border:4px solid #ff9933;
}
.thumbnavigation .leftcol,
.thumbnavigation .rightcol {
width:371px;
}
.thumbnavigation .leftcol {
text-align:right;
}
.thumbnavigation .rightcol {
text-align:left;
}
.thumbnavigation a {
display:inline-block;
}
/******************************************* Hint */
.hint {
display: none;
position:absolute;
left:0;
top:0;
padding:6px;
color:#000;
max-width:240px;
background-color:#eee;
background-color:rgba(255,255,255,0.9);
z-index:99999;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:1px 3px 8px rgba(0,0,0,0.3);
-webkit-box-shadow:1px 3px 8px rgba(0,0,0,0.3);
box-shadow:1px 3px 8px rgba(0,0,0,0.3);
}
.hint a {
color:#000;
}
.hint h5 {
font-weight:bold;
margin:0 0 0.25em 0;
text-align:center;
}
.hint p {
margin:0.25em 0;
text-align:center;
}
.hint > .nub {
position: absolute;
display: block;
padding: 0;
margin-left: 50%;
left: -5px;
top: -10px;
width: 0;
height: 0;
border: solid 5px;
border-color: transparent transparent rgba(255,255,255,0.9) transparent;
}
.hint.valign-top > .nub {
top: auto;
bottom: -10px;
border-color: rgba(255,255,255,0.9) transparent transparent transparent;
}
.hint.valign-middle > .nub {
margin-left: 0;
top: 50%;
margin-top: -5px;
}
.hint.valign-middle.align-left > .nub {
left: auto;
border-color: transparent transparent transparent rgba(255,255,255,0.9);
right: -10px;
}
.hint.valign-middle.align-right > .nub {
left: -10px;
border-color: transparent rgba(255,255,255,0.9) transparent transparent;
}
/*
* Skin for jPlayer Plugin (jQuery JavaScript Library)
* http://www.jplayer.org
*
* Skin Name: jAlbum
*
* Copyright (c) 2012 jAlbum AB
* Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
*
* Author: Laszlo Molnar
* Skin Version: 0.9 (jPlayer 2.2.0)
* Date: 21nd December 2012
*/
a:active, a:focus {
outline:none;
}
.jp-warning {
position:absolute;
top:30%;
left:5%;
right:5%;
margin:0 auto;
width:200px;
max-width:90%;
padding:10px 15px;
background-color:#333;
background-color:rgba(0,0,0,0.8);
color:#ddd;
text-align:center;
z-index:999;
-moz-border-radius:6px;
border-radius:6px;
}
.jp-audio,
.jp-audio-stream,
.jp-video {
font-size:1em;
font-family:Segoe,"Segoe UI",Tahoma,Geneva,"Open Sans","Nimbus Sans L",sans-serif;
line-height:1.231;
color:#ddd;
border:none;
width:100%;
height:100%;
}
.jp-audio {
}
.jp-audio-stream {
}
.jp-video-270p {
}
.jp-video-360p {
}
.jp-video-full {
/* Rules for IE6 (full-screen) */
width:480px;
height:270px;
/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
position:static !important; position:relative;
}
.jp-type-single {
width:100%;
height:100%;
}
.jp-video .jp-jplayer {
background-color:#000;
}
/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
.jp-video-full div div {
z-index:1000;
}
.jp-video-full .jp-jplayer {
top:0 !important;
left:0 !important;
position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
overflow: hidden;
}
.jp-video-full .jp-gui {
position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
bottom:0 !important;
left:0 !important;
width:100%;
z-index:1001; /* 1 layer above the others. */
}
.jp-video-full .jp-gui {
position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
bottom:0 !important;
left:0 !important;
}
/* jp-title */
.jp-title {
position:absolute;
overflow:hidden;
top:0;
left:0;
right:0;
text-align:center;
margin:0;
z-index:11;
opacity:0;
transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.jp-video-full .jp-title {
width:100%;
top:0 !important;
left:0 !important;
right:0 !important;
}
.jp-audio:hover .jp-title,
.jp-video:hover .jp-title {
position:absolute;
opacity:1;
}
.jp-title ul {
list-style-type:none;
padding:0;
display:inline-block;
margin:0 auto;
text-align:center;
color:#fff;
background-color:#000;
background-color:rgba(0,0,0,0.25);
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
-moz-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}
.jp-title ul li {
padding:0.25em 1em;
}
/* jp-interface */
.jp-gui {
position:absolute;
height:34px;
bottom:0;
left:0;
right:0;
z-index:10;
background-color:#222; /* Required for the full screen */
}
.jp-audio .jp-gui {
}
.jp-audio-stream .jp-gui {
}
/* play button */
.jp-audio .jp-video-play,
.jp-video .jp-video-play {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden; /* Important for nested negative margins to work in modern browsers */
cursor:pointer;
z-index:1;
}
.jp-video-270p .jp-video-play {
}
.jp-video-360p .jp-video-play {
}
.jp-video-full .jp-video-play {
height:100%;
}
.jp-video-play > a {
position:absolute;
display:block;
width:112px;
height:100px;
margin-left:-56px;
margin-top:-50px;
left:50%;
top:50%;
overflow:hidden;
background-image:url(jplayer.jalbum.video.png);
background-position:0 0;
text-indent:-9999px;
}
.jp-video-play:hover > a {
background-position:0 -100px;
}
/* @group progress bar */
/* The seeking class is added/removed inside jPlayer */
.jp-seeking-bg {
background:url('jplayer.jalbum.seeking.gif');
}
.jp-progress,
.jp-seek-bar,
.jp-play-bar {
display:block;
margin:0;
background-repeat:repeat-x;
height:6px;
overflow:hidden;
}
.jp-progress {
width:100%;
background-color:#000;
}
.jp-video .jp-progress {
}
.jp-seek-bar {
width:0;
cursor:pointer;
}
.jp-play-bar {
background-image:url('jplayer.jalbum.png');
background-position:0px -318px;
width:0;
}
/* @end */
/* @group CONTROLS */
.jp-controls-holder {
position:relative;
width:100%;
height:28px;
clear:both;
overflow:hidden;
}
.jp-startstop {
float:left;
display:inline;
margin:0;
height:28px;
overflow:hidden;
}
.jp-audio-stream .jp-controls {
}
.jp-startstop a {
float:left;
display:inline-block;
overflow:hidden;
text-indent:-9999px;
width:28px;
height:28px;
padding:0;
}
/* @group single player controls */
.jp-startstop a {
background-image:url('jplayer.jalbum.png');
background-position:0 0;
background-repeat:no-repeat;
width:28px;
}
.jp-startstop a.jp-play {
background-position:0 0;
}
.jp-startstop a.jp-play:hover {
background-position:-28px 0;
}
.jp-startstop a.jp-pause {
display:none;
background-position:0px -28px;
}
.jp-startstop a.jp-pause:hover {
background-position:-28px -28px;
}
.jp-audio-stream .jp-play,
.jp-audio-stream .jp-pause {
}
.jp-startstop a.jp-stop {
background-position:0px -56px;
}
.jp-mini .jp-startstop a.jp-stop {
display:none;
}
.jp-startstop a.jp-stop:hover {
background-position:-28px -56px;
}
.jp-startstop a.jp-previous {
background-position:0 -112px no-repeat;
}
.jp-startstop a.jp-previous:hover {
background-position:-28px -112px no-repeat;
}
.jp-startstop a.jp-next {
background-position:0 -84px no-repeat;
}
.jp-startstop a.jp-next:hover {
background-position:-28px -84px no-repeat;
}
/* @end */
/* @group volume bar */
.jp-volume {
position:relative;
float:left;
display:inline;
width:28px;
height:100%;
overflow:hidden;
transition: width 0.5s;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari and Chrome */
-o-transition: width 0.5s; /* Opera */
}
.jp-volume:hover {
width:128px;
}
.jp-mini .jp-volume:hover {
width:68px;
}
.jp-volume a.jp-mute,
.jp-volume a.jp-unmute {
float:left;
display:inline-block;
overflow:hidden;
text-indent:-9999px;
width:28px;
height:28px;
padding:0;
background-image:url('jplayer.jalbum.png');
}
.jp-volume a.jp-mute {
background-position:0 -140px;
}
.jp-volume a.jp-mute:hover {
background-position:-28px -196px;
}
.jp-volume a.jp-unmute {
display:none;
background-position:0 -168px;
}
.jp-volume a.jp-unmute:hover {
background-position:-28px -140px;
}
.jp-volume a.jp-volume-max {
display:none;
background-position:0 -140px;
}
.jp-volume a.jp-volume-max:hover {
background-position:-28px -140px;
}
.jp-volume-bar {
position:absolute;
left:28px;
top:11px;
height:6px;
width:100px;
overflow:hidden;
background-color:#000;
}
.jp-mini .jp-volume-bar {
width:40px;
}
.jp-volume-bar:hover {
cursor: pointer;
}
.jp-audio .jp-interface .jp-volume-bar,
.jp-audio-stream .jp-interface .jp-volume-bar {
left: 0;
}
.jp-audio-stream .jp-interface .jp-volume-bar,
.jp-video .jp-volume-bar {
}
.jp-video .jp-volume-bar {
}
.jp-volume-bar-value {
background-image:url('jplayer.jalbum.png');
background-position:0 -334px;
height:6px;
border-right:2px solid #666;
}
/* @end */
/* @group current time and duration */
.jp-times {
float:left;
display:inline;
margin:4px;
height:20px;
background-color:#000;
-moz-border-radius:4px;
border-radius:4px;
}
.jp-current-time, .jp-duration {
float:left;
display:inline;
padding:2px 6px;
line-height:16px;
font-size:.85em;
z-index:99999;
}
.jp-mini .jp-current-time, .jp-mini .jp-duration {
padding:2px 4px;
font-size:.7em;
}
.jp-current-time {
color:#999;
left:44%;
}
.jp-duration {
color:#666;
border-left:1px dotted #444;
}
.jp-mini .jp-duration {
display:none;
}
.jp-video .jp-current-time {
}
.jp-video .jp-duration {
}
/* @end */
/* @group TOGGLES */
.jp-toggles {
float:right;
display:inline-block;
height:28px;
padding:0;
overflow:hidden;
}
.jp-toggles a {
float:right;
display:inline-block;
width:28px;
height:28px;
text-indent:-9999px;
line-height:100%; /* need this for IE6 */
background-image:url('jplayer.jalbum.png');
background-repeat:no-repeat;
}
.jp-toggles a.jp-full-screen {
background-position:0 -224px;
}
.jp-toggles a.jp-full-screen:hover {
background-position:-28px -224px;
}
.jp-toggles a.jp-restore-screen {
display:none;
background-position:-56px -224px;
}
.jp-toggles a.jp-restore-screen:hover {
background-position:-84px -224px;
}
.jp-toggles a.jp-repeat {
background-position:0 -252px;
}
.jp-toggles a.jp-repeat:hover {
background-position:-28px -252px;
}
.jp-toggles a.jp-repeat-off {
display:none;
background-position:-56px -252px;
}
.jp-toggles a.jp-repeat-off:hover {
background-position:-84px -252px;
}
.jp-toggles a.jp-shuffle {
background-position:0 -280px;
}
.jp-toggles a.jp-shuffle:hover {
background-position:-28px -280px;
}
.jp-toggles a.jp-shuffle-off {
display:none;
background-position:-56px -280px;
}
.jp-toggles a.jp-shuffle-off:hover {
background-position:-84px -280px;
}
/* @end */
/* @group volume controls */
div.jp-interface ul.jp-controls a.jp-mute,
div.jp-interface ul.jp-controls a.jp-unmute,
div.jp-interface ul.jp-controls a.jp-volume-max {
}
div.jp-audio ul.jp-controls a.jp-mute,
div.jp-audio ul.jp-controls a.jp-unmute,
div.jp-audio-stream ul.jp-controls a.jp-mute,
div.jp-audio-stream ul.jp-controls a.jp-unmute {
}
div.jp-audio ul.jp-controls a.jp-volume-max,
div.jp-audio-stream ul.jp-controls a.jp-volume-max {
}
div.jp-video ul.jp-controls a.jp-mute,
div.jp-video ul.jp-controls a.jp-unmute {
}
div.jp-video ul.jp-controls a.jp-volume-max {
}
/* @end */
/* @group playlist */
.jp-playlist ul {
list-style-type:none;
margin:0;
padding:0.25em 0;
}
.jp-video .jp-title ul {
}
.jp-video .jp-playlist ul {
margin: 0 20px;
font-size:.8em;
}
.jp-title li,
.jp-playlist li {
position: relative;
padding: 2px 0;
border-top:1px solid #554461;
border-bottom:1px solid #180a1f;
overflow: hidden;
}
.jp-title li {
border-bottom:none;
border-top:none;
padding:0;
text-align:center;
}
/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
div.jp-type-playlist div.jp-playlist li:first-child {
border-top:none;
padding-top:3px;
}
div.jp-type-playlist div.jp-playlist li:last-child {
border-bottom:none;
padding-bottom:3px;
}
div.jp-type-playlist div.jp-playlist a {
color: #fff;
text-decoration:none;
}
div.jp-type-playlist div.jp-playlist a:hover {
color: #e892e9;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
background-color: #26102e;
margin: 0 -20px;
padding: 2px 20px;
border-top: 1px solid #26102e;
border-bottom: 1px solid #26102e;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current a{
color: #e892e9;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
float:right;
display:inline;
text-align:right;
margin-left:10px;
font-weight:bold;
color:#8C7A99;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
color:#E892E9;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
float: right;
display:inline;
text-align:right;
color:#8C7A99;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#8C7A99;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#E892E9;
}
span.jp-artist {
font-size:.8em;
color:#8C7A99;
}
/* @end */
/* @group NO SOLUTION error feedback */
.jp-no-solution {
position:absolute;
top:50%;
left:25%;
width:50%;
margin-top:-2em;
padding:8px;
font-size:.8em;
background-color:#222;
background-color:rgba(0,0,0,0.8);
color:#ddd;
text-align:center;
display:none;
-moz-border-radius:4px;
border-radius:4px;
}
.jp-no-solution a {
text-decoration:underline;
color:#FFF;
}
.jp-no-solution span {
color:#FFF;
font-size:1em;
display:block;
text-align:center;
font-weight:bold;
}
/* @end */
@charset "utf-8";
/* Simple.css :: Basic style sheet */
.thumbs td:hover {
background-color:#444;
}
#navigation .home a {
background-image:url(home.png);
}
a.navigation,
span.navigation {
background-image:url(navigation_d.png);
}
.contact-box {
background-color:#000;
}
.mainimage .caption a {
color:#258;
}
/*
styles.css - custom styles for the skin's Page templates
*/
/************** About page */
#about-page {
margin:10px 10%;
}
#about-page aside {
float:left;
display:inline;
margin:10px 30px 10px 0;
max-width:40%;
}
#about-page aside img {
max-width:100%;
}
#about-page .texts {
overflow:hidden;
}
#about-page .texts p {
line-height:1.5em;
}
/************** Sitemap page */
#sitemap-page {
margin:0 20px;
}
#sitemap-page aside {
float:left;
display:inline;
margin:10px 5% 10px 0;
max-width:25%;
}
#sitemap-page aside img {
max-width:100%;
}
#sitemap-page .sitemap {
font-size:120%;
overflow:hidden;
}
#sitemap-page .caption {
margin:0 0 1em 0;
}
#sitemap-page .sitemap .title {
margin:1em 0;
}
#sitemap-page .sitemap.showthumbs .title a.home {
display:inline-block;
width:24px;
height:24px;
background-image: url(controls.png);
background-repeat: no-repeat;
background-position: -793px -23px;
}
#sitemap-page .sitemap ul {
padding-left:2em;
}
#sitemap-page .sitemap.showthumbs ul {
padding-left:0;
list-style-type:none;
}
#sitemap-page .sitemap li {
clear:both;
padding:0.5em 0;
}
#sitemap-page small {
margin-top:0.5em;
display:block;
}
#sitemap-page .sitemap li a.thumb {
float:left;
display:inline-block;
width:10%;
max-height:48px;
margin-top:-0.5em;
margin-right:2%;
text-align:center;
}
#sitemap-page .sitemap li a.thumb img {
display:inline-block;
max-width:100%;
max-height:100%;
height:auto;
}
#sitemap-page .sitemap li a.thumb.icon img {
margin-top:-20%;
}
#sitemap-page .sitemap li div {
overflow:hidden;
}
/************** Contents page */
#contents-page h1 {
text-align:center;
margin-bottom:20px;
}
#contents-page .one-letter {
display: inline-block;
vertical-align: top;
width:30%;
margin:0 1.5% 3% 1.5%;
}
#contents-page .one-letter h2 {
text-align: center;
border-bottom: 1px solid #ff9933;
}
#contents-page .one-letter ul {
padding-left:2em;
list-style-type:none;
}
#contents-page.showthumbs .one-letter ul {
padding-left:0;
}
#contents-page .one-letter li {
clear:both;
padding:0.5em 0;
}
#contents-page.showthumbs .one-letter li {
}
#contents-page small {
margin-top:0.5em;
display:block;
}
#contents-page .one-letter li a {
font-weight:bold;
}
#contents-page .one-letter li a.thumb {
float:left;
display:inline-block;
width:20%;
margin-top:-0.5em;
margin-right:2%;
text-align:center;
overflow:hidden;
}
#contents-page .one-letter li a.thumb img {
display:inline-block;
max-width:100%;
max-height:100%;
height:auto;
}
#contents-page .one-letter li a.thumb.icon img {
margin-top:-15%;
}
#contents-page .one-letter li div {
overflow:hidden;
}
#contents-page.showthumbs .one-letter li div {
margin-top:0.5em;
}
/************** Contact page */
#contact-page {
margin:10px 10px 10px 60px;
}
#contact-page aside {
float:right;
display:inline;
margin:0 0 10px 20px;
max-width:40%;
}
#contact-page aside img {
max-width:100%;
}
#contact-page .texts {
overflow:hidden;
}
#contact-page .texts blockquote {
font-size:80%;
line-height:1.5em;
padding-left:12px;
border-left:10px solid rgba(255,255,255,0.1);
}
#contact-page .texts > div {
font-size:120%;
padding:15px 5px;
border-top:1px solid rgba(255,255,255,0.2);
border-bottom:1px solid rgba(0,0,0,0.2);
}
#contact-page .texts blockquote,
#contact-page .texts a {
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
}
#contact-page .texts a {
font-size:80%;
padding:5px 5px 5px 26px;
line-height:14px;
-moz-border-radius:6px;
border-radius:6px;
background-color:rgba(255,255,255,0.1);
background-image:url(share.png);
background-repeat:no-repeat;
}
#contact-page .facebook a { background-position:0 -24px; }
#contact-page .twitter a { background-position:0 -48px; }
#contact-page .digg a { background-position:0 -72px; }
#contact-page .myspace a { background-position:0 -96px; }
#contact-page .delicious a { background-position:0 -120px; }
#contact-page .stumbleupon a { background-position:0 -144px; }
#contact-page .email a { background-position:0 -168px; }
#contact-page .reddit a { background-position:0 -192px; }
#contact-page .tumblr a { background-position:0 -216px; }
#contact-page .flickr a { background-position:0 -240px; }
#contact-page .foursquare a { background-position:0 -264px; }
#contact-page .google a { background-position:0 -288px; }
#contact-page .linkedin a { background-position:0 -312px; }
#contact-page .picasa a { background-position:0 -336px; }
#contact-page .skype a { background-position:0 -360px; }
#contact-page .vimeo a { background-position:0 -384px; }
#contact-page .youtube a { background-position:0 -408px; }
#contact-page .phone a { background-position:0 -432px; }
#contact-page .jalbum a { background-position:0 -456px; }
#contact-page .pinterest a { background-position:0 -480px; }
#contact-page .instagram a { background-position:0 -504px; }
#contact-page .github a { background-position:0 -528px; }
#contact-page .rss a { background-position:0 -552px; }
#contact-page .custom a {
padding:5px;
background-image:none;
}
/************** New photos */
#main article.NewPhotos {
display:none;
}
/************** Tumblr Feed */
.tumblr_post {
background-color:rgba(255,255,255,0.1);
padding:2em 2em 1em 2em;
width:90%;
margin:0.5em auto;
}
.tumblr_posts {
list-style-type:none;
padding:0;
}
.tumblr_text_post { }
.tumblr_title {
font-size: 200%;
}
.tumblr_body { }
.tumblr_body img { height: 300px; }
.tumblr_photo_post { }
.tumblr_photo { height: 300px; }
.tumblr_caption { }
.tumblr_link_post { }
.tumblr_link { }
.tumblr_description { }
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow:none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}