/*
 Author: Boris Biserov Delev
 Web: www.studiox.bg
 Date: 2009.07.29
 
 Legend:
 	[1] Global
	[2] Master elements
		- wrapper
		- header
		- footer
	[3] Pages elements
*/


/*menu
 * Global
 */

body, html {
	overflow: hidden;
    font: 12px Tahoma, Geneva, sans-serif;
	color: #69696A;
}

a {
	color: #69696A;
}

.clear {
	clear: both;
}

.hide {
    display: none;
}

input,
textarea,
select,
button {
	font: 11px Tahoma, Geneva, sans-serif;
}

input,
textarea {
	padding: 4px 3px;
	outline: none;
	color: #B2B2B2;
}

/*
 * Master elements
 */
 
#wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	#wrapper .wrapper {
		position: absolute;
		width: 590px;
		top: 5%;
		right: 40px;
	}
	
	.center #wrapper .wrapper {
		margin: 0 0 0 -295px;
		left: 50%;
        right: auto
	}
	
	#supersize {
        position: relative;
	}

	#supersize img {
		width: 100%;
		height: 100%;
	}
	

#header {
}
	
	#header h1 {
		width: 590px;
		height: 115px;
		
		background: url(../images/site/logo.png) no-repeat left top;
	}
		#header h1 a {
			display: block;
			overflow: hidden;
			width: 590px;
			height: 115px;
			text-indent: -9999px;
		}
		
#box {
	position: absolute;
	width: 553px;
	height: 376px;
	padding: 13px 0 0 30px;

	background: url(../images/site/bg-box.png) no-repeat center center;
    cursor: move;
}

	#box .container {
		display: block;
		width: 530px;
		height: 360px;
	}

        #box .container .news_article {
            display: block;
            width: 530px;
            height: 245px;
        }

        #box .container .full_article {
            display: block;
            width: 530px;
            height: 280px;
        }

        #box .container .gal {
            display: block;
            width: 530px;
            height: 260px;
        }

        #box .container .friends {
            display: block;
            width: 535px;
            height: 250px;
        }

        #box .container .biography_article {
            display: block;
            width: 530px;
            height: 210px;
        }

#minimize {
    overflow: hidden;
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 0 0 0 507px;

    background: url(../images/site/minimize.png) no-repeat left top;
    text-indent: -9999px;
}
    #minimize:hover,
    #minimize.active {
        background-position: left bottom;
    }

#box .container .h2 {
    overflow: hidden;
    height: 60px;
    background: url(../images/site/languages/bg/news.png) no-repeat left center;
    text-indent: -9999px;
}
    
    #box .container .title_group {
        background-image: url(../images/site/languages/bg/biography.png);
    }
    #box .container .title_gallery {
        background-image: url(../images/site/languages/bg/gallery.png);
    }
    #box .container .title_friends {
        background-image: url(../images/site/languages/bg/friends.png);
    }
    #box .container .title_contacts {
        background-image: url(../images/site/languages/bg/contacts.png);
    }
    #box .container .title_maria,
    #box .container .title_boryana,
    #box .container .title_geri,
    #box .container .title_marina {
        position: relative;
        margin-left: -20px;
        width: 510px;
        height: 124px;
        background-image: url(../images/site/languages/bg/maria.png);
    }
    #box .container .title_marina {
        background-image: url(../images/site/languages/bg/marina.png);
    }
    #box .container .title_geri {
        background-image: url(../images/site/languages/bg/geri.png);
    }
    #box .container .title_boryana {
        background-image: url(../images/site/languages/bg/boryana.png);
    }
    #box .container .title_press {
        background-image: url(../images/site/languages/bg/press.png);
    }
    #box .container .title_music {
        background-image: url(../images/site/languages/bg/music.png);
    }

#box .container .h3 {
    padding: 0 0 10px 0;
    font-weight: bold;
    color: #8E7F7D;
}

	
#menu {
	overflow: hidden;
	padding: 0 0 10px 0;
}

	#menu li {
		float: left;
		padding: 0 0 0 15px;
		background: url(../images/site/dot.png) no-repeat 5px 6px;
	}
		#menu li.first {
			padding: 0;
			background: none;
		}
	
	#menu a {
		display: block;
		overflow: hidden;
		width: 64px;
		height: 20px;
		background: url(../images/site/languages/bg/menu.png) no-repeat left top;
		text-indent: -9999px;
	}
		#menu a:hover, #menu .selected a {
			background-position: left bottom;
		}
		
		#menu a.press {
			width: 52px;
			background-position: -78px 0;
		}
			#menu a.press:hover, #menu .selected a.press {
				background-position: -78px -20px;
			}
			
		#menu a.biography {
			width: 92px;
			background-position: -146px 0;
		}
			#menu a.biography:hover, #menu .selected a.biography {
				background-position: -146px -20px;
			}
			
		#menu a.music {
			width: 63px;
			background-position: -252px 0;
		}
			#menu a.music:hover, #menu .selected a.music {
				background-position: -252px -20px;
			}
			
		#menu a.gallery {
			width: 66px;
			background-position: -330px 0;
		}
			#menu a.gallery:hover, #menu .selected a.gallery {
				background-position: -330px -20px;
			}
			
		#menu a.friends {
			width: 82px;
			background-position: -412px 0;
		}
			#menu a.friends:hover, #menu .selected a.friends {
				background-position: -412px -20px;
			}
			
		#menu a.contacts {
			width: 75px;
			background-position: -510px 0;
		}
			#menu a.contacts:hover, #menu .selected a.contacts {
				background-position: -510px -20px;
			}



