body {
	background: #f4e6bf url(../images/ljeto/bg_bott.gif) repeat-x bottom;
}

#bg_top {
	background: url(../images/ljeto/bg_top.gif) repeat-x top;
}

#bg_img {
	background: url(../images/ljeto/bg.jpg) repeat-x center 120px;
}

#container {
	background: url(../images/ljeto/bg_top_img.png) no-repeat top center;
	overflow: hidden;
}

#content_top {
	background: url(../images/ljeto/content_top.png) no-repeat top;
}

#content_bott {
	background: url(../images/ljeto/content_bott.png) no-repeat bottom;
}

#center {
	position: relative;
}

#container {
	z-index: 100;
	position: relative;
}

#content {
	z-index: 100;
	position: relative;
}


#leftnav li {
	background: url(../images/ljeto/leftnav_h.gif) no-repeat 5000px 0;
}

#leftnav li a {
	background: #fdf28f url(../images/ljeto/leftnav_link.gif) repeat-x bottom;
}

#leftnav li a:hover {	
	background: #7cab1a url(../images/ljeto/leftnav_h.gif) repeat-x bottom;
	text-shadow: 1px 1px #dff0bd;
}

#leftnav li ul {
	background: #FDF9B9 url(../images/ljeto/left_sub.gif) repeat-x bottom;
}

#leftnav li#leftnav_first a {
	background: #fdd96c url(../images/ljeto/leftnav_first.gif) no-repeat top left;
}

#leftnav li#leftnav_first a:hover {
	background: #a5cf4d url(../images/ljeto/leftnav_first.gif) no-repeat top right;
}

#leftnav li#leftnav_last a {
	background: #fdf28f url(../images/ljeto/leftnav_last.gif) no-repeat bottom left;
}

#leftnav li#leftnav_last a:hover {
	background: #7cab1a url(../images/ljeto/leftnav_last.gif) no-repeat bottom right;
}

#leftnav li ul li ul {
	background: #f5e9a7;
}

#logo {
	height: 66px;
	padding-top: 17px;
	width: 220px;
}

#logo a {
	height: 66px;
	width: 220px;
}

#logo_g {
	width: 56px;
	height: 66px;
	background: url(../images/ljeto/logo_g.png) no-repeat;
	margin: 0;
}

#logo_lobal {
	margin: 21px 0 0 -6px;
}

#footer_g {
	background: url(../images/ljeto/footer_g.gif) no-repeat left;
}


/* VALOVI */

@-moz-keyframes valovi_w
{
0%   { top: 380px; }
50%   { top: 390px; }
100%   { top: 380px; }
}

@keyframes valovi_w
{
0%   { top: 380px; }
50%   { top: 390px; }
100%   { top: 380px; }
}

@-webkit-keyframes valovi_w
{
0%   { top: 380px; }
50%   { top: 390px; }
100%   { top: 380px; }
} 

@-moz-keyframes valovi 
{
0%   { background-position: -1200px 0; }
100%   { background-position: 55200px 0; }
}

@keyframes valovi
{
0%   { background-position: -1200px 0; }
100%   { background-position: 55200px 0; }
}

@-webkit-keyframes valovi
{
0%   { background-position: -1200px 0; }
100%   { background-position: 55200px 0; }
} 

/* RIBE */


@-moz-keyframes riba1 
{
0%   { top: 680px; left: 170px; }
100%   { top: 680px; left: -1200px; }
}

@keyframes riba1
{
0%   { top: 680px; left: 170px; }
100%   { top: 680px; left: -1200px; }
}

@-webkit-keyframes riba1
{
0%   { top: 680px; left: 170px; }
100%   { top: 680px; left: -1200px; }
} 


@-moz-keyframes riba1bubble 
{
0%   { height: 0; }
50%   { height: 15px; }
100%   { height: 0; }
}

@keyframes riba1bubble
{
0%   { height: 0; }
50%   { height: 15px; }
100%   { height: 0; }
}

@-webkit-keyframes riba1bubble
{
0%   { height: 0; }
50%   { height: 15px; }
100%   { height: 0; }
}

