﻿/*----------------------------------------------------
Title: 		The Great Beard Reef
Author:		Matthew Spiel - TheManInTheSea.com
Updated:	1/31/2009
Valid:		You know it!
----------------------------------------------------*/

/* Resets */
html, body, div, img, ul, li, a {margin: 0px; padding: 0px;}
body {
	background: #000000;
	font-family: pala, "Times New Roman", Times, serif;
}

@font-face {
 font-family: pala;
 src: url("pala.eot") /* EOT file for IE */
}
@font-face {
 font-family: pala;
 src: url("pala.ttf") /* TTF file for CSS3 browsers */
}
/* Text, Images and Links */
p, div.fb-like  {
	font-size: 15px;
	line-height: 23px;
	margin: 10px 30px 20px 0px;
	color: #FFFFFF;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	float: left;
	width: 45%;
}
p.tleft {
	text-align: right;
}
p.eng {
	color: #ACACAC;
}
span.white {
	color: #fff;
}

.line a, #sliderfoot a, .cushycms a, .column_odkazy a {
	border-bottom: 0px #FFFF00 dotted;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
	color: yellow;
}
.line a:hover, #sliderfoot a:hover, .cushycms a:hover, .column_odkazy a:hover {
	color: #C0C0C0;
	border-bottom: 1px #FFFF00 solid;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, h11, h12, h13, h14, h15, h16, h17, h18, h19, h20 {
	font-weight: bold;
	font-size: 28px;
	color: #808080;
	margin: 0px auto 10px auto;
	display: block;
	text-align: center;
	padding-right: 80px;
	padding-top: 220px;
}
div#two ul#ten {
	width: 350px;
	padding: 10px 0px;
	color: #8bf3f3;
	border-top: 1px dotted #8bf3f3;
	list-style-position: outside;
	margin: 0px 0px 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
div#two ul#ten li {
	width: 330px;
	margin: 0px 0px 10px 20px;
	padding: 5px 0px 0px;
	font-size: 15px;
	line-height: 25px;
	list-style-position: outside;
}
div#container hr {
	margin-right: 50px;
	border: 1px #161616 solid;
	float: left;
	width: 930px;
}

ul.list {
	color: #8bf3f3;
	margin: 0px 0px 20px;
}
ul.list li {
	width: 680px;
	float: left;
	margin: 0px;
	padding: 10px 0px;
	font-size: 18px;
	line-height: 28px;
	list-style: none;
	border-bottom: 1px dotted #8bf3f3;
}
ul#friends {
	width: 680px;
	margin: 0px;
	padding: 5px 0px;
	list-style: none;
}
ul#friends li {
	color: #b8eeea;
	font-size: 15px;
	padding: 5px 0px;
	line-height: 25px;
}
img.profile {
	margin: 10px 0px 0px 5px;
	border: 10px solid silver;
}
a.loc, a.loc:hover {
	color: transparent;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border: none;
	font-size: 15px;
	text-indent: -100000px;
}
div#bookmark a {
	float: left;
	margin: 5px 10px 0px;
	border: none;
}
div#bookmark a img {
	border: none;
}
div#footerwrap img#treasure {
	float: left;
	margin: 100px 30px 0px -30px;
}
/* Structure */
div.column_left {
	width: 350px;
	float: left;
	padding: 0px 10px 0px 0px;
}
div.column_right {
	width: 300px;
	height: 878px;
	padding: 10px;
	float: left;
	background: url(images/column.png) no-repeat center top;
}
div.column_odkazy {
	width: 950px;
	padding: 10px 40px;
	float: left;
}
div.column_odkazy p {
	width: 800px;
}
div.column_reference {
	width: 950px;
	padding: 10px 3px;
	float: left;
	/* margin-bottom: -300px; */
}
div.column_reference p {
	width: 800px;
}
div.column_reference div.bigo div.odkaz { width: 254px; height: 254px; } 
div.column_reference div.bigop div.odkaz { width: 254px; height: 254px; float: right; margin-right: 22px; } 
div.column_reference div.bigo div.odkaz2 {  }
div.column_reference div.bigo div.odkaz2 a img, div.column_reference div.bigop div.odkaz2 a img { width: 390px; }
div.column_reference div.bigo div.odkaz span, div.column_reference div.bigop div.odkaz span {width: 254px;	font-size: 14px;}

