/*------------------------------------------------
CSS INFO
--------------------------------------------------
FILE: style.css
PROJECT:  MyProject
URL: www.myproject.com
AUTHOR: ChciStranky.cz (info@chcistranky.cz, www.chcistranky.cz)
DATE: 04-2009
------------------------------------------------- */

/*------------------------------------------------
 STANDARD HTML TAG RESET 
------------------------------------------------- */
body,
h1, h2, h3, h4, h5,
p, ul, li, ol,
blockquote,
form {
  border: 0;
  margin: 0;
  padding: 0;
}

/*------------------------------------------------
STANDARD HTML TAG DEFINITION
------------------------------------------------- */

body,
form, input {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #666;
}

a:link, a:visited{
  color: #666;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

/*------------------------------------------------
 100% HEIGHT
------------------------------------------------- */

html, body, #wrap {
  height: 100%;
}

body > #wrap {
  height: auto;
  min-height: 100%;
}

#wrap {
  background: url(wrap.png) top repeat-x;
}

.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* End hide from IE-mac */

/*------------------------------------------------
 MAIN
------------------------------------------------- */

#main {
  position: relative;
  width: 1000px;
  padding-bottom: 90px; /* must be same height as the footer */
  margin: 0 auto;
}

/*------------------------------------------------
 HEADER
------------------------------------------------- */

#header {
  position: relative;
  width: 1000px;
  height: 339px;
  background: url(header.jpg);
}

#header h1 a {
  display: block;
  width: 1000px;
  height: 339px;
}

#header h1 a span {
  display: none;
}

/*------------------------------------------------
 CONTENT
------------------------------------------------- */

#content {
  position: relative;
  float: right;
  width: 770px;
  padding: 20px 0 30px;
}

#content h2 {
	padding: 26px 0 30px 90px;
	background: url(content_h2.png) center left no-repeat;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	color: #333333;
}

#content h3 {
	padding: 26px 0 25px 90px;
	background: url(content_h3.png) no-repeat 2px center;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	color: #333333;
}

#content h4 {
	padding: 2px 0 8px 40px;
	font-size: 11px;
	font-weight: normal;
	color: #8D351C;
}

#content p {
  padding: 0 40px 6px;
  color: #373737;
  line-height: 16px;
  text-align: justify;
}

#content p#comment {
	color: #373737;
	font-size: 11px;
}
.news-img-right {
	margin-left: 15px;
	margin-bottom: 15px;
	margin-top: 4px;
}

.news-img-left {
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 4px;
}

#texty p {
  padding: 0 40px 6px;
  color: #373737;
  line-height: 12px;
  text-align: justify;
}

#lyrics p {
	padding: 0 12px 12px 0px;
	color: #373737;
	line-height: 12px;
	text-align: justify;
	font-size: 11px;
}

#tabulka p {
  padding: 0 0px 0px;
  color: #373737;
  line-height: 16px;
  text-align: justify;
}

#clean {
	padding: 0;
	width: 700px;
	position: relative;
	overflow: visible;
	visibility: visible;
	height: 2px;
	clear: both;
 }
/*------------------------------------------------
 SIDEBAR
------------------------------------------------- */

#sidebar {
	position: relative;
	float: left;
	width: 210px;
	padding-bottom: 50px;
}

#sidebar ul {
  list-style: none;
  padding: 30px 10px
}

#sidebar ul li a {
  display: block;
  width: 170px;
  height: 32px;
  background: url(menu1.png) top;
}

#sidebar ul li a:hover {
  background: url(menu1.png) bottom;
}

#sidebar li#m2 a {
	background: url(menu2.png) top;
}

#sidebar li#m3 a {
	background: url(menu3.png) top;
}

#sidebar li#m4 a {
	background: url(menu4.png) top;
}

#sidebar li#m5 a {
	background: url(menu5.png) top;
}

#sidebar li#m6 a {
	background: url(menu6.png) top;
}

#sidebar li#m7 a {
	background: url(menu7.png) top;
}

#sidebar li#m8 a {
	background: url(menu8.png) top;
}

#sidebar li#m9 a {
	background: url(menu9.png) top;
}

#sidebar li#m10 a {
	background: url(menu10.png) top;
}

