@charset "UTF-8";

/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: Antilight.pl                                        ••
   ••  Date:    January 2010                                        ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   
   
    1. GLOBAL STYLES
       1.1 Reset
       1.2 Fonts
      
    2. CONTENT
       2.1 Layout
       2.2 Header
       2.3 Section
       2.4 Carousel
       2.5 Footer
       
    3. JAVASCRIPT
       3.1 Fancybox
      
---------------------------------------------------------------------- */

/* 1. =GLOBAL STYLES
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 1.1 =Reset
---------------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

address, cite, q, dfn {
  font-style: normal;
}

article, aside, dialog, figure, footer, header, 
hgroup, nav, section { 
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

a, ins, del {
  text-decoration: none
}

q, blockquote {
	quotes: none;
}

q:after, q:before,
blockquote:after, blockquote:before {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
  vertical-align: top;
}

th {
  text-align: left;
}

button, input, select, textarea {
  font: inherit;
}

/* 1.2 =Fonts
---------------------------------------------------------------------- */

@font-face {
	font-family: 'DroidSerifRegular';
	src: url('f/DroidSerif-Regular.eot');
	src: local('Droid Serif Regular'), local('DroidSerif'), url('f/DroidSerif-Regular.ttf') format('truetype');
}

/* 1.3 =Default
---------------------------------------------------------------------- */

html, body {
  background: #bfe4ed;
}

body {
  font: normal 14px/22px "Droid Serif", "DroidSerifRegular", Constantia, Gentium, Georgia, serif;
  color: #26516a;
  text-shadow: rgba(255, 255, 255, 0.6) 0 1px 0;
}

a {
  color: #379eb7;
  font-weight: bold;
}

a:hover,
a:focus {
  text-decoration: underline;
}

del       { text-decoration: line-through; }
strong, b { font-weight: bold; }
em, i     { font-style: italic; }
li        { list-style: none; }

button,
input[type="submit"],
input[type="image"],
label,
label > input[type="checkbox"],
label > input[type="radio"] {
  cursor: pointer;
}

section:after,
footer:after,
.carousel ul:after,
footer .more ul:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* 2. CONTENT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 2.1 =Layout
---------------------------------------------------------------------- */

body {
  padding-bottom: 35px;
}

#main {
  padding: 37px 0;
  background: #fff url("i/header.png") no-repeat 50% 79px;
  font-size: 16px;
  color: #333;
  text-shadow: none;
  position: relative;
}

#main > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 37px;
  background: url("i/edge.png") repeat-x;
}

#main > span + span {
  top: auto;
  bottom: 0;
  background-position: 0 -37px;
}

#main > div {
  width: 960px;
  padding: 0 16px;
  margin: 0 auto;
  position: relative;
}

/* 2.2 =Header
---------------------------------------------------------------------- */

header {
  width: 940px;
  padding: 10px 10px 0;
  margin: 0 auto;
  min-height: 25px;
  text-align: right;
}

header a {
  font-weight: normal;
  color: #26516a;
}

/* 2.3 =Section
---------------------------------------------------------------------- */

section {
  background-color: #fff;
  padding-top: 32px;
}

section > div,
aside {
  float: left;
}

section > div {
  width: 540px;
  padding-right: 100px
}

aside {
  width: 300px;
  padding-left: 20px;
}

h1, h2 {
  margin-bottom: 11px;
}

h1 {
  height: 44px;
  width: 130px;
  position: relative;
  color: #115161;
  font: normal 36px/44px Comfortaa, "Century Gothic", "Gill Sans", sans-serif; 
  overflow: hidden;
}

h1 span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fcc;
  background: url("i/logo.png") no-repeat;
}

h2 {
  height: 34px;
  line-height: 34px;
  text-indent: 29px;
  margin-top: 10px;
  margin-left: -29px;
  background-color: #f2efd0;
  position: relative;
}

h2 span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("i/header-text.png") no-repeat;
}

html[lang="en"] h2 span {
  background-position: 0 -34px;
}

.vcard .url {
  cursor: default;
  font-weight: normal;
  color: #333;
}

.vcard .url:hover,
.vcard .url:focus {
  text-decoration: none;
}

/* 2.4 =Carousel
---------------------------------------------------------------------- */

.carousel {
  margin: 19px -16px 8px;
  padding: 56px 56px 80px;
  background: url("i/carousel.png") no-repeat;
  position: relative;
}

.carousel .view {
  overflow: auto;
}

.carousel .view ul {
  position: relative;
  margin-left: -50px;
  width: 2170px; /* (X * 240) + ((X * 50) + ((X * 2) * 10) */
}

.carousel li {
  float: left;
  margin-left: 50px;
  position: relative;
}

.carousel li:after {
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}

.carousel li a,
.carousel li img {
  display: block;
}

.carousel li a {
  border: 10px solid #f2efd0;
  outline: 0;
  -webkit-transition: border-color 0.25s linear;
  -moz-transition: border-color 0.25s linear;
  -o-transition: border-color 0.25s linear;
  transition: border-color 0.25s linear;
}