div.column_reference div.odkaz { border: 2px solid #e0e0e0; width: 120px; height: 120px; overflow: hidden; position: relative; float: left; margin-right: 10px; margin-bottom: 10px; } 
div.column_reference div.odkaz2 { position:absolute; width: 1000px; height: 120px; text-align: center; top: 0px; left: -420px; }
div.column_reference div.odkaz2 a img { width: 190px; }
div.column_reference div.odkaz span {
	position: absolute;
	width: 120px;
	height: 20px;
	text-align: center;
	font-size: 10px;
	bottom: 0px;
	left: 0px;
	z-index: 200;
	background-color: #FFFF00;
	overflow: hidden;
}
div.column_reference div.odkaz span a {
	color: #161616;
	text-decoration: none;
}

div.bigo .vg-portfolio-info,div .bigop .vg-portfolio-info{ background-color:rgba(0,0,0,0.5); background-image:url(img/previewbig.png); background-repeat:no-repeat; background-position: center 70px; }
div.bigo .vg-portfolio-info:hover,div .bigop .vg-portfolio-info:hover, div.bigo .vg-portfolio-infoy:hover,div .bigop .vg-portfolio-infoy:hover{ background-position: center -93px; }
div.bigo .vg-portfolio-infoy,div .bigop .vg-portfolio-infoy{ background-color:rgba(0,0,0,0.5); background-image:url(img/previewbigy.png); background-repeat:no-repeat; background-position: center 70px; }
.vg-portfolio-info{ background-color:rgba(0,0,0,0.5); background-image:url(img/preview.png); background-repeat:no-repeat; background-position: center -50px; }
.vg-portfolio-infoy{ background-color:rgba(0,0,0,0.5); background-image:url(img/previewy.png); background-repeat:no-repeat; background-position: center -50px; }
.vg-portfolio-info:hover, .vg-portfolio-infoy:hover{ background-position: center -153px; }
.vg-portfolio-info, .vg-portfolio-infoy{ -moz-transition: all 0.6s linear; -webkit-transition: all 0.6s linear; -o-transition: all 0.6s linear; transition: all 0.6s linear; width: 120px; height: 120px; opacity:1.0; }
div.column_reference div.bigo div.odkaz2 a img:hover, div.column_reference div.bigop div.odkaz2 a img:hover,
div.column_reference div.odkaz div.odkaz2 a img:hover, div.column_reference div.odkaz div.odkaz2 a img:hover{ 
-moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;  }

div#social {
	width: 787px;
	margin: 0px;
	position: relative;
	z-index: 1000;
	float: left;
	margin-left: 90px;
}
div#bookmark {
	width: 220px;
	height: 40px;
	padding: 10px 30px 10px 50px;
	float: left;
	margin: 0px 0px 0px 208px;
}
div#twitter_div {
	width: 300px;
	float: left;
	margin: 60px 0px 0px;
	padding: 60px 0px;
	background: url(images/twitter.png) no-repeat center top;
}
ul#twitter_update_list {
	width: 280px;
	margin: 0px 10px;
	list-style: none;
	float: left;
	font-size: 13px;
	line-height: 20px;
}
ul#twitter_update_list li {
	padding: 5px 0px;
	color: #005a7d;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border-top: 1px dotted #005a7d;
}
ul#twitter_update_list li span a {
	color: #0087bf;
	font-size: 13px;
	line-height: 23px;
}
ul#twitter_update_list li span {
	width: 100%;
	float: left;
}
div#twitter_div a {
	color: #0087bf;
	border: none;
	font-style: italic;
	font-size: 10px;
}
div#twitter_div a:hover {
	text-decoration: underline;
}
div#twitter_div a#twitter-link {
	color: #005a7d;
	margin: 0px 10px;
	float: left;
	font-weight: normal;
	font-style: normal;
}
div#container {
	width: 1000px;
	margin: 0px auto;
	padding: 0px;
}
div#slider {
	width: 100%;
	height: 225px;
	top: 0px;
	position: fixed;
	z-index: 500;
	/* background-color: black; */
	background: transparent url(img/menu-bg.png) repeat-x left top;
}
div#slide_center {
	width: 1000px;
	margin: 0px auto;
}
#sign {
	background: transparent url(images/sign.png) no-repeat left top;
	width: 273px;
	float: left;
	position: relative;
	margin: 20px 0px 0px 357px;
}
#sign a img {
	border: 0px;
}

/* paticka */

