/* 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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	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: "" "";
}

/* End of Reset */

body {
	background: url("images/body-top.png") top repeat-x;
	text-align: center;
	font: 14px/24px sans-serif;
	font-weight: normal;
	color: #666666;
}

hr {display: none}

hr.clear {display: block; height:0px; border: none; visibility:hidden; margin: 0; padding: 0; clear: both;}

html > body hr.clear {clear: none;}

html>/**/body hr.clear {display: block; height:0px; border: none; visibility:hidden; margin: 0; padding: 0; clear: both;} /* Modern browsers */

#header-bg {
	background: url("images/header-bg.png") top center no-repeat;
	height: 180px;
	position: relative;
	z-index: 0;
}

#header {
	height: 180px;
	width: 960px;
	padding: 0px 0px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	z-index: 1;
}

#content {
	width: 840px;
	height: 360px; /* min-height for IE6 */
	padding: 0px 60px 36px 60px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	z-index: 1;
	background: url("images/content-bottom.png") bottom center no-repeat;
}

html > body #content {
	height: auto;
	min-height: 360px; /* min-height for other browsers */
}

#footer {
	height: 72px;
	clear: both;
	position: relative;
	z-index: 0;
	border-top: 1px solid #800018;
	margin-top: 0px;
	background-color: #881720;
	background-color: #873333;
	font-size: 12px;
	line-height: 22px;
	color: #ba6a6d;
	color: #b17a7a;
	background: #873333 url("images/footer.png") top center repeat-x;
}

#footer a {
	color: #ba6a6d;
	color: #b17a7a;
}

#footer-in {
	width: 798px;
	height: 60px;
	padding: 0px;
	padding-left: 48px;
	padding-top: 12px;
	margin: 0 auto;
	position: relative;
	clear: both;
	z-index: 1;
	text-align: left;
	background: url("images/rs-logo-footer.png") 0px 12px no-repeat;
}

#content-footer {
	position: relative;
	clear: both;
}

html>/**/body #content-footer {
	margin-bottom: 12px;
}

#content-footer a {
	text-decoration: none;
}

#content-footer .c2 a {
	/*color: #666666;*/
}

#content-footer ul, #content-footer ol {
	margin-left: 18px;
}

.c1, .c2, .c3 {
	width: 240px;
	float: left;
	display: inline;  /* fix float bug in IE6 */
	margin-right: 60px;
}

.c3 {
	margin-right: 0px;
}

.index-footer h2 {
	height: 24px;
	line-height: 30px;
	overflow: hidden;
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 9px;
	margin-top: 18px;
	margin-bottom: 6px;
}

.index-footer p {
	height: 96px;
	overflow: hidden;
}

.work-index {
	height: 96px;
	margin-bottom: 12px;
	overflow: hidden;
}

.index-footer .work-index p {
	height: auto;
	margin: 0;
}

.index-footer h3 {
	margin: -12px 0 12px 0;
	text-align: left;
}

#content .content-left {
	width: 240px;
	float: left;
	display: inline;  /* fix float bug in IE6 */
	margin-right: 60px;
}

#content .content-right {
	width: 540px;
	float: right;
	display: inline;  /* fix float bug in IE6 */
	margin-right: 0px;
}

#lang {
	position: absolute;
	top: 12px;
	right: 0px;
}

#lang a {
	display: block;
	float: left;
	padding-top: 24px;
	margin-left: 12px;
	width: 28px;
	height: 12px;
	background-position: -28px 0px;
	text-align: center;
	text-decoration: none;
	color: #ad5559;
}

#lang a:hover, #lang a:focus, #lang a:active {
	background-position: 0px 0px;
	color: #ba6a6d;
}

#lang a.selected {
	background-position: 0px 0px;
	color: #ba6a6d;
}

#lang a.selected:hover {
	background-position: -28px 0px;
	color: #ad5559;
}

a.en {
	background: url("images/en.png") no-repeat;
}

a.sk {
	background: url("images/sk.png") no-repeat;
}