#sidebar li#m11 a {
	background: url(menu11.png) top;
}

#sidebar li#m2 a:hover{
	background: url(menu2.png) bottom;
}

#sidebar li#m3 a:hover{
	background: url(menu3.png) bottom;
}

#sidebar li#m4 a:hover{
	background: url(menu4.png) bottom;
}

#sidebar li#m5 a:hover{
	background: url(menu5.png) bottom;
}

#sidebar li#m6 a:hover{
	background: url(menu6.png) bottom;
}

#sidebar li#m7 a:hover{
	background: url(menu7.png) bottom;
}

#sidebar li#m8 a:hover{
	background: url(menu8.png) bottom;
}

#sidebar li#m9 a:hover{
	background: url(menu9.png) bottom;
}

#sidebar li#m10 a:hover{
	background: url(menu10.png) bottom;
}

#sidebar li#m11 a:hover{
	background: url(menu11.png) bottom;
}

#sidebar ul li a span {
  display: none;
}

#line {
	background-image: url(line.png);
	background-repeat: no-repeat;
	height: 20px;
	width: 200px;
	padding-bottom: 20px;
	padding-left: 10px;
}

#metalshop {
	background-image: url(metalshop.png);
	background-repeat: no-repeat;
	width: 200px;
	padding-bottom: 20px;
	height: 100px;
	position: relative;
	margin-top: 20px;
	margin-left: 10px;
}

#metalshop a span {
  display: none;
}

#metalshop a {
  display: block;
  width: 200px;
  height: 100px;
}

/*------------------------------------------------
 SUBMENU
------------------------------------------------- */
#menu-map {
	padding-bottom: 50px;
}

#menu-map ul {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 40px;
}
#menu-map li {
	padding-top: 1px;
	padding-bottom: 1px;
}

/*------------------------------------------------
 CROSSROAD
------------------------------------------------- */

#crossroad {
	margin-left: 30px;
	margin-right: 30px;
	position: relative;
}

#crossroad ul {
	list-style-type: none;
	position: relative;
	margin-top: 20px;
	text-indent: 0px;
	line-height: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
}

#crossroad ul li a {
	background: url(cr-historie.gif) bottom;
	height: 125px;
	width: 190px;
	display: block;
	float: left;
	position: relative;
	margin-right: 15px;
	margin-bottom: 15px;
}

#crossroad ul li a:hover {
  background: url(cr-historie.gif) top;
}

#crossroad li#c2 a {
	background: url(cr-deryck.gif) bottom;
}

#crossroad li#c3 a {
	background: url(cr-stevo2.gif) bottom;
}

#crossroad li#c4 a {
	background: url(cr-cone.gif) bottom;
}

#crossroad li#c5 a {
	background: url(cr-dave.gif) bottom;
}

#crossroad li#c6 a {
	background: url(cr-ostatni.gif) bottom;
}

#crossroad li#c7 a {
	background: url(cr-tom.gif) bottom;
}

#crossroad li#c8 a {
	background: url(cr-frank.gif) bottom;
}

#crossroad li#c2 a:hover{
    background: url(cr-deryck.gif) top;
}

#crossroad li#c3 a:hover{
	background: url(cr-stevo2.gif) top;
}

#crossroad li#c4 a:hover{
	background: url(cr-cone.gif) top;
}

#crossroad li#c5 a:hover{
	background: url(cr-dave.gif) top;
}

#crossroad li#c6 a:hover{
	background: url(cr-ostatni.gif) top;
}

#crossroad li#c7 a:hover{
	background: url(cr-tom.gif) top;
}

#crossroad li#c8 a:hover{
	background: url(cr-frank.gif) top;
}

#crossroad ul li a span {
  display: none;
}

#crossroad li#d1 a {
	background: url(cr-alba.gif) bottom;
}

#crossroad li#d2 a {
	background: url(cr-singly.gif) bottom;
	margin-right: 250px;
}

#crossroad li#d3 a {
	background: url(cr-soundtracky.gif) bottom;
}

#crossroad li#d4 a {
	background: url(cr-ostatni-disc.gif) bottom;
}

#crossroad li#d1 a:hover{
	background: url(cr-alba.gif) top;
}