#submenu {
	overflow: hidden;
	padding: 0 0 10px 130px;
}

	#submenu li {
		float: left;
		padding: 0 0 0 16px;
		background: url(../images/site/tilt.gif) no-repeat 5px 0;
	}
		#submenu li.first {
			padding: 0;
			background: none;
		}

	#submenu a {
		display: block;
		overflow: hidden;
		width: 75px;
		height: 17px;
		background: url(../images/site/languages/bg/submenu.png) no-repeat left top;
		text-indent: -9999px;
	}
		#submenu a:hover, #submenu .selected a {
			background-position: left bottom;
		}

		#submenu a.maria {
			width: 49px;
			background-position: -90px 0;
		}
			#submenu a.maria:hover, #submenu .selected a.maria {
				background-position: -90px -17px;
			}

		#submenu a.marina {
			width: 59px;
			background-position: -250px 0;
		}
			#submenu a.marina:hover, #submenu .selected a.marina {
				background-position: -250px -17px;
			}

		#submenu a.geri {
			width: 33px;
			background-position: -204px 0;
		}
			#submenu a.geri:hover, #submenu .selected a.geri {
				background-position: -204px -17px;
			}

		#submenu a.boryana {
			width: 54px;
			background-position: -147px 0;
		}
			#submenu a.boryana:hover, #submenu .selected a.boryana {
				background-position: -147px -17px;
			}


/*
 * Page elements
 */
#gallery {
    overflow: hidden;
	display: block;
}

    #gallery li {
        float: left;
        margin-right: 15px;
    }

    #gallery li img {
        padding: 1px;
        background: white;
        border: 4px solid #E9EBED;
    }
	
		.simple #gallery li img {
			margin-bottom: 10px;
		}

    #gallery h3 {
        overflow: hidden;
        width: 110px;
        padding: 0 0 10px 0;
    }
        #gallery h3 a {
            color: #B2B2B2;
        }


#friends {
    overflow: hidden;
}

    #friends li {
        float: left;
        width: 240px;
        height: 60px;
        margin-right: 10px;
        overflow: hidden;
    }

    #friends h3 {
        font-weight: bold;
    }

    #friends li .preview {
       float: left;
       padding: 4px;
       width: 65px;
       height: 45px;
       margin-right: 10px;
       background: #E9EBED;
    }

        #friends li .preview img {
            padding: 1px;
            background: white;
        }


#change_it {
    overflow: hidden;
    padding-top: 15px;
    font-size: 11px;
}

    #change_it a {
        float: left;
        margin-right: 3px;
        padding: 0 0 0 10px;
        background: url(../images/site/arrows.gif) no-repeat 0 10px;
        text-decoration: none;
    }
        #change_it a.next {
            float: right;
            padding: 0 10px 0 0;
            background-position: right -15px;
        }

        #change_it a em {
            color: #B2B2B2;
        }

        #change_it a strong {
            text-decoration: underline;
			font-weight: bold;
        }
            #change_it a:hover strong {
                text-decoration: none;
            }

#press {
    overflow: hidden;
}

    #press ul {
        overflow: hidden;
        margin-bottom: 10px;
        background: url(../images/site/line-horisontal.png) repeat-x left bottom;
    }

    #press li {
        float: left;
        padding-bottom: 20px;
        margin-right: 7px;
    }
        #press li.last { margin: 0;}

    #press span { clear: both; display: block; padding-top: 10px;}

        #press span a {
            float: left;
            height: 46px;
            padding-left: 45px;
            margin-right: 10px;

            background: url(../images/site/icons.gif) no-repeat left top;
            line-height: 45px;
            color: #B2B2B2;
        }
            #press span a.doc {
                background-position: left bottom;
            }

    #press h4 { padding: 5px 0; color: #8E7F7D; font-weight: bold; }

        #press li img { padding: 1px; background: white; border: 4px solid #E9EBED;}

        #press li a {
            color: #B2B2B2;
        }
            #press li a:hover strong {
                text-decoration: none;
            }

        #press li strong {
            display: block;
            text-decoration: underline;
        }