#header h3 {display: block; margin: 0; padding: 0; width: 61px; height: 84px; position: relative; top: 24px; left: 60px; overflow: hidden}
#header h3 span {display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 61px; height: 84px; margin:0; padding:0; background: url("images/rs-logo.png") no-repeat}

#header h2 {display: block; margin: 0; padding: 0; width: 600px; height: 60px; position: absolute; top: 60px; left: 180px; overflow: hidden}
#header h2 span {display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 600px; height: 60px; margin:0; padding:0;}

.index {background: url("images/index-slogan.png") no-repeat;}
.work {background: url("images/work-slogan.png") no-repeat;}
.contact {background: url("images/contact-slogan.png") no-repeat;}
.about {background: url("images/about-slogan.png") no-repeat;}
.blog {background: url("images/blog-slogan.png") no-repeat;}

.access-hide, #header h4 {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

#contacts a {display:block; width: 84px; height: 70px; position: absolute; overflow: hidden; top: 0px; right: 133px;}
#contacts a span {display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 84px; height: 70px; margin:0; padding:0; background: url("images/nav-contact.jpg") no-repeat; cursor: pointer}
#contact a:hover span, #contact a:focus span, #contact a:active span {background-position: 0px -70px}

#blogs a {display:block; width: 83px; height: 70px; position: absolute; overflow: hidden; top: 0px; right: 50px;}
#blogs a span {display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 83px; height: 70px; margin:0; padding:0; background: url("images/nav-blog.jpg") no-repeat; cursor: pointer}
#blog a:hover span, #blog a:focus span, #blog a:active span {background-position: 0px -70px}

ul#nav {
	margin: 0;
	padding: 0;
	height: 48px;
	width: 366px;
	position: absolute;
	top: 0;
	left: 162px;
}

#nav li {
	margin: 0;
	padding: 0;
	height: 48px;
	display: inline;
}

#nav li a {
	margin: 0;
	padding: 0;
	height: 48px;
	display:block;
	float: left;
	position: relative;
	overflow: hidden;
	text-align: center;
}

#nav li a span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	height: 48px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: url("images/rs-nav.png") 0px 0px no-repeat;
}

#work a {width: 116px;}
#work a span {width: 116px;	background-position: 0px 0px;}
#nav li#work.selected a span {background-position: 0px -96px;}
#nav li#work a:hover span, #nav li#work a:focus span, #nav li#work a:active span {background-position: 0px -48px;}

#nav li#about a {width: 80px;}
#nav li#about a span {width: 80px; background-position: -116px 0px;}
#nav li#about.selected a span {background-position: -116px -96px;}
#nav li#about a:hover span, #nav li#about a:focus span, #nav li#about a:active span {background-position: -116px -48px;}

#nav li#blog a {width: 73px;}
#nav li#blog a span {width: 73px; background-position: -196px 0px;}
#nav li#blog.selected a span {background-position: -196px -96px;}
#nav li#blog a:hover span, #nav li#blog a:focus span, #nav li#blog a:active span {background-position: -196px -48px;}

#nav li#contact a {width: 97px;}
#nav li#contact a span {width: 97px; background-position: -269px 0px;}
#nav li#contact.selected a span {background-position: -269px -96px;}
#nav li#contact a:hover span, #nav li#contact a:focus span, #nav li#contact a:active span {background-position: -269px -48px;}

p#gd-link {
	position: absolute;
	top: 18px;
	right: 264px;
	height: 18px;
	width: 53px;
	margin: 0;
	padding: 0;
}

p#gd-link a {
	margin: 0;
	padding: 0;
	height: 18px;
	width: 53px;
	display:block;
	position: relative;
	overflow: hidden;
	text-align: right;
}

p#gd-link a span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	height: 18px;
	width: 53px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: url("images/gd-link.png") 0px 0px no-repeat;
}

p#gd-link a:hover span, p#gd-link a:focus span, p#gd-link a:active span {background-position: 0px -18px;}


#search {
	width: 180px;
	height: 24px;
	position: absolute;
	right: 60px;
	top: 18px;
}

.inactive-search {
	background: url("images/search.png") top left no-repeat;
}

.active-search {
	background: url("images/search.png") top right no-repeat;
}

