/* CSS for MandarinaLab web site (not including add-ins or browser-specific CSS) */

* { /* sets 0 margin and 0 padding on everything */
	margin: 0; 
	padding: 0;
	font-family: "Arial"; 
}

body {
	background-color: white;
	font-size: 100%;
}

/* remove default link behaviour */
a {
	text-decoration: none;
	border-style: none;
}
p {
        padding-bottom: 5px;
}
img {
	border-style: none;
}

/* remove list bullets everywhere */
li, dd, dt {
	list-style-type: none;
}

#wrapper {
	background-color: white;
	float: left;
	width: 100%;
	min-width: 1000px; /* ie6.css in the width expression */
	max-width: 1630px;
	margin-left: 0;
	margin-right: 0;
	position: relative;
}

.ieholder {
	width: 100%;
}

#content-wrapper {
	float: right;
	width: 25%;
}

/*  ******************************************
	liquid layout three column negative margin technique */

#left {
	/*overflow: hidden;*/
	position: absolute;
	left: 0;
	top: 72px;
	width: 300px; /*Width of left column in percentage*/
}

#right {
	overflow: hidden;
	float: right;
	width: 75%; /*Width of right column in pixels*/
	position: relative;
}

/*  change divs for two-column layouts*/
#main-wrapper {
	float: left;
	width: 100%;
	position: relative;
}

#content {
	padding-left: 300px;
	position: relative;
	min-height: 500px;
}

.in {
	margin: 30px; /*Margins for inner DIV inside each column (to provide padding)*/
	margin-top: 0;
}

/*  XXX************************************XXX */


#header {
	background-color: black;
	width: 100%;
	float: left;
}

/*  ******************************************
	banner */
	
#banner {
	width: 100%;
	float: left;
	position: relative;
}

.navigation {
	width: 300px;
	height: 100%;
	/*position: absolute;
	left: 0;
	bottom: 0;*/
	float: left;
	position: relative;
}
	
#main_links {
	/*float: right;
	width: 100%;*/
	padding-left: 300px;
}

#main_links a {
	height: 131px;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
}

#main_links a:hover,
#main_links a.active {
	background-position: center -131px;
}

.image_left, .image_right {
	width: 16%;
	position: relative;
}

#main-title {
	width: 35%;
	float: left;
	text-align: center;
}

#wedding {
	background-image: url("../img/face/svadba.jpg");
}

#report {
	background-image: url("../img/face/report.jpg");
}

#children {
	background-image: url("../img/face/children.jpg");
}

#advert {
	background-image: url("../img/face/adver.jpg");
}

#main_links h2 {
	padding: 0 0 0 0;
}

.image_left {
	float: left;
}

.image_right {
	float: right;
}

.text_left {
	text-align: center;
	background-image: url("../img/face/light_grey_back.png");
	background-repeat: repeat;
}

.text_right {
	text-align: center;
	background-image: url("../img/face/dark_grey_back.png");
	background-repeat: repeat;
}

h1 {
	/*color: #FFF7CC;*/
	color: orange;
	text-transform: uppercase;
	font-family: "Arial";
	font-weight: bold;
	padding: 5px;
	margin-bottom: 15px;
}

h2 span {
	font-size: 0.83em;
}
h1 a .p1, h1 a .p2, h1 a .p3{
    color: orange;
}
.p1, .p2, .p3 {
	display: block;
}
a .p1,
.p1 {
	padding-top: 1em;
	font-size: 0.55em;
}
a .p2,
.p2 {
	font-size: 0.8em;
}
a .p3,
.p3 {
	font-size: 0.85em;
}

.cat-link {
	position: absolute;
	color: white;
	width: 100%;
	bottom: 0;
	left: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
}

/*  XXX************************************XXX */


#gallery-wrapper {
	float: right;
	width: 100%;
}

/*  ******************************************
	ML logo */

#mlp-title {
	background: url(../img/face/logo.png) no-repeat;
	width: 273px;
}

#ml-title {
	background: url(../img/face/logo_ML.png) no-repeat;
	width: 362px;
}

.title {
	float: left;
	margin-left: 45px;
	margin-top: 5px;
	height: 45px;
}

