/*

	project: Opæina Tkon (www.tkon.hr)
	author:  Medianova   (www.medianova.hr)
	2009.
	
*/

*{ margin: 0; padding: 0; }
:focus,:active { outline: 0; }
body { font: .74em "Trebuchet MS", Arial, Sans-Serif; color: #777; background: #92c5de; }
a { text-decoration: none; color: #1B556F; }
	a:hover { color: #06222F; }
.x { clear: both; }

h1, h1.grey { position: relative; margin: 0 0 15px -38px; padding: 8px 0 0 37px; height: 36px; color: #1F5D7F; font-size: 1.3em; background: url(../images/site/h1.gif) no-repeat; }
h1.grey { background: url(../images/site/h1grey.gif) no-repeat; color: #000; }
h2 { margin: 0 0 15px; color: #333; line-height: 1.4em; }
p { line-height: 1.64em; margin: 0 0 12px; }
img { border: 0; }
#content { margin: 0 auto; width: 980px; background: url(../images/site/bg.jpg) no-repeat; }

#logo { float: left; }

#topmenu { float: right; margin: 40px 15px 0 0; }
	#topmenu li { list-style: none; display: inline; text-transform: uppercase; font-size: .9em; font-weight: bold; }
	#topmenu li a { float: left; padding: 5px 0 0; margin: 0 0 0 30px; }
	
	#topmenu li.hr a { padding: 0; text-indent: -9999px; background: url(../images/site/hr.gif) no-repeat; width: 26px; height: 26px; }
	#topmenu li.hr a:hover { background-position: left bottom; }
	#topmenu li.en a { padding: 0; text-indent: -9999px; background: url(../images/site/en.gif) no-repeat; width: 26px; height: 26px; }
	#topmenu li.en a:hover { background-position: left bottom; }

#boxtop { clear: both; background: url(../images/site/boxtop.gif) no-repeat; padding: 8px 0 0; height: 46px; }
#box { background: url(../images/site/box.gif) repeat-y; padding: 1px 7px 0; }
#boxbottom { background: url(../images/site/boxbottom.gif) no-repeat left bottom; padding: 7px 0; }

#pitch { float: left; height: 259px; width: 700px; margin: 0 0 1px; padding: 1px 0 0; }
#weather { float: right; background: url(../images/site/weather.gif) no-repeat; height: 245px; width: 238px; padding: 16px 12px 0 15px; margin: 0 1px 0 0; }
	#weather img { float: right; }
	#weather p { margin: 0 0 5px; }
	#caption{ float: left; font-size: 1em; text-transform: uppercase; color: #444; padding: 20px 0 0 0; font-weight: bold; }
	#temp { float: left; font-size: 1.8em; padding: 12px 12px 0 4px; color: #000; font-weight: bold; letter-spacing: -1px; }
	#skraping { padding: 26px 0 0; }
	
#shadow { position: relative; margin: 0 1px; height: 12px; background: url(../images/site/shadow.png) repeat-x; z-index: 1; }
#pline { clear: both; background: url(../images/site/pline.gif) repeat-x; padding: 3px 0; margin: 0 0 8px; }

#menu {margin: 0 20px 0 0; padding: 9px 0 0 15px; }
	#menu li { cursor: pointer; list-style: none; float: left; font-size: .9em; text-transform: uppercase; font-weight: bold; }
	#menu li a { display: block; padding: 6px 0 12px 7px; text-align: center; margin: 0 1px 0 0; color: #000; }
	#menu li a span { padding: 6px 9px 12px 0; }
	
	#menu li a:hover, #menu li a.current {  background: url(../images/site/tableft.gif) no-repeat; color: #fff;  }
	#menu li a:hover span, #menu li a.current span { background: url(../images/site/tabright.gif) no-repeat right top; }

#menu .sm { z-index: 2; position: absolute; visibility: hidden; margin: -4px 0 0 0; width: 200px; }
	#menu .sm a { position: relative; color: #eee; display: block; padding: 5px 0 0 10px; height: 23px; margin: 0 0 5px; white-space: nowrap; text-align: left; }
	#menu .sm a:hover { background: url(../images/site/smbg.gif) no-repeat; color: #fff;  }	
	.smtop { position: relative; background: url(../images/site/submenu-top.png) no-repeat left top; padding: 5px 0 4px; }
	.smbody { background: url(../images/site/submenu-bottom.png) no-repeat left bottom; padding: 1px 6px 14px; }

#main { float: left; width: 677px; padding: 0 0 20px 15px; }
	#main li { list-style: none; }

	.lcol { float: left; width: 465px; }
		.lcol em { font-weight: bold; font-size: 1.1em; color: #333; }
	
		.lcoll { float: left; width: 200px; position: relative; z-index: 100; }
		.lcolr { float: right; width: 200px; position: relative; z-index: 100; padding: 0 10px 0 0; }
		.lcoll h2, .lcolr h2 { font-size: 1.1em; margin: 0 0 10px; }
	.rcol { float: right; width: 200px; }
		.box { background: #eee; padding: 4px 10px 10px; margin: 0 0 10px; }
		
		.more a { font-weight: bold; float: left; padding: 0; color: #fff; background: url(../images/site/more.gif) no-repeat; text-align: center; text-transform: uppercase; font-size: .9em; width: 71px; height: 20px; }
			.more a:hover { color: #C2E1EF; }
		.rcol h3 { padding: 8px 8px 9px; background: #808080; color: #fff; font-size: 1.2em; }
			.box li { list-style: none; border-bottom: 1px solid #ccc; background: url(../images/site/doc.gif) no-repeat 0 7px; font-size: .9em; border-top: 1px solid #eee; padding: 7px 0; }
			.box li a { color: #555; padding: 0 0 0 18px; }
				.box li a:hover { color: #000; }
			
		.date { font-size: .9em; margin: 0 0 3px; }
		
		.download { font-size: 1.1em; padding: 4px 6px; -moz-border-radius: 10px; background: #ddd; margin: 0 0 35px; }
		.image {margin: 5px 5px 0 0; padding: 10px; -moz-border-radius: 10px; background: #ddd; border:2px solid #fff;}
		.photo-images { padding:10px;  -moz-border-radius: 10px; background: #ddd; margin-bottom: 20px;}
			.photo-images img {margin: 5px;}
			
		.content_image { padding: 5px; width: 150px; background: #CFEAF7; float:left; margin: 0 15px 5px 0; }
			.content_image h4 { font-weight: normal; color: #35738F; }
		.inner-article h1 { clear: both; }
		
		#teaser { font-size: 1.1em; font-weight: bold; color: #222; margin: 0 0 20px; }
		
		
	/* GALLERY */
	.gallery { clear: both; width: 660px; height: 160px; background: #b2b2b2; overflow:hidden; padding: 3px 10px 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;}
		.gallery_holder { position:relative; top:0; left:0; width:10000px; height: 150px; }
		.gallery_holder img { margin-right: 20px; max-height: 150px; }
		
		.gal_ttl { background: #B2B2B2; padding: 5px 0; height: 41px; width: 680px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px;}
			.gal_ttl h1 {margin-bottom:0}
			
		.gallery_buttons  { float: right; position: relative; margin: -40px 20px 0 0; font-size: 1.4em; font-weight:bolder; z-index:20; text-align:center;}
		.gallery_buttons a { cursor:pointer; color: #4b3e45; border: 4px solid transparent; padding: 7px 9px; margin: 0 0 0 5px; background: #ddd;}
		.gallery_buttons a:hover { border: 4px solid #fff; }
		
	.inner-article { color: #555; }
	.inner-article h3 { color: #3E5D7F; }
	.inner-article li { background: url(../images/site/blt.gif) no-repeat 6px 10px; padding: 3px 0 3px 16px; }
		
#side { float: right; width: 264px; }
	.box2 { border: 1px solid #eee; margin: 0 7px 5px 0; }
	.box2 h3 { margin: 0; color: #222; background: #eee; padding: 8px 8px 9px; font-size: 1.2em; }
	.box2 ul { padding: 8px; }
	.box2 li { list-style: none; border-bottom: 1px solid #ddd; padding: 4px; }
	.box2 li a { background: url(../images/site/linkbullet.gif) no-repeat 0 7px; padding: 0 0 0 10px; }
		.box2 li a:hover { color: #000; }
	
#footer { padding: 15px 0 15px 20px; color: #1B556F; }
	#footer ul { float: left; width: 150px; }
		#footer ul li { list-style: none; padding: 5px 0; }
		#footer a { color: #1B556F; text-decoration: underline; }
		#rss { font-size: 11px; margin: 0 20px 0 0; }
		#medianova { float: right; padding: 2px 17px 0 0; }