@keyframes riba1bubble1
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
}

@-moz-keyframes riba1bubble1 
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
}

@-webkit-keyframes riba1bubble1 
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
} 

@keyframes riba1bubble2
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
}

@-moz-keyframes riba1bubble2
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
}

@-webkit-keyframes riba1bubble2 
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
} 


/* riba 2 */

@-moz-keyframes riba2
{
0%   { left: -600px;; }
100%   { left: 100px; }
}

@keyframes riba2
{
0%   { left: -600px;; }
100%   { left: 100px; }
}

@-webkit-keyframes riba2
{
0%   { left: -600px;; }
100%   { left: 100px; }
} 


@-moz-keyframes riba2bubble 
{
0%   { height: 15px; }
50%   { height: 0; }
100%   { height: 15px; }
}

@keyframes riba2bubble
{
0%   { height: 15px; }
50%   { height: 0; }
100%   { height: 15px; }
}

@-webkit-keyframes riba2bubble
{
0%   { height: 15px; }
50%   { height: 0; }
100%   { height: 15px; }
}

@keyframes riba2bubble1
{
0% { bottom: -22px; left: 0; }
100% { bottom: 70px; left: 50px; opacity: 0; }
}

@-moz-keyframes riba2bubble1 
{
0% { bottom: -22px; right: 0; opacity: 0.9; }
100% { bottom: 70px; right: 50px; opacity: 0; }
}

@-webkit-keyframes riba2bubble1 
{
0% { bottom: -22px; right: 0; opacity: 0.9; }
100% { bottom: 70px; right: 50px; opacity: 0; }
} 

@keyframes riba2bubble2
{
0% { bottom: -26px; right: 0; opacity: 0.9; }
100% { bottom: 50px; right: 30px; opacity: 0; }
}

@-moz-keyframes riba2bubble2
{
0% { bottom: -26px; right: 0; opacity: 0.9; }
100% { bottom: 50px; right: 30px; opacity: 0; }
}

@-webkit-keyframes riba2bubble2 
{
0% { bottom: -26px; right: 0; opacity: 0.9; }
100% { bottom: 50px; right: 30px; opacity: 0; }
} 


/* riba 3 */


@-moz-keyframes riba3
{
0%   { right: -600px; }
100%   { right: 100px; }
}

@keyframes riba3
{
0%   { right: -600px; }
100%   { right: 100px; }
}

@-webkit-keyframes riba3
{
0%   { right: -600px; }
100%   { right: 100px; }
} 

@-moz-keyframes riba3bubble 
{
0%   { height: 10px; }
50%   { height: 0; }
100%   { height: 10px; }
}

@keyframes riba3bubble
{
0%   { height: 10px; }
50%   { height: 0; }
100%   { height: 10px; }
}

@-webkit-keyframes riba3bubble
{
0%   { height: 10px; }
50%   { height: 0; }
100%   { height: 10px; }
}

@keyframes riba3bubble1
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
}

@-moz-keyframes riba3bubble1 
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
}

@-webkit-keyframes riba3bubble1 
{
0% { bottom: -22px; left: 0; opacity: 0.9; }
100% { bottom: 70px; left: 50px; opacity: 0; }
} 

@keyframes riba3bubble2
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
}

@-moz-keyframes riba3bubble2
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
}

@-webkit-keyframes riba3bubble2 
{
0% { bottom: -26px; left: 0; opacity: 0.9; }
100% { bottom: 50px; left: 30px; opacity: 0; }
} 



/* brodovi */

@-moz-keyframes brod /* Firefox */
{
0%   { left: -1100px; }
100%   { left: 1800px; }
}

@keyframes brod
{
0%   { left: -1100px; }
100%   { left: 1800px; }
}

@-webkit-keyframes brod /* Safari and Chrome */
{
0%   { left: -1100px; }
100%   { left: 1800px; }
} 