div#sliderfoot {
	width: 100%;
	height: 75px;
	bottom: 0px;
	position: fixed;
	z-index: 600;
	/* background-color: black; */
	background: transparent url(img/menu-bg-foot.png) repeat-x left top;
}
div#slidefoot_center {
	width: 1000px;
	margin: 0px auto;
}
#signfoot {
	background: transparent url(images/sign.png) no-repeat left top;
	width: 950px;
	float: left;
	position: relative;
	margin: 20px 0px 0px 50px;
}
#signfoot a img {
	border: 0px;
	text-decoration: none;
}
#signfoot p.footikony a, #signfoot p.footikony a:hover {
	text-decoration: none;
	color: black;
	border-bottom: 0px;
}
#signfoot p.footikony {
	float: right;
	text-align: right;
}
#signfoot p.footikony img {
	width: 24px;
	margin-left: 8px;
	border: 0px;
}
a#vote {
	width: 264px;
	height: 55px;
	margin: 25px;
	float: left;
	background: url(images/sign.png) no-repeat -340px -238px;
	text-indent: -10000px;
	border: none;
}
a#vote:hover {background: url(images/sign.png) no-repeat -26px -238px;}
div#one, div#two, div#three, div#four, div#five, div#six, div#seven, div#eight, div#nine, div#ten, div#eleven, div#twelve, div#thirteen, div#fourteen {
	width: 1000px;
	padding: 0px 0px 50px 0px;
	float: left;
	position: relative;
	margin: 0px 0px 100px 50px;
}
div#one {/* height: 280px; */}
div#two { /* height: 1400px; */}
div#three { }

div#footer {
	width: 100%;
	float: left;
	padding: 0px 0px 10px;

	z-index: -100;
}
div#footerwrap {
	width: 1000px;
	padding: 10px 0px 30px 0px;
	margin: 0px auto;
}
div.column {
	width: 310px;
	margin: 0px 30px 0px 0px;
	float: left;
}
div.line {
	width: 950px;
	margin: 0px 0px 0px 0px;
	padding-top: 0px;
	float: left;
	display: block;
}
/* Navigation */
ul#nav {
	height: 132px;
	width: 787px;
	padding: 0px;
	list-style: none;
	background: url(img/menu.png) left 0px;
}
* html ul#nav {
	top: 15px;
	position: absolute;
}
ul#nav li {
	float: left;	
}
ul#nav li a {
	width: 35px;
	height: 132px;
	float: left;
	margin: 0px 0px 0px;
	text-decoration: none;
	text-indent: -100000px;
	border: none;
	overflow: hidden;
}
a.mlock, a.web, a.design, a.photo, a.videoklipy, a.music, a.projects, a.people, a.workshops, a.clients, a.partners, a.team, a.contact {
	-webkit-transform:rotate(-44deg); /* webkit */
	-moz-transform:rotate(-44deg);  /* firefox */
	-o-transform:rotate(-44deg); /* opera */
	-ms-transform: rotate(-44deg); /* ie9 and future versions */
	transform: rotate(-44deg); /* older browsers */
}
a.mlock:hover, a.web:hover, a.design:hover, a.photo:hover, a.videoklipy:hover, a.music:hover, a.projects:hover, a.people:hover, a.workshops:hover, a.clients:hover, a.partners:hover, a.team:hover, a.contact:hover {
	opacity:0.65;  /* This blends the font in with the background */
	filter:alpha(opacity=65);
	/* background: #0a2c3a; */
}

ul#nav li a.mlock {
	margin-top: -5px;
	margin-left: 37px;
}
ul#nav li a.mlock:hover {
}
ul#nav li a.web {
	margin-top: 10px;
	margin-left: 25px;
}
ul#nav li a.web:hover {
}
ul#nav li a.design {
	margin-top: -5px;
	margin-left: 18px;	
}
ul#nav li a.design:hover {
}
ul#nav li a.photo {
	margin-top: 10px;
	margin-left: 25px;
}
ul#nav li a.photo:hover {
}
ul#nav li a.videoklipy {
	margin-top: -5px;
	margin-left: 17px;	
}
ul#nav li a.videoklipy:hover {
}
ul#nav li a.music {
	margin-top: 13px;
	margin-left: 22px;
}
ul#nav li a.music:hover {
}
ul#nav li a.projects {
	margin-top: -5px;
	margin-left: 20px;	
}
ul#nav li a.projects:hover {
}
ul#nav li a.people {
	margin-top: 10px;
	margin-left: 25px;
}
ul#nav li a.people:hover {
}
ul#nav li a.workshops {
	margin-top: 5px;
	margin-left: 29px;	
}
ul#nav li a.workshops:hover {
}
ul#nav li a.clients {
	margin-top: 10px;
	margin-left: 25px;
}
ul#nav li a.clients:hover {
}
ul#nav li a.partners {
	margin-top: -5px;
	margin-left: 15px;	
}
ul#nav li a.partners:hover {
}
ul#nav li a.team {
	margin-top: 10px;
	margin-left: 20px;
}
ul#nav li a.team:hover {
}
ul#nav li a.contact {
	margin-top: -15px;
	margin-left: 10px;	
}
ul#nav li a.contact:hover {
}
