@charset "UTF-8";
/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img, 
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
}
#main {
	width:960px;
	border:1px solid #CCCCCC;
	overflow:hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top:25px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(images/bg.jpg);
	background-position: left top;
	background-color: #8AB2CB;
	background-repeat: repeat-x;
}

#content {
	float: left;
	width: 960px;
	height: 570px;
}

#header {
	width: 960px;
}
#sidebar_right {
	width: 510px;
	float: right;
	text-align: left;
	font-family: "Myriad Pro", "Trebuchet MS", Arial;
	margin-right:50px;
	color: #1f3b71;
	margin-left: 50px;
	margin-top: 35px;
}
#sidebar_right p{
	font-size: 16px;
	padding-bottom: 20px;
}
#sidebar_right h1{
	font-size: 20px;
	font-weight: bold;
	color:#FFFFFF;
	padding-bottom: 15px;
}
#sidebar_right img {
	float: left;
	margin-right:15px;
	margin-top:2px;
	border:#FFFFFF solid 3px;
}
#sidebar_right ul {
	
	}

#sidebar_right ul li {
	color: #1F3B71;
	padding-bottom: 10px;	
}

#sidebar_right ul li a {
	color: #C4D4DF;
	font-size: 12px;
	position: relative;
	line-height: 20px;
	text-decoration: none;
}

#sidebar_right ul li a:hover {
	color: #FFFFFF;
}

#sidebar_diskografija {
	width: 510px;
	float: right;
	text-align: left;
	font-family: "Myriad Pro", "Trebuchet MS", Arial;
	margin-right:50px;
	color: #1f3b71;
	margin-left: 50px;
	margin-top: 35px;
}
#sidebar_diskografija p{
	font-size: 16px;
	padding-bottom: 20px;
}
#sidebar_diskografija h1{
	font-size: 20px;
	font-weight: bold;
	color:#FFFFFF;
	padding-bottom: 15px;
}

#sidebar {
	width: 350px;
	float: left;
	background-image: url(images/klapa-nevera-logo.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	position: absolute;
	top: 1px;
	display:inline;
}



/* Navigation */

#sidebar ul {
	overflow: hidden;
	text-align: right;
	font-family: Garamond, "Times New Roman", Times, serif;
	padding-top: 240px;
	margin-right:10px;
}

#sidebar ul li {
	color: #6c71a0;
	margin-right: 4px;
	margin-left: 4px;
}

#sidebar ul li a {
	color: #1f3b71;
	font-size: 18px;
	position: relative;
	line-height: 30px;
	text-decoration: none;
}

#sidebar ul li a:hover {
	background-color: #c4d4df;
}


#footer {
	width: 730px;
	height: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #C9CDC9;
	text-align: center;
	padding-top: 10px;
	margin-right: auto;
	margin-left: auto;
}
#footer a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #C9CDC9;
	text-align: center;
	text-decoration: none;
}
#nasl_tbl td {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	vertical-align: top;
	width: 110px;
}
#nasl_tbl img {
	float: left;
	border:#FFFFFF solid 2px;
	width: 100px;
	height: auto;
}
#nasl_tbl h1 {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.slide {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:110px;
	height:110px;
	overflow:hidden;
	float:left;
	margin-right: 10px;
	border:#FFFFFF solid 3px;
	margin-bottom: 10px;
	background-color: #68AFCD;
}
	/* Paragraphs and Heading 2 styling, change according to your needs */
	.slide p, .slide h2 {
	color:#ffffff;
	padding:5px;
	text-align: center;
	}


	/* For all the following markup, you'll see each time 4 lines setting
	   the sliding effect (-webkit-transition, -moz-transition, -o-transition
	   and transition), the values set the direction of the slide, the duration
	   and the effect */
	   
	/* Other markup sets the positionning and margins. On mouse hover, you'll
	   see additional paddings which differ according to the direction of the slide.
	   It creates an empty space when the image is pushed away and keeps the "hover"
	   state enabled, otherwise the image would slide back right after. */


	/* 1. Sliding Up */
	
	.moveup img {
		position:absolute;
		left:0;
		top:0;
		
		-webkit-transition: top 0.4s ease-in-out;
		-moz-transition: top 0.4s ease-in-out;
		-o-transition: top 0.4s ease-in-out;
		transition: top 0.4s ease-in-out;
	}
	.moveup img.top:hover {
	top:-110px;
	padding-bottom:110px;
	}
a {
	color: #C4D4DF;
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
}