.defile, .aurora {
	float: right;
	margin-left: 30px;
}

.defile a {
	width: 57px;
	height: 56px;
	display: block;
	background: url(../img/face/defile_button.png) no-repeat;
}

.aurora a {
	width: 96px;
	height: 56px;
	display: block;
	background: url(../img/face/aurora_button.png) no-repeat;
}

/* grey background with transparent triangle to let background colour through */
.ribbon {
	height: 72px;
	background-image: url('../img/face/triangle_grey.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-bottom: 1em;
}

/*  XXX************************************XXX */


/*  ******************************************
	bottom left links section (Youtube and VKontakte) */
span.image-link {
	display: none;
}

#youtube {
	background-image: url(../img/face/youtube.png);
	height: 20px;
	width: 49px;
}

#vkontakte {
	background-image: url(../img/face/vkontakte.png);
	height: 20px;
	width: 20px;
}

#youtube:hover {
	background-position: -49px 0;
}

#vkontakte:hover {
	background-position: -20px 0;
}

ul.links, ul.links li {
	padding-top: 4px;
	display: inline;
}

ul.links a{ 
	display: block;
	float: left;
	background-repeat: no-repeat;
	overflow: hidden;
	margin: 2px 2px 2px 2px;
}


/* pin the Youtube and VKontakte links to the bottom of the page rather than just the div */
#bottom {
	position: absolute;
	bottom: 0;
	left: 20px;
}

ul.extras img {
	width: 75px;
	height: 75px;
}

ul.extras {
	padding-bottom: 2px;
	border-bottom: 2px solid #BFBFBF;
}

ul.extras li {
	padding-bottom: 10px;
}

/*  XXX************************************XXX */


/*  ******************************************
	navigation menu */

div#text-wrapper {
	font-size: 0.8em;
}

ul.menu {
	text-transform: uppercase;
	font-size: 0.9em;
	margin-bottom: 250px;
	float: left;
}

ul.menu em {
	font-weight: bold;
	font-style: normal;
}

ul.menu li {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 0.5em;
	position: relative;
}

ul.menu:hover li,
ul.menu.active li {
	border-right: 1px solid #BFBFBF;
}

ul.menu li a {
	color: #BFBFBF;
}

ul.menu li.selected a {
	color: black;
}

ul.menu li ul {
	display: none;
	position: absolute;
	top: -30px;
	left: 101%;
	padding-left: 2%;
	z-index: 200;
    padding: 0 20px 0 0;
}

ul.menu li ul li {
	border: none;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
    background: #fff;
}
ul.menu li ul li.first {
    height: 30px;
    padding: 0;
    min-width: 120px;
    background: transparent url('../img/face/top-whitehalftrans30.png') repeat-x 0 0;
}
ul.menu li ul li.last {
    height: 30px;
    padding: 0;
    min-width: 120px;
    background: transparent url('../img/face/bottom-whitehalftrans30.png') repeat-x 0 100%;
}
ul.menu.active li ul li,
ul.menu:hover li ul li {
	border: none;
    border-right: 5px solid #fff;
}

li.menu-li.active ul, ul.menu li.active ul,
li.menu-li:hover ul, ul.menu li.jhover ul {
	display: block;
    z-index: 300;
}
li.menu-li.active ul, ul.menu li.active ul{
    z-index: 200;
}

ul.menu a:hover{
    background-color: orange;
    color: black;
}
ul.menu a.active{
    background-color: #BFBFBF;
    color: black;
}

ul.menu li.active ul li a{color: #bbb;display: block;}
ul.menu li.active ul li.active a,
ul.menu li.active ul li:hover a{color: #000;}

ul.menu li.active a,
ul.menu li:hover a {
	color: black;
}

ul.menu li:hover{
    background-color: orange;
}
ul.menu li.active{
    background-color: #BFBFBF;
    color: black;
}

/*  XXX************************************XXX */


/*  ******************************************
	home menu */


.holder {
	background-image: url('../img/face/angle_grey.png');
	background-repeat: no-repeat;
	width: 40%;
	height: 56px;
	float: left;
}

span.logo {
	display: none;
}

#icons {
	position: absolute;
	bottom: 10px;
	left: 60px;
	width: 300px;
	text-align: center; 
}

#icons ul {
	float: left;
}