#search p {
	margin: 0;
	padding: 0;
	height: 24px;
}

body #header input#search-input {
	margin: 0;
	padding: 0 12px 0 12px;
	width: 120px;
	height: 24px;
	border: 0;
	line-height: 24px;
	background: none;
	color: #b3b3b3;
	text-transform: uppercase;
	font-size: 12px;
	vertical-align: baseline;
	text-align: left;
}

input#search-button {
	margin: 0;
	padding: 0;
	padding: 0 30px 0 0;
	width: 36px;
	height: 24px;
	border: 0;
	line-height: 24px;
	background: none;
	text-transform: uppercase;
	font-size: 1px;
}



/* Header & nav end */

/* content */

/* TYPO */

a {
	color: #a33838;
	text-decoration: underline;
}

a:hover, a:focus, a:active {
	color: #333333;
	text-decoration: none;
}

a[href^="tel:"] {
	color: #666666;
	text-decoration: none;
	cursor: default;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}


h1, .h1, #komentar {
	margin: 24px 0 0 0;
	font-size: 24px;
	font-weight: normal;
	line-height: 24px;
	color: #a33838;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
}

h1 a, .h1 a {
	text-transform: uppercase;
	text-decoration: none;
}

h2, .h2 {
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	margin: 24px 0 0 0;
	color: #a33838;
}

h2 a, .h2 a {
	text-transform: uppercase;
	text-decoration: none;
}

h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	margin: 0px 0 0 0;
	color: #a33838;
}

h3 a {
	text-transform: uppercase;
	text-decoration: none;
}

p {
	margin: 0px 0 12px 0;
}

ol {
	margin: 0px 0 12px 32px;
	list-style: decimal;
}

ul {
	margin: 0px 0 12px 32px;
	list-style: square;
}

blockquote {
	margin: 0px 0 12px 24px;
	padding: 11px 6px 1px 24px;
	border-left: 6px solid #d9d9d9;
	background-color: #f2f2f2;
}

blockquote cite {
	font-style: italic;
}

blockquote p {
	margin-bottom: 5px;
}

blockquote {
	margin: 0px 0 12px 0px;
	padding: 11px 0px 1px 0px;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-left: none;
	background: none;
	font-size: 16px;
	text-align: right;
	color: #a33838;
}

blockquote cite {
	font-style: normal;
	font-size: 12px;
	color: #999999;
}

sup, sub, p.footnote {
	font-size: 12px;
	line-height: 22px;
	color: #999999;
}

html > body p.footnote {
	border-top: 1px solid #d9d9d9;
	margin-top: 24px;
	padding-top: 11px;
}