#music {
	position: relative;
	margin-bottom: 10px;
    padding-bottom: 10px;
    background: url(../images/site/line-horisontal.png) repeat-x left bottom;
}
		
    #music a {
        text-decoration: none;
    }

        #music a img {
            width: 114px;
            padding: 1px;
            background: white;
            border: 4px solid #E9E9EB;
        }

        #music a strong {
            display: block;
            padding-left: 12px;
            background: url(../images/site/icon-video.gif) no-repeat 0 3px;
            text-align: left;
            color: #B2B2B2;
        }

	#music .jcarousel-clip {
		z-index: 2;
		padding: 0;
		margin: 0 auto;
		width: 508px;
		overflow: hidden;
		position: relative;
	}

	#music .jcarousel-list {
		z-index: 1;
		overflow: hidden;
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
	}

	#music .jcarousel-list li,
	#music .jcarousel-item {
		float: left;
		position: relative;
		overflow: hidden;

		width: 124px;
		height: 115px;
		padding: 0 0 0 0;
        margin-right: 4px;

		list-style: none;
		text-align: center;
	}

	#music .jcarousel-prev,
	#music .jcarousel-next {
		position: absolute;
		width: 12px;
		height: 27px;
		left: 0;
		top: 29px;

		background: url(../images/site/next-prev.png) no-repeat left top;
		cursor: pointer;
	}

	#music .jcarousel-next {
		right: 0;
		left: auto;
		background-position: right top;
	}
	
#language {
	position: absolute;
	top: 5%;
	right: 0;
	width: 20px;
	height: 74px;
}

	#language a {
		display: block;
		overflow: hidden;
		width: 20px;
		height: 74px;
		background: url(../images/site/language.gif) no-repeat left top;
		text-indent: -9999px;
	}
		#language a:hover {
			background-position: left bottom;
		}
		
		#language a.bulgarian {
			background-position: right top;
		}
			#language a.bulgarian:hover {
				background-position: right bottom;
			}

#contact_form {
    overflow: hidden;
    clear: both;
}

    #contact_form button {
        padding: 2px;
    }

    #contact_form legend {
        display: none;
    }

    #contact_form li {
        overflow: hidden;
        padding-bottom: 5px;
    }

        #contact_form li label {
            float:left;
            width: 100px;
        }

        #contact_form li input {
            width: 200px;
        }

        #contact_form li textarea {
            width: 400px;
            height: 80px;
        }

        #contact_form li img {
            margin-right: 5px;
            vertical-align: middle;
        }

            #contact_form #security_code {
                width: 50px;
            }
			
#studiox {
	position: absolute;
	bottom: 5%;
	right: 0;
	width: 20px;
	height: 94px;
	margin-top: 75px;
}

	#studiox a {
		display: block;
		overflow: hidden;
		width: 20px;
		height: 94px;
		background: url(../images/site/studiox.gif) no-repeat right top;
		text-indent: -9999px;
	}
		#studiox a:hover {
			background-position: right bottom;
		}

/* Text boxes */
.text {
    overflow: hidden;
    padding-bottom: 10px;
    font-size: 12px;
}

	.text a {
		color: #99A3AD;
		text-decoration: underline;
	}
        .text a:hover {
            text-decoration: none;
        }

	.text strong {
		font-weight: bold;
	}

	.text em {
		font-style: italic;
	}

	.text ul,
	.text ol {
		padding: 3px 0 3px 5px;
	}

		.text ol li {
			list-style: decimal;
			list-style-position: inside;
		}

		.text ul li {
			padding: 0 0 3px 13px;
		}

	.text p {
		padding-bottom: 5px;
	}

	.text h1,
	.text h2,
	.text h3 {
		font-size: 14px;
		padding-bottom: 5px;
        font-weight: bold;
        color: #69696A;
	}

    .text h2 {
        font-size: 13px;
    }

    .text h3 {
        font-size: 12px;
    }

	.text h4 {
		font-size: 13px;
	}

	.text h5 {
		font-size: 13px;
	}

	.text h6 {
		font-size: 12px;
	}

    .text .preview {
        float: left;
    }

    .text .preview img {
        padding: 1px;
        margin: 0 15px 5px 0;
        border: 6px solid #E9EBED;
        background: white;
    }

    .text .date {
        display: block;
        padding-bottom: 5px;
        color: #B2B2B2;
        font-size: 10px;
        font-style: normal;
    }