#icons ul li {
	float: left;
	padding-right: 10px;
}

/*  XXX************************************XXX */


/*  ******************************************
	site map (where am I) */

div.location {
	float: left;
	clear: both;
	position: relative;
	color: white;
	padding: 0.125em 0.125em 0.125em 0.125em;
	margin-left: 45px;
}

div.location a {
	color: white;
}

div.location ul li {
	display: inline;
	text-transform: capitalize;
	font-size: 0.7em;
}

li.node a:hover {
	color: orange;
}

li.node:after {
	content: " > ";
}

/*  XXX************************************XXX */

/*  ******************************************
	ICQ status list for contacts */

ul.icq {
	padding: 0px;
	margin: 0px;
	margin-top: 1em;
}

ul.icq li {
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-left: 20px;
	min-height: 18px;
	margin-bottom: 0.5em;
}

#elena {
	background-image: url("http://status.icq.com/online.gif?icq=488380523&img=5");
}

#ekaterina {
	background-image: url("http://status.icq.com/online.gif?icq=241541580&img=5");
}

/*  XXX************************************XXX */

/*  ******************************************
	image taking up full content area */

#img-fullimage {
	width: 100%;
	display: block;
}

#sub-img {
	width: 100%;
	display: block;
	z-index: 5;
}

.squares li {
	float: right;
	width: 25%;
	line-height: 0;
}

.squares li a {
	display: block;
	position: relative;
}

.squares li img {
	
}

.squares li a p {
	position: absolute;
	line-height: 1em;
	top: 0.7em;
	right: 0.5em;
	color: black;
	font-size: 2em;
	font-weight: bold;
}

.squares li a:hover {
	border: 2px solid orange;
}

.squares {
	float: right;
}

.defile-column {
	width: 23.5%;
	float: right;
	position: relative;
}

.first-row {
	float: left;
}

.defile-column img {
	line-height: 0;
	position: relative;
}

.defile-column ul li a {
	font-size: 0.8em;
	color: white;
	text-transform: uppercase;
	width: 94%;
	float: left;
	padding: 0 3% 0 3%;
	overflow: hidden;
}

.defile-column ul li a:hover, .jhover-defile-li {
	background-color: orange;
	font-size: 0.8em;
}

.defile-top, .defile-hover, .jhover-defile-top, .jhover-defile-hover, .defile-single {
	width: 100%;
	height: auto;
	z-index: 5;
}

.defile-column:hover .defile-top, .defile-column .defile-hover, .defile-ul, .jhover-defile-top {
	display: none;
}

.defile-column:hover .defile-hover, .defile-column .defile-top, .defile-column:hover ul, .jhover-defile-hover, .jhover-defile-ul {
	display: block;
}

.defile-single {
	display: block;
}

.defile-column ul {
	position: absolute;
	z-index: 10;
	top: 4%;
	left: 0;
	width: 100%;
}

.defile-column ul li {
	padding-bottom: 0.2em;
	padding-top: 0.2em;
	width: 100%;
	float: left;
	clear: both;
}

.defile-column p {
	position: absolute;
	z-index: 10;
	left: 0;
	padding: 0 0.5em 0 0.5em;
	bottom: 3%;
	font-size: 1.2em;
	color: white;
}

.filler {
	width: 2%;
	float: right;
	height: 1px;
}

.tile {
	width: 100%;
	height: auto;
}

.img-container {
	position: relative;
}

#outer-caption {
	width: 100%;
}

.image-caption {
	position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: left;
    width: 100%;
    z-index: 2;
    background: url("../img/face/opa50.png");
    color: #2F2710;
}

.img-caption {
	padding: 10px 30px 10px 30px;
}

.img-caption h3 {
	font-size: 2.5em;
	text-transform: uppercase;
	font-family: Arial;
	font-weight: normal;
}

/* JS scrollbar */
.scrollbar {
	background: black;
	height: 20px;
	width: 30px;
	float: left;
}

/* title in text content */
h2 {
	text-transform: uppercase;
	font-size: 1.2em;
	padding-bottom: 1em;
}
h2.auth {
   margin-top: 15px;
}
/* full-size image to appear as gallery if Javascript is disabled */
div.img-noscript-div {
	width: 100%;
}