html > body p.footnote + p.footnote {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

sup a, sub a {
	color: #999999;
}

sup {
	vertical-align: text-bottom;
position: relative; top: 0px;
}

sub {
	vertical-align: text-top;
}

p.footnote sup:first-child {
	vertical-align: baseline;
	color: #666666;
}

p.footnote sup:after {
content: ".";
}

.small {
	font-size: 11px;
}

.gray {
	color: #666666;
}

/* blog */

.blog h1, .blog .h1, .posts h2 {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
}

.perex {
	font-weight: bold;
}

.post-info {
	margin-left: -300px;
	float: left;
	display: inline; /* fix float bug in IE6 */
	width: 240px;
	text-align: right;
	font-size: 12px;
	text-transform: uppercase;
	color: #999999;
}

.post-info .cat, .post-info .posts-cat {
	padding: 4px 0 2px 0;
	margin-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
}

.posts {
	margin: 36px 0 0 0;
	clear: both;
}

.post-info p.posts-cat {
	/*margin-top: 12px;*/
}

.post-info p.cat, .post-info p.posts-cat {
	font-size: 16px;
	text-transform: none;
}

.post-info a {
	text-decoration: none;
}

div.ie {
	margin-top: 24px; /* For IE6 & IE7 */
}

html>/**/body div.ie {margin-top: 0;} /* Modern browsers */

.old-articles a {
	padding: 0 0 0 18px;
	text-decoration: none;
	background: url("images/blog-prev.png") left center no-repeat;
}

.continue a, .old-articles .right a {
	padding: 0 18px 0 0;
	text-decoration: none;
	background: url("images/blog-next.png") right center no-repeat;
}

.content-left .continue {
	margin-bottom: 24px;
}

.blog {
	margin-left: 300px;
}

.img {
	margin-left: -300px;
	clear: both;
	text-align: right;
}

.img img {
	padding: 12px 0;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-left: none;
}

.img p {
	margin: 0;
}

.img p.title {
	margin-bottom: 12px;
	text-align: right;
	color: #999999;
}

.img p.title a {
	color: #808080;
}

.blog div.left {
	margin-right: 32px;
	float: left;
	display: inline; /* fix float bug in IE6 */
}

.old-articles {
	font-weight: bold;
	/*font-variant: small-caps;*/
}

.old-articles .right {
	float: right;
}

ol.comments {
	margin: 24px 0 0 0;
	padding: 0;
	clear: both;
	list-style: none;
}

ol.comments li {
	margin: 0 0 24px 0;
	padding: 0;
	clear: both;
	list-style: none;
}

.comment-info {
	margin-left: -300px;
	float: left;
	display: inline; /* fix float bug in IE6 */
	width: 240px;
	clear: both;
	text-align: right;
	font-size: 12px;
	text-transform: uppercase;
	color: #999999;
}

.comment-info p.comment-num {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
	font-size: 14px;
	font-weight: bold;
}

.comment-info a, .comments-invite a {
	text-decoration: none;
}

.comments-invite {
	color: #999999;
}

.comments h5 {
	margin: -24px 0 0 0; /* For IE6 & IE7 */
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #d9d9d9;
	font-weight: bold;
}

html>/**/body .comments h5 {margin-top: 0;} /* Modern browsers */

.comments h5 a {
	text-decoration: none;
}

#comment {
	clear: both;
}

h3#komentar {
	border: none;
	margin-bottom: 12px;
	clear: both;
}

input[type|=text], textarea {
	border: 1px solid #d8d8d8;
	background: url("images/form-bg.png") top repeat-x;
	font: 14px/22px sans-serif;
}

input[type|=text]:focus, textarea:focus {
	border: 1px solid #b3b3b3;
}

input[type|=text] {
	padding: 6px 6px;
	height: 20px;
	width: 226px;
	vertical-align: middle;
	font: 14px/22px sans-serif;
	text-align: right;
	color: #999999;
}

textarea {
	width: 520px;
	height: 162px;
	padding: 6px;
	vertical-align: middle;
	color: #666666;
}

html > body textarea {
	width: 526px;
}

.comments-input {
	margin-left: -300px;
	float: left;
	display: inline; /* fix float bug in IE6 */
	width: 240px;
	clear: both;
	color: #999999;
	text-align: right;
}

/*input#txpCommentSubmit {
	margin: 0 0 0 156px;
	padding: 0;
	width: 84px;
	height: 24px;
	border: 0;
	display: block;
	line-height: 24px;
	font-size: 1px;
	text-indent: -9999px;
	background: url("images/submit.png") top no-repeat;
}*/

.zemContactForm {
	position: relative;
}

.zemContactForm input[type|=text] {
	text-align: left;
}

.zemContactForm legend {
	display: none;
}

ul.zemError {
	padding: 12px;
	margin: 12px 0;
	border: 1px solid #a33838;
	background-color: #f2dada;
	color: #a33838;
	list-style: none;
}

label.Predmet {
	position: absolute;
	top: 0px;
	margin-left: 12px;
}

#Predmet {
	margin-left: 12px;
	width: 144px;
	font-size: 14px;
}

.zemContactForm .zemSubmit {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	height: 38px;
	width: 240px;
	text-align: center;
	font: 14px/36px sans-serif;
	text-shadow: 0px 1px 1px #ffffff;
	color: #333333;
	background: #dadada url("images/rs-send-button.png") left top no-repeat;
}

.zemContactForm .zemSubmit:focus, .zemContactForm .zemSubmit:active {
	text-shadow: 0px 1px 1px #333333;
	color: #ffffff;
	background: #873333 url("images/rs-send-button.png") left bottom no-repeat;
}