.friends_description {
    display: block;
    overflow: hidden;
    height: 30px;
}
	
/* jScroll */
.jScrollPaneContainer {
	position: relative;
	outline: none;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	display: none;
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: white;
}
.jScrollPaneDrag {
	position: absolute;
	background: #EFEFEF;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 21px;
	width: 21px;
	background: url(../images/site/scroll.gif) no-repeat left top;
}
a.jScrollArrowUp:hover {
	background-position: right top;
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 21px;
	width: 21px;
	background: url(../images/site/scroll.gif) no-repeat left bottom;
}
a.jScrollArrowDown:hover {
	background-position: right bottom;
}


/*
 * Languages
 */
 
.en-US #studiox a {
	background-position: left top;
}
		.en-US #studiox a:hover {
			background-position: left bottom;
		}

.en-US #box .container .h2 {
    background-image: url(../images/site/languages/en/news.png);
}

    .en-US #box .container .title_group {
        background-image: url(../images/site/languages/en/biography.png);
    }
    .en-US #box .container .title_gallery {
        background-image: url(../images/site/languages/en/gallery.png);
    }
    .en-US #box .container .title_friends {
        background-image: url(../images/site/languages/en/friends.png);
    }
    .en-US #box .container .title_contacts {
        background-image: url(../images/site/languages/en/contacts.png);
    }
    .en-US #box .container .title_maria {
        background-image: url(../images/site/languages/en/maria.png);
    }
    .en-US #box .container .title_marina {
        background-image: url(../images/site/languages/en/marina.png);
    }
    .en-US #box .container .title_geri {
        background-image: url(../images/site/languages/en/geri.png);
    }
    .en-US #box .container .title_boryana {
        background-image: url(../images/site/languages/en/boryana.png);
    }
    .en-US #box .container .title_press {
        background-image: url(../images/site/languages/en/press.png);
    }
    .en-US #box .container .title_music {
        background-image: url(../images/site/languages/en/music.png);
    }
	
.en-US #menu {
	margin-left: 30px;	
}

	.en-US #menu a {
		width: 45px;
		background-image: url(../images/site/languages/en/menu.png);
	}
		.en-US #menu a:hover, .en-US #menu .selected a {
			background-position: 0 -20px;
		}
		
		.en-US #menu a.press {
			width: 42px;
			background-position: -59px 0;
		}
			.en-US #menu a.press:hover, .en-US #menu .selected a.press {
				background-position: -59px -20px;
			}
			
		.en-US #menu a.biography {
			width: 84px;
			background-position: -114px 0;
		}
			.en-US #menu a.biography:hover, .en-US #menu .selected a.biography {
				background-position: -114px -20px;
			}
			
		.en-US #menu a.music {
			width: 50px;
			background-position: -210px 0;
		}
			.en-US #menu a.music:hover, .en-US #menu .selected a.music {
				background-position: -210px -20px;
			}
			
		.en-US #menu a.gallery {
			width: 60px;
			background-position: -272px 0;
		}
			.en-US #menu a.gallery:hover, .en-US #menu .selected a.gallery {
				background-position: -272px -20px;
			}
			
		.en-US #menu a.friends {
			width: 60px;
			background-position: -344px 0;
		}
			.en-US #menu a.friends:hover, .en-US #menu .selected a.friends {
				background-position: -344px -20px;
			}
			
		.en-US #menu a.contacts {
			width: 74px;
			background-position: -415px 0;
		}
			.en-US #menu a.contacts:hover, .en-US #menu .selected a.contacts {
				background-position: -415px -20px;
			}

	.en-US #submenu a {
		width: 65px;
		background: url(../images/site/languages/en/submenu.png) no-repeat left top;
	}
		.en-US #submenu a:hover, .en-US #submenu .selected a {
			background-position: left bottom;
		}

		.en-US #submenu a.maria {
			width: 40px;
			background-position: -73px 0;
		}
			.en-US #submenu a.maria:hover, .en-US #submenu .selected a.maria {
				background-position: -73px -17px;
			}

		.en-US #submenu a.marina {
			width: 49px;
			background-position: -216px 0;
		}
			.en-US #submenu a.marina:hover, .en-US #submenu .selected a.marina {
				background-position: -216px -17px;
			}

		.en-US #submenu a.geri {
			width: 30px;
			background-position: -178px 0;
		}
			.en-US #submenu a.geri:hover, .en-US #submenu .selected a.geri {
				background-position: -178px -17px;
			}

		.en-US #submenu a.boryana {
			width: 52px;
			background-position: -122px 0;
		}
			.en-US #submenu a.boryana:hover, .en-US #submenu .selected a.boryana {
				background-position: -122px -17px;
			}