div.img-noscript-div img {
	width: 100%; /* this will depend on the resolution defined for the page, and the photo resolution */
}

/* error message display to point out that Javascript is disabled */
div.error {
	position: relative;
	padding: 3px;
	margin: 2px;
	border: 3px dashed red;
	float: right;
}

/* div which will remain to point out that CSS is disabled, unless it is enabled! */
#no-css {
	display: none;
}

/*  XXX************************************XXX */

/*  ******************************************
	Mandarina test */

#test-form {
	background-color: #B6B0B0;
	float: left;
	width: 100%;
	position: relative;
	margin-top: 5px;
}

#test-form fieldset {
	height: 100%;
}

#test-form input, #test-form label, #test-form fieldset {
	vertical-align: baseline;
	border: none;
	color: white;
	text-transform: uppercase;
}

#test-submit {
	background-color: #8D8583;
}

#test-stop {
	background-color: #B6B0B0;
	display: inline;
}

.rate-field {
	background-color: #8D8583;
	margin-left: 1%;
	padding: 0 1% 0 1%;
	display: inline;
}
	
#jtest-form, #jtest-result-buttons {
	background-color: #B6B0B0;
	float: left;
	margin-top: 5px;
	width: 100%;
	text-transform: uppercase;
}

#jtest-results, #jtest-result-buttons {
	display: none;
}

#jtest-form a, #jtest-result-buttons a {
	color: white;
	width: 100%;
	display: block;
	font-size: 0.8em;
	font-weight: bold;
}

#jtest-form ul, #jtest-result-buttons ul {
	list-style-type: none;
}

#jtest-form a:hover, #jtest-result-buttons a:hover {
	background-color: orange; 
}

#jtest-form ul li, #jtest-result-buttons ul li {
	display: block;
	text-align: center;
}

.jrating-left {
	float: left;
	width: 25%;
	background-color: #8D8583;
}

.jrating-middle {
	float: left;
	width: 50%;
	background-color: #B6B0B0;
}

.jrating-right {
	float: right;
	width: 25%;
	background-color: #8D8583;
}

.j-rate {
	float: left;
	width: 12%;
	margin-left: 7%;
	background-color: #8D8583;
}

.down {
	padding-top: 1em;
}

.result-line {
	width: 100%;
	float: left;
	border-bottom: 1px solid #B6B0B0;
	padding: 0.7em 0.5em 0.7em 0.5em;
	color: #B6B0B0;
}

.result-pos .result-title, .result-pos .result-score {
	color: orange;
}

.result-pos .result-text {
	color: black;
}

.result-title {
	width: 30%;
}

.result-title, .result-text {
	float: left;
}

.result-score {
	width: 25%;
	float: right;
	font-size: 1em;
	text-align:center;
}

.result-text {
	width: 45%;
}

.result-title {
	text-transform: uppercase;
}

p.small {
	font-size: 0.5em;
}

div.print-icon a {
	display: block;
	width: 16px;
	height: 16px;
}

div.print-icon {
	padding: 0.7em 0.5em 0.7em 0.5em;
}

/*  XXX************************************XXX */


/*  ******************************************
	feedback */

.quest {
	max-width: 500px;
}

.quest fieldset {
	border: none;
	float: left;
	padding: 2em;
}

fieldset.feedback-line {
	padding: 0;
	float: right;
	width: 100%;
}

.quest label {
	float: left;
	clear: both;
	width: 33%;
	color: black;
	font-weight: bold;
	font-size: 0.8em;
}

.quest input, .quest textarea, .quest p {
	width: 66%;
	float: right;
	clear: right;
	border: none;
}

.quest img {
	float: right;
	clear: right;
	border: none;
}

.quest input, .quest textarea {
	background-color: #B6B0B0;
}

.quest input {
	height: 2.2em;
}

.quest p {
	font-size: 0.9em;
}

.quest p.hint {
	font-size: 0.8em;
}

.quest label, .quest input, .quest textarea, .quest p, .quest img {
	margin-top: 1.5em;
}

.form-ok {
	color: green;
}

.form-error {
	color: red;
}