.carousel li a:hover,
.carousel li a:focus {
  border-color: #e4e0b8;
}

.carousel li a:active {
  border-width: 8px;
  padding: 2px;
}

/* Next */

.carousel .carousel-next,
.carousel .carousel-first {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 18px;
  height: 44px;
  font-size: 30px;
  font-weight: bold;
  line-height: 44px;
  text-align: center;
  color: #fff;
}

.carousel .carousel-next {
  width: 164px;
  margin-left: -82px;
  background-color: #45a8c0;  
}

.carousel .carousel-next span,
.carousel .carousel-first span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("i/button.png") no-repeat;
}

.carousel .carousel-next:hover,
.carousel .carousel-next:focus {
  background-color: #419fb6;
}

.carousel .carousel-next:hover span,
.carousel .carousel-next:focus span {
  background-position: 0 -44px;
}

.carousel .carousel-next:active {
  background-color: #2a899f;
}

.carousel .carousel-next:active span {
  background-position: 0 -88px;
}

html[lang="en"] .carousel .carousel-next {
  width: 113px;
  margin-left: -56.5px;
}

html[lang="en"] .carousel .carousel-next span {
  background-position: -361px 0;
}

html[lang="en"] .carousel .carousel-next:hover span,
html[lang="en"] .carousel .carousel-next:focus span {
  background-position: -361px -44px;
}

html[lang="en"] .carousel .carousel-next:active span {
  background-position: -361px -88px;
}

/* First */

.carousel .carousel-first {
  width: 197px;
  margin-left: -98.5px;
  display: none;
  background-color: #bebebe;
}

.carousel .carousel-first span {
  background-position: -164px 0;
}

.carousel .carousel-first:hover,
.carousel .carousel-first:focus {
  background-color: #5b5b5b;
}

.carousel .carousel-first:hover span,
.carousel .carousel-first:focus span {
  background-position: -164px -44px;
}

.carousel .carousel-first:active {
  background-color: #979797;
}

.carousel .carousel-first:active span {
  background-position: -164px -88px;
}

html[lang="en"] .carousel .carousel-first {
  width: 147px;
  margin-left: -73.5px;
}

html[lang="en"] .carousel .carousel-first span {
  background-position: -474px 0;
}

html[lang="en"] .carousel .carousel-first:hover span,
html[lang="en"] .carousel .carousel-first:focus span {
  background-position: -474px -44px;
}

html[lang="en"] .carousel .carousel-first:active span {
  background-position: -474px -88px;
}

/* JS */

.js .carousel .view {
  overflow: hidden;
}

/* 2.5 =Footer
---------------------------------------------------------------------- */

footer {
  width: 940px;
  padding: 3px 10px 0;
  margin: 0 auto;
}

footer .more,
footer .copyright {
  float: left;
}

footer .more {
  width: 620px;
}

footer .copyright {
  width: 300px;
  padding-left: 20px;
}

footer ul {
  margin: 6px 0 0 -2px;
}

footer a {
  font-weight: normal;
  color: #26516a;
}

footer li {
  float: left;
  margin-right: 10px;
}

footer li a {
  width: 32px;
  height: 32px;
  display: block;
  background-image: url("i/icons.png");
  background-repeat: no-repeat;
  text-indent: -1000em;
}

footer li a:hover,
footer li a:focus {
  opacity: 1;
}

footer li a:focus {
  overflow: hidden;
}

.flickr a     { background-position: 0 0; }
.lastfm a     { background-position: -32px 0; }
.deviantart a { background-position: -64px 0; }
.twitter a    { background-position: -96px 0; }
.tumblr a     { background-position: -128px 0; }

footer .copyright {
  text-align: right;
  opacity: 0.35;
}

footer .copyright:hover {
  opacity: 1;
}

footer .copyright span {
  display: block;
}

footer .copyright {
  -webkit-transition: opacity 0.25s linear;
  -moz-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}

@-webkit-keyframes 'wobble' {
    0% { -webkit-transform: rotate(-2.5deg) translate(-1px, 0); }
   20% { -webkit-transform: rotate( 2.5deg) translate(-1px, 1px); }
   40% { -webkit-transform: rotate(-2.5deg) translate(0, 1px); }
   60% { -webkit-transform: rotate( 2.5deg) translate(-1px, 1); }
   80% { -webkit-transform: rotate(-2.5deg) translate(-1px, 0); }
  100% { -webkit-transform: rotate( 2.5deg) translate(0, 0); } 
}

footer li a:hover {
	-webkit-animation: wobble 0.5s infinite linear;
}

/* 3. JAVASCRIPT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 3.1 =Fancybox
---------------------------------------------------------------------- */

#fancybox-loading {
  position: fixed;
  height: 40px;
  width: 40px;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  cursor: pointer;
  display: none;
  overflow: hidden;
  background: transparent;
  z-index: 200;
}