@-moz-keyframes brod_in /* Firefox */
{
0%   { margin-top: 0; -moz-transform:rotate(-5deg); }
25% { -moz-transform: rotate(0deg); }
50%   { margin-top: 10px; -moz-transform:rotate(5deg);  }
75% { -moz-transform: rotate(0deg); }
100%   { margin-top: 0; -moz-transform:rotate(-5deg);  }
}

@keyframes brod_in
{
0%   { margin-top: 0; transform: rotate(-5deg); }
25% { transform: rotate(0deg); }
50%   { margin-top: 10px; transform: rotate(5deg); }
75% { transform: rotate(0deg); }
100%   { margin-top: 0; transform: rotate(-5deg); }
}

@-webkit-keyframes brod_in /* Safari and Chrome */
{
0%   { margin-top: 0; -webkit-transform:rotate(-5deg); }
25% { -webkit-transform: rotate(0deg); }
50%   { margin-top: 10px; -webkit-transform:rotate(5deg); }
75% { -webkit-transform: rotate(0deg); }
100%   { margin-top: 0; -webkit-transform:rotate(-5deg); }
} 

@-moz-keyframes brod2 /* Firefox */
{
0%   { left: 1800px; }
100%   { left: -1000px; }
}

@keyframes brod2
{
0%   { left: 1800px; }
100%   { left: -1000px; }
}

@-webkit-keyframes brod2 /* Safari and Chrome */
{
0%   { left: 1800px; }
100%   { left: -1000px; }
} 

@-moz-keyframes brod2_in /* Firefox */
{
0%   { margin-top: 0; }
50%   { margin-top: 5px; }
100%   { margin-top: 0; }
}

@keyframes brod2_in
{
0%   { margin-top: 0; }
50%   { margin-top: 5px; }
100%   { margin-top: 0; }
}

@-webkit-keyframes brod2_in /* Safari and Chrome */
{
0%   { margin-top: 0; }
50%   { margin-top: 5px; }
100%   { margin-top: 0; }
} 


.valovi {
	width: 100%;
	height: 179px;
	position: absolute;
	z-index: 10;
	top: 380px;
	left: 0;
	animation: valovi_w 2s infinite ease-in-out;
	-webkit-animation: valovi_w 2s infinite ease-in-out;
	-moz-animation: valovi_w 2s infinite ease-in-out;
}

.valovi span {
	background: url(../images/ljeto/valovi.png);
	display: block;
	width: 100%;
	height: 179px;
	animation: valovi 810s infinite linear;
	-webkit-animation: valovi 810s infinite linear;
	-moz-animation: valovi 810s infinite linear;
}


.riba1 {
	width: 66px;
	height: 104px;
	position: absolute;
	top: 680px;
	left: -200px;
	animation: riba1 20s infinite linear;
	-webkit-animation: riba1 20s infinite linear;
	-moz-animation: riba1 20s infinite linear;
	z-index: 1;
}

.bubble {
	width: 60px;
	height: 60px;
	position: relative;
}

.riba1 .bubble {
	animation: riba1bubble 2s infinite ease-in-out; 
	-webkit-animation: riba1bubble 2s infinite ease-in-out; 
	-moz-animation: riba1bubble 2s infinite ease-in-out;
}

.riba2 .bubble {
	animation: riba2bubble 2s infinite ease-in-out; 
	-webkit-animation: riba2bubble 2s infinite ease-in-out; 
	-moz-animation: riba2bubble 2s infinite ease-in-out;
}

.riba3 .bubble {
	animation: riba3bubble 2s infinite ease-in-out; 
	-webkit-animation: riba3bubble 2s infinite ease-in-out; 
	-moz-animation: riba3bubble 2s infinite ease-in-out;
}


.bubble1 {
	background: url(../images/ljeto/bubble1.png) no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
}

.riba1 .bubble1 {
	animation: riba1bubble1 1s infinite ease-in;
	-moz-animation: riba1bubble1 1s infinite ease-in;
	-webkit-animation: riba1bubble1 1s infinite ease-in;
}

.riba3 .bubble1 {
	animation: riba3bubble1 1s infinite ease-in;
	-moz-animation: riba3bubble1 1s infinite ease-in;
	-webkit-animation: riba3bubble1 1s infinite ease-in;
}