p.feedback-buttons {
	width: 100%;
	float: none;
}

p.feedback-buttons input {
	background: none;
	background-repeat: no-repeat;
	cursor: pointer;
	font-weight: bold;
}

.quest input.bttnreset {
	float: left;
	clear: both;
	width: 49%;
	background-image: url("../img/face/button_left.png");
	background-position: top right;
}

.quest input.bttngo {
	width: 50%;
	background-image: url("../img/face/button_right.png");
	background-position: bottom left;
}

/*  XXX************************************XXX */

ul.normal{
    margin-left: 20px;
    padding-bottom: 10px;
    font-weight: bold;
}
ul.normal ul{
    margin-left: 20px;
    padding-bottom: 10px;
    font-size: 0.9em;
    font-weight: normal;
}
ul.normal a:hover {text-decoration: underline;}
/*  ******************************************
	news */
	
ul.news {
	padding: 5em 2em 1em 1em;
}

ul.news li {
	background-image: url("../img/face/news_bullet.jpg");
	background-repeat: no-repeat;
	background-position: top left;
	padding: 19px 0 5em 168px;
	min-height: 60px;
}

ul.news h3 span {
	display: block;
}

a.news-link {
	float: right;
}

p.news-article {
	padding-top: 1.2em;
}

p.p2right {
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 0.7em;
}

dfn {
	display: block;
}


/*  XXX************************************XXX */


/*  ******************************************
	Aurora summary pages */
	
p.aurora-header {
	width: 100%;
	height: 64px;
	background-image: url("../img/face/aurora_line.jpg");
	background-repeat: no-repeat;
	background-position: top right;
	text-align: left;
	padding: 8px 0 4px 1%;
	font-size: 3em;
}

a.day-row {
	width: 100%;
	border-top: 1px solid #B6B0B0;
	padding: 1.5em 0 1em 0;
	color: #B6B0B0;
	float: left;
}

a.day-row:hover {
	background-color: #E5E5E5;
	color: black;
}

a.day-row div {
	padding: 0 1% 0 1%;
}

a.day-row div.date {
	text-align: center;
	float: left;
	width: 18%;
}

a.day-row div.description {
	float: left;
	width: 52%;
}

a.day-row div.place {
	float: left;
	width: 24%;
	font-size: 0.8em;
}

img.aurora-logo {
	width: 100%;
	height: auto;
}

div.in div.date, div.in div.description, div.in div.place {
	padding: 0.5em 0 0.5em 0;
}


/*  XXX************************************XXX */


/*  ******************************************
	Sitemap */

ul.sitemap li ul.sitemap {
	border-left: 1px solid #BFBFBF;
	padding-left: 1em;
	margin-left: 2em;
}

ul.sitemap li {
	padding: 1em 0 1em 0;
}

ul.sitemap li a {
	font-size: 1.1em;
	color: black;
	text-transform: uppercase;
}

ul.sitemap li ul.sitemap li {
	padding: 0;
}

ul.sitemap li ul.sitemap li a {
	font-size: 0.9em;
	color: #BFBFBF;
}

#map-holder {
	width: 72.93%;
	height: 69.38%;
	position: absolute;
	left: 13.35%;
	top: 18.65%;
	z-index: 20;
}

img.map-image {
	width: 100%;
	height: auto;
	z-index: 10;
}



p.error {
	margin: 0.5em 0.5em 0.5em 0.5em;
	border: 3px solid red;
	padding: 0.2em 0.2em 0.2em 0.2em;
}

div.server-error {
	width: 100%;
	background-color: black;
	color: white;
	text-align: center;
	padding-top: 2em;
}

div.server-error h1 {
	font-size: 2.5em;
	border: 2px solid red;
	display: inline;
}

.defile-row{
    display: block;
    height: auto;
}

.author {
   width: 235px;
   margin: 0 auto;
   padding: 0;
}
.author p {
   padding-bottom: 10px;
}
.author label {
   width: 60px;
   float: left;
   text-align: right;
   margin-right: 5px;
   padding-top: 4px;
}
.author input {
   padding: 4px;
}

p.ppages span.active, p.ppages a:hover {
	background-color: orange;
	color: white;
}