/*	
 * Main.css - All styles there!
 * Contents:
 * - Reset
 * - Common (clearfix, links styling, h1-h4 styling, etc...)
 * - GENERAL Layout
 * - INDEX - main page layout (main slideshow, etc...)
 */


/*
 * CSS Reset
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/**
 * Common (clearfix, anchors, h1-h4 etc...)
 *
 **/
a { color:#a80000;text-decoration:none;}
a:hover,a:focus {text-decoration:underline;}

h1	{font-size:22px;text-align:center;margin:10px 0 20px 0;}
* html h1 {margin-top:-50px}
h2	{font-size:20px;}
h3 	{font-size:18px;}
#index h3 {font-size:16px;}
h4	{font-size:16px;}

em {font-style:normal;font-weight:bold;}

/* Tab left, right */
.tabL {float:left;width:45%;}
	.tabL p {text-align:left;}
.tabR {float:right;width:45%;}
	.tabR p {text-align:right;}

.inline {display:inline;}

/* float clearing */
.clearfix:after{  clear: both;  content: ".";  display: block;  height: 0;  visibility: hidden;}
* html .clearfix{  height: 1%;  overflow: visible;}
*+html .clearfix{  min-height: 1%;}

/*
 * Layout
 */
body		{ font-family:Georgia; background:url(../images/back.jpg) center center repeat #e1c57c;padding-top:5px;line-height:19px;}
div#main	{ width:980px; margin:0 auto;}

a#logo		{ text-indent:-9999px;background:url(../images/logo.png) no-repeat 0 0 transparent;width:467px;height:75px;float:left;display:block}
a#logo-en	{ text-indent:-9999px;background:url(../images/logo-en.png) no-repeat 0 0 transparent;width:467px;height:75px;float:left;display:block;}

ul#nav		{ padding-top:40px;float:right;background:url(../images/nav-back.png) no-repeat 0 0 transparent;width:401px;height:35px;}
	ul#nav li	{float:left;width:25%;text-align:center;}
		ul#nav li a { font-size:17px;padding:5px 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
		ul#nav li a:hover {text-decoration:underline;background-color:#eee;background-color:rgba(0,0,0,0.1);}
		
		
div#footer {background:url(../images/footer-back.png) no-repeat top left transparent;clear:left;line-height:24px;padding:10px;overflow:auto;}
	* html div#footer {border-top:3px solid #e8d197;background:none;margin-top:15px;padding-top:0}

div#footer div {padding:20px 10px 20px 10px;}
	* html div#footer div {padding-top:0px !important;}
	
	#footer a#en {background:url(../images/gb.gif) center left no-repeat transparent;padding-left:24px;}
	#footer a#sr {background:url(../images/rs.gif) center left no-repeat transparent;padding-left:24px;}

/*
 * About us - layout
 */

#members #content p {margin-bottom:20px;text-indent:30px;}
	#members h2.clanovi {margin-bottom:40px;margin-top:40px; text-align:center;}

ul#about-us li {float:left;width:50%;margin-bottom:30px;}
	ul#about-us li img {width:200px;height:250px;background:#eee;float:left;margin-left:5px;margin-right:10px;padding:3px;}
	ul#about-us li h4 {line-height:40px;}
	ul#about-us li p {padding-right:15px;}
	
/*
 * Muzika - layout
 */
#music #content p {margin-bottom:20px;clear:both;text-indent:20px;float:left;*zoom:1;}
#music #content p img {float:left;width:100px;height:100px;margin-left:10px;}
#music #content p a {font-weight:bold;}
#music #content p img.odd {float:right;margin-right:10px;}
#music div.holder {padding:20px;float:left;}
#music #video, #music object {float:right;margin-right:10px;margin-top:15px;}
#music #playlist {float:left;width:400px;}
#music #playlist h3 {margin-top:15px;margin-bottom:5px;padding-left:10px;float:left;clear:left;}
#music #playlist ul {}
	#music #playlist ul li {float:left;clear:left;overflow:auto;}
	#music #playlist ul li a {padding:5px 10px;display:block;width:380px;line-height:1.5;text-decoration:underline !important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
	#music #playlist ul li a:hover, #music #playlist ul li a:focus  {background-color:#eee;background-color:rgba(0,0,0,0.1)}



/*
 * Contact - layout
 */

#contact #content p#dvd { background:url(../images/dvd.jpg) no-repeat left center white; padding: 10px 5px 0 255px;display:block; height:220px;width:330px;border:2px solid #a00000;line-height:30px;float:right;margin-bottom:50px;}
#contact #content div.holder {float:right;width:300px;padding-top:20px;margin-left:20px;}
	#contact #content div.holder a {font-weight:bold;}
	#contact #content div.holder p {margin-bottom:10px;}
	#contact #content div.holder p.email {margin-top:30px;}
#contact #content div#form {margin-left:10px;float:left;border:1px solid #ccc;width:570px;background:#fff;padding:10px;-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.2);box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}

/*
 * Gallery - layout
 */
#gallery #content img {width:450px; height:340px;float:left;margin:10px;}


/*
 * Index layout:
 */
#content {clear:both;background:url(../images/content-back.png) 0 0 repeat-y transparent;padding:20px;overflow:auto;}
* html #content {background:none;}

#index #content {padding:0;}
#index h1 {text-indent:-9999px;line-height:0;margin:0;}


div#slideshow {width:960px;margin:0 auto;height:310px; background:url(../images/slideshow-back.png) center center no-repeat;position:relative !important;overflow:hidden;}
	* html div#slideshow {margin-top:-40px;}
	div#slideshow img {width:954px;height:285px;margin:0 auto;padding:12px 3px;}
	

ul#about {padding:10px 0 0 10px;overflow:hidden;}
	ul#about li { width:220px;float:left;padding:0 5px 0 10px;}
	
	ul#about li ul {list-style:square;list-style-position:inside;}
	ul#about li li {float:none;padding:0;margin:0;}

	ul#about li ul.mini-photos {list-style:none;}
	ul#about li ul.mini-photos li {width:60px;height:60px; margin:5px;background:url(../images/small-photo-back.png) center center no-repeat transparent;float:left;}
	* html ul#about li ul.mini-photos li {margin-left:3px;}
	ul#about li ul.mini-photos li a img {filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity: 0.6;opacity: 0.6;}
	ul#about li ul.mini-photos li a:hover img {filter:alpha(opacity=100);-moz-opacity:1; -khtml-opacity:1;opacity: 1;}
	ul#about li ul.mini-photos li img {width:56px;height:56px;margin:2px;}


	ul#about li h2 {line-height:40px;}
	ul#about li h3 {margin-bottom:10px;}
	ul#about li p, ul#about li li {line-height:26px;}
	ul#about li p.quote {font-style:italic;}