textarea.zemTextarea {
	width: 226px;
	height: 132px;
}

#cpreview {margin-bottom: 48px;}

.comments_error, input[type|=text].comments_error {
	border: 2px solid red;
}

.comments-closed {
	padding-top: 6px;
	margin-top: 6px;
	border-top: 1px solid #d9d9d9;
	font-weight: bold;
	color: silver;
}

.req {
	color: #a33838;
	font-weight: bold;
}

a.rss {
	padding-left: 15px;
	background: url("images/footer-rss.png") left 2px no-repeat;
}

a.archive {
	padding-left: 15px;
	background: url("images/footer-archive.png") left 2px no-repeat;
}

.share {
	float: right;
	position: relative;
	top: 8px;
	margin-bottom: -12px;
}

.share a {
	display: block;
	float: right;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	background: url("images/social-share.png") left bottom no-repeat;
	background-position: left bottom;
	text-decoration: none;
}

.share a.delicious:hover {
	background-position: left top;
}

.share a.digg {
	background-position: -24px bottom;
}

.share a.digg:hover {
	background-position: -24px top;
}

.share a.twitter {
	background-position: -48px bottom;
}

.share a.twitter:hover {
	background-position: -48px top;
}

.share a.facebook {
	background-position: -72px bottom;
}

.share a.facebook:hover {
	background-position: -72px top;
}

/* blog end */

/* Easy Slider */
			
.graphic, #prevBtn, #nextBtn, #prev1, #next1, #prev2, #next2, #prev3, #next3, #prev4, #next4, #prev5, #next5 { /* image replacement */
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	text-indent: -8000px;
}
			
.slide {
	margin: 0 auto;
	margin-bottom: 24px;
	position: relative;
	width: 768px;
	/*height: 360px;*/
}

html>/**/body .soft-slide-left {
	background: url("images/soft-slide-left.png") top 0px repeat-y;
	z-index: 999;
	position: absolute;
	width: 24px;
	height: 276px;
}

html>/**/body .soft-slide-right {
	background: url("images/soft-slide-right.png") top 0px repeat-y;
	z-index: 999;
	position: absolute;
	width: 24px;
	height: 276px;
	right: 0;
}

html>/**/body .even ul li {
	background: url("images/work-bg2.png") top 0px repeat-y;
	position: relative;
	z-index: 5;
}

html>/**/body .odd ul li {
	background: url("images/work-bg.png") top 0px repeat-y;
	position: relative;
	z-index: 5;
}

.even img.zoom {
	position: absolute;
	z-index: 6;
	margin: 0;
	padding: 0;
	left: 396px;
	top: 216px;
}

.odd img.zoom {
	position: absolute;
	z-index: 6;
	margin: 0;
	padding: 0;
	left: 288px;
	top: 216px;
}

.slide h2 {
	border: none;
	font-weight: normal;
	color: #b2b2b2;
}

html>/**/body .slide h2 {
	z-index: 1;
}

.slide img {
}

html>/**/body .slide img {
	position: relative;
	z-index: 5;
}

.even h2 {
	position: absolute;
	left: 504px;
	top: 0px;
}

#our-work .even img {
	float: left;
	margin: 0 48px 0 12px;
	display: inline;
}

.even .work-info {
	float: right;
	margin: 36px 24px 0 0;
	display: inline;
	width: 240px;
}

.odd h2 {
	position: absolute;
	left: 24px;
	top: 0px;
	width: 240px;
	text-align: right;
}

#our-work .odd img {
	float: right;
	margin: 0 12px 0 48px;
	display: inline;
}

.odd .work-info {
	float: left;
	margin: 36px 0 0 24px;
	display: inline;
	width: 240px;
	text-align: right;
}

/* Easy Slider */

#slider ul, #slider li,	#slider-corporate ul, #slider-corporate li, .slide ul, .slide li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#slider li {  
	width: 768px;
	height: 360px;
	overflow: hidden; 
}