#fancybox-loading div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 480px;
  background: transparent url("i/fancybox/fancy_progress.png") no-repeat;
}

#fancybox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  display: none;
  z-index: 80;
}

#fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  margin: 0;
  z-index: 90;
  display: none;
}

#fancybox-outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFF;
}

#fancybox-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  outline: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#fancybox-inner img {
  background-color: #fff;
}

#fancybox-hide-sel-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

#fancybox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 30px;
  width: 30px;
  background: url("i/fancybox/fancy_close.png") top left no-repeat;
  cursor: pointer;
  z-index: 165;
  display: none;
}

#fancybox-content {
  height: auto;
  width: auto;
  padding: 0;
  margin: 0;
}

#fancybox-img {
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -ms-interpolation-mode: bicubic;
  outline: none;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
}

#fancybox-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

#fancybox-tmp {
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  overflow: auto;
}

#fancybox-title {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  font-family: Arial;
  font-size: 12px;
  z-index: 112;
}

.fancybox-title-inside {
  padding: 10px 0;
  padding-top: 10px;
  color: #333;
}

.fancybox-title-outside {
  padding-top: 10px;
  color: #fff;
  font-weight: bold;
}

#fancybox-title-wrap {
  display: inline-block;
}

#fancybox-title-wrap span {
  height: 32px;
  float: left;
}

#fancybox-title-left {
  padding-left: 15px;
  background: transparent url("i/fancybox/fancy_title_left.png") repeat-x;
}

#fancybox-title-main {
  line-height: 29px;
  background: transparent url("i/fancybox/fancy_title_main.png") repeat-x;
  color: #fff;
}

#fancybox-title-right {
  padding-left: 15px;
  background: transparent url("i/fancybox/fancy_title_right.png") repeat-x;
}

#fancybox-left, #fancybox-right {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 35%;
  cursor: pointer;
  z-index: 111;
  display: none;
  background-image: url("data:image/gif;base64,AAAA");
  outline: none;
}

#fancybox-left {
  left: 0;
}

#fancybox-right {
  right: 0;
}

#fancybox-left-ico, #fancybox-right-ico {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  width: 54px;
  height: 44px;
  z-index: 112;
  cursor: pointer;
  display: block;
  background: url("i/fancybox/nav.png") no-repeat;
}

#fancybox-left-ico {
  left: -9999px;
  background-position: 0 0;
}

#fancybox-right-ico {
  left: -9999px;
  background-position: -54px 0;
}

#fancybox-left:active #fancybox-left-ico {
  background-position: 0 -44px;
}

#fancybox-right:active #fancybox-right-ico {
  background-position: -54px -44px;
}

#fancybox-left:hover {
  visibility: visible;
}

#fancybox-right:hover {
  visibility: visible;
}

#fancybox-left:hover span {
  left: 20px;
}

#fancybox-right:hover span {
  left: auto;
  right: 20px;
}

#fancy-bg-nw,
#fancy-bg-ne,
#fancy-bg-sw,
#fancy-bg-se,
#fancy-bg-n,
#fancy-bg-s,
#fancy-bg-w,
#fancy-bg-e {
  position: absolute;
}

#fancy-bg-nw { background: url("i/fancybox/nw.png") no-repeat; }
#fancy-bg-ne { background: url("i/fancybox/ne.png") no-repeat; }
#fancy-bg-sw { background: url("i/fancybox/sw.png") no-repeat; }
#fancy-bg-se { background: url("i/fancybox/se.png") no-repeat; }
#fancy-bg-n  { background: url("i/fancybox/n.png") repeat-x; }
#fancy-bg-s  { background: url("i/fancybox/s.png") repeat-x; }
#fancy-bg-w  { background: url("i/fancybox/w.png") repeat-y; }
#fancy-bg-e  { background: url("i/fancybox/e.png") repeat-y; }

#fancy-bg-nw,
#fancy-bg-ne,
#fancy-bg-sw,
#fancy-bg-se {
  width: 45px;
  height: 45px;
}

#fancy-bg-n,
#fancy-bg-s {
  height: 23px;
}

#fancy-bg-w,
#fancy-bg-e {
  width: 23px;
}

#fancy-bg-n {
  top: -23px;
  left: 22px;
  right: 22px;
}

#fancy-bg-ne {
  top: -23px;
  right: -23px;
}

#fancy-bg-e {
  right: -23px;
  top: 22px;
  bottom: 22px;
}

#fancy-bg-se {
  bottom: -23px;
  right: -23px;
}

#fancy-bg-s {
  bottom: -23px;
  left: 22px;
  right: 22px;
}

#fancy-bg-sw {
  bottom: -23px;
  left: -23px;
}

#fancy-bg-w {
  left: -23px;
  top: 22px;
  bottom: 22px;
}

#fancy-bg-nw {
  top: -23px;
  left: -23px;
}