#crossroad li#d2 a:hover{
	background: url(cr-singly.gif) top;
}

#crossroad li#d3 a:hover{
	background: url(cr-soundtracky.gif) top;
}

#crossroad li#d4 a:hover{
	background: url(cr-ostatni-disc.gif) top;
}

#crossroad li#v1 a {
	background: url(cr-klipy.gif) bottom;
}

#crossroad li#v2 a {
	background: url(cr-dvd.gif) bottom;
	margin-right: 250px;
}

#crossroad li#v3 a {
	background: url(cr-rtr.gif) bottom;
}

#crossroad li#v4 a {
	background: url(cr-videajine.gif) bottom;
}

#crossroad li#v1 a:hover{
	background: url(cr-klipy.gif) top;
}

#crossroad li#v2 a:hover{
	background: url(cr-dvd.gif) top;
}

#crossroad li#v3 a:hover{
	background: url(cr-rtr.gif) top;
}

#crossroad li#v4 a:hover{
	background: url(cr-videajine.gif) top;
}

#crossroad li#pr1 a {
	background: url(cr-pfp.gif) bottom;
}

#crossroad li#pr2 a {
	background: url(cr-theoperation.gif) bottom;
}

#crossroad li#pr3 a {
	background: url(cr-bb.gif) bottom;
}

#crossroad li#pr1 a:hover{
	background: url(cr-pfp.gif) top;
}

#crossroad li#pr2 a:hover{
	background: url(cr-theoperation.gif) top;
}

#crossroad li#pr3 a:hover{
	background: url(cr-bb.gif) top;
}

#crossroad li#e1 a {
	background: url(cr-clanky.gif) bottom;
}

#crossroad li#e2 a {
	background: url(cr-trivia.gif) bottom;
}

#crossroad li#e3 a {
	background: url(cr-booklets.gif) bottom;
}

#crossroad li#e4 a {
	background: url(cr-nastroje.gif) bottom;
}

#crossroad li#e5 a {
	background: url(cr-tattoo.gif) bottom;
}

#crossroad li#e6 a {
	background: url(cr-cr.gif) bottom;
}

#crossroad li#e1 a:hover{
	background: url(cr-clanky.gif) top;
}

#crossroad li#e2 a:hover{
	background: url(cr-trivia.gif) top;
}

#crossroad li#e3 a:hover{
	background: url(cr-booklets.gif) top;
}

#crossroad li#e4 a:hover{
	background: url(cr-nastroje.gif) top;
}

#crossroad li#e5 a:hover{
	background: url(cr-tattoo.gif) top;
}

#crossroad li#e6 a:hover{
	background: url(cr-cr.gif) top;
}

#crossroad li#n1 a {
	background: url(cr-nastroje-deryck.gif) bottom;
}

#crossroad li#n2 a {
	background: url(cr-nastroje-stevo.gif) bottom;
}

#crossroad li#n3 a {
	background: url(cr-nastroje-cone.gif) bottom;
}

#crossroad li#n4 a {
	background: url(cr-nastroje-dave.gif) bottom;
}

#crossroad li#n1 a:hover{
	background: url(cr-nastroje-deryck.gif) top;
}

#crossroad li#n2 a:hover{
	background: url(cr-nastroje-stevo.gif) top;
}

#crossroad li#n3 a:hover{
	background: url(cr-nastroje-cone.gif) top;
}

#crossroad li#n4 a:hover{
	background: url(cr-nastroje-dave.gif) top;
}

/*------------------------------------------------
 FOOTER
------------------------------------------------- */

#footer {
  position: relative;
  clear: both;
  width: 100%;
  height: 90px;
  margin-top: -90px; /* negative value of footer height */
  background: url(footer.png);
  color: #5d5d5d;
  font-size: 10px;
}

#footer .in {
  width: 920px;
  height: 80px;
  padding: 10px 0 0;
  margin: 0 auto;
  background: url(footer-in.gif) top left no-repeat;
}

#footer p {
  padding: 0 0 4px;
  text-align: center;
  font-size: 9px;
  color: #666;
}
#twitter {
	height: 180px;
	padding-left: 20px;
	text-align: left;
}