#slider-corporate li, #slider-media li, #slider-enviroment li, #slider-graphic li, #slider-artwork li, .slider li { 
/* 
	define width and height of list item (slide)
	entire slider area will adjust according to the parameters provided here
*/ 
	width: 768px;
	height: 276px;
	overflow: hidden; 
}

#prevBtn, #nextBtn,	#next1, #prev1, #prev2, #next2, #prev3, #next3, #prev4, #next4, #prev5, #next5 {
	display: block;
	width: 18px;
	height: 30px;
	position: absolute;
	top: 120px;
	z-index: 1000;
}

#prevBtn, #prev1, #prev2, #prev3, #prev4, #prev5 { 
	left: -36px;
	background: url("images/arr-left.png") no-repeat 0 -60px;
}

#nextBtn, #next1, #next2, #next3, #next4, #next5 { 
	right: -36px;
	background: url("images/arr-right.png") no-repeat 0 -60px;
}														

#prevBtn a, #nextBtn a,	#next1 a, #prev1 a, #prev2 a, #next2 a, #prev3 a, #next3 a, #prev4 a, #next4 a, #prev5 a, #next5 a {  
	display: block;
	position: relative;
	width: 30px;
	height: 77px;
	background: url("images/arr-left.png") no-repeat 0 0;	
}	

#nextBtn a, #next1 a, #next2 a, #next3 a, #next4 a, #next5 a { 
		background: url("images/arr-right.png") no-repeat 0 0;	
}

#prevBtn a:hover, #nextBtn a:hover,	#next1 a:hover, #prev1 a:hover, #prev2 a:hover, #next2 a:hover, #prev3 a:hover, #next3 a:hover, #prev4 a:hover, #next4 a:hover, #prev5 a:hover, #next5 a:hover {
	background-position: 0 -30px;	
}

	
/* // Easy Slider */

/* slider end */

/* LYTEBOX */

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
	#lbOverlay.grey { background-color: #000000; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.grey { border: 2px solid #4d4d4d; }

#lbDetailsContainer {	font-size: 11px; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }
	#lbDetailsContainer.grey { border: 2px solid #4d4d4d; border-top: none; }

#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
	position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;
}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 45% no-repeat; }
	
#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 45% no-repeat; }

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
	
#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
	
#lbDetailsData { padding: 0 10px; }
	#lbDetailsData.grey { color: #666666; }


#lbDetails { width: 65%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; padding-left: 5px; color: #a33838; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; padding-left: 5px; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; padding-left: 5px; }

#lbClose { width: 83px; height: 28px; float: right; margin-bottom: 10px; }
	#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPlay.grey { background: url(images/play_grey.png) no-repeat; }
	
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPause.grey { background: url(images/pause_grey.png) no-repeat; }

/* Christmass */

#container {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0px 0px;
    overflow: hidden;
    /*border: 1px solid #5C090A;*/
    background: #ffffff url('images/xmass-not-webkit.jpg') no-repeat top left;
}

#container {[background: #ffffff url('images/xmass-not-webkit.jpg') no-repeat top left; background: #ffffff url('images/xmass-bg.jpg') no-repeat top left;]}

/* Defines the position and dimensions of the leafContainer div */
#leafContainer 
{
    /*position: absolute;*/
    width: 100%;
    height: 100%;
}

/* This CSS rule is applied to all div elements in the leafContainer div.
   It styles and animates each leafDiv.
*/
#leafContainer > div 
{
    position: absolute;
    width: 18px;
    height: 18px;
    
    /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the leafContainer div. In other words, it matches the 'img' elements
   inside the leafDivs which are created in the createALeaf() function.
*/
#leafContainer > div > img {
     position: absolute;
     width: 18px;
     height: 18px;

    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
       animations on each leaf.
       The createALeaf function in the Leaves.js file determines whether a leaf has the 
       clockwiseSpin or counterclockwiseSpinAndFlip animation.
    */
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}


/* Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade
{
    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
    0%   { -webkit-transform: translate(0px, -12px); }
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
    100% { -webkit-transform: translate(0px, 800px); }
}


/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-50deg); }
    /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(50deg); }
}


/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}