.bubble2 {
	background: url(../images/ljeto/bubble2.png) no-repeat;
	width: 11px;
	height: 11px;
	position: absolute;
}

.riba1 .bubble2 {
	animation: riba1bubble2 2s infinite ease-in;
	-moz-animation: riba1bubble2 2s infinite ease-in;
	-webkit-animation: riba1bubble2 2s infinite ease-in;
}

.riba3 .bubble2 {
	animation: riba3bubble2 2s infinite ease-in;
	-moz-animation: riba3bubble2 2s infinite ease-in;
	-webkit-animation: riba3bubble2 2s infinite ease-in;
}


.bubble3 {
	background: url(../images/ljeto/bubble3.png) no-repeat;
	width: 13px;
	height: 14px;
	position: absolute;
}

.riba2 .bubble3 {
	animation: riba2bubble1 3s infinite ease-in;
	-moz-animation: riba2bubble1 3s infinite ease-in;
	-webkit-animation: riba2bubble1 3s infinite ease-in;
}

.bubble4 {
	background: url(../images/ljeto/bubble4.png) no-repeat;
	width: 6px;
	height: 7px;
	position: absolute;
}

.riba2 .bubble4 {
	animation: riba2bubble2 2s infinite ease-in;
	-moz-animation: riba2bubble2 2s infinite ease-in;
	-webkit-animation: riba2bubble2 2s infinite ease-in;
}


.riba1 span {
	display: block;
	width: 52px;
	height: 41px;
	background: url(../images/ljeto/riba1.png) no-repeat;
}

.riba2 {
	width: 60px;
	height: 104px;
	position: absolute;
	top: 820px;
	left: -300px;
	animation: riba2 30s infinite linear;
	-webkit-animation: riba2 30s infinite linear;
	-moz-animation: riba2 30s infinite linear;
	z-index: 1;
}

.riba2 span {
	display: block;
	width: 60px;
	height: 39px;
	background: url(../images/ljeto/riba2.png) no-repeat;
}

.riba3 {
	width: 58px;
	height: 50px;
	position: absolute;
	top: 780px;
	right: -200px;
	animation: riba3 40s infinite linear;
	-webkit-animation: riba3 40s infinite linear;
	-moz-animation: riba3 40s infinite linear;
	z-index: 1;
}

.riba3 span {
	display: block;
	width: 58px;
	height: 30px;
	background: url(../images/ljeto/riba3.png) no-repeat;
}

.brod {
	width: 128px;
	height: 118px;
	position: absolute;
	top: 347px;
	left: -300px;
	z-index: 2;
	animation: brod 70s infinite linear; /* Firefox */
	-webkit-animation: brod 70s infinite linear; /* Firefox */
	-moz-animation: brod 70s infinite linear; /* Firefox */
}

.brod span {
	background: url(../images/ljeto/sailing_ship.png) no-repeat;
	display: block;
	width: 128px;
	height: 128px;
	animation: brod_in 4s infinite linear; 
	-webkit-animation: brod_in 4s infinite linear; 
	-moz-animation: brod_in 4s infinite linear;
}

.brod2 {
	width: 80px;
	height: 85px;
	position: absolute;
	top: 355px;
	left: -1800px;
	z-index: 1;
	animation: brod2 90s infinite linear; /* Firefox */
	-webkit-animation: brod2 90s infinite linear; /* Firefox */
	-moz-animation: brod2 90s infinite linear; /* Firefox */
	animation-delay: 5s;
	-moz-animation-delay: 5s; /* Firefox */
	-webkit-animation-delay: 5s; /*Safari and Chrome */ 
}

.brod2 span {
	background: url(../images/ljeto/sailing_ship2.png) no-repeat;
	width: 80px;
	height: 80px;
	display: block;
	animation: brod2_in 2s infinite ease-in-out; 
	-webkit-animation: brod2_in 2s infinite ease-in-out; 
	-moz-animation: brod2_in 2s infinite ease-in-out;
}