﻿/*
 * ********************************************
 * @author        Dimitar Roustchev
 * @date          2010-03
 * @copyright     2010 Dimitar Roustchev
 * ********************************************
 */
 
 /******** css reset ********/

	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
	table { border-collapse:collapse; border-spacing:0; }
	fieldset,img { border:0; }
	address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
	ol,ul { list-style:none; }
	caption,th { text-align:left; }
	h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
	q:before,q:after { content:''; }
	abbr,acronym { border:0; }

 /******** global definitions ********/
 
	a:focus { outline:none; }
	
 /******** global classes ********/

	/* clear for floats */
	.clear {clear:both;height:0px;overflow:hidden;
 }
	.wrap {margin:0 auto; width:735px; }
	.box-shadow{-moz-box-shadow: 5px 5px 10px #444; /* Firefox */
					-webkit-box-shadow: 5px 5px 10px #444; /* Safari, Chrome */
					box-shadow: 5px 5px 5px #444; /* CSS3 */ }
	.bottom-shadow {-moz-box-shadow: 0px 5px 10px #444; /* Firefox */
					-webkit-box-shadow: 0px 5px 10px #444; /* Safari, Chrome */
					box-shadow: 0px 5px 10px #444; /* CSS3 */ }

 /******** body ********/
  
	html { height:100%; }
	body { background:#0092c9; height:100%; color:#FFF; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; }
	/* top ribbon */
	#ribbon { height:8px; background:#01587B; }	

 /******** header ********/

#header { 
	height:88px;
	position:relative;
	border-bottom:1px solid #FFF; 
}
#header #logo { 
	width:238px; 
	height:18px;
	background:transparent url('../img/logo.png') no-repeat;
	position:absolute; 
	bottom:23px; 
}
#header #title {
	font-size:24px;
	position:absolute;
	bottom:15px;
	right:0px;
}
 /* modified home header */
#homeHeader {
	height:166px;
	position:relative;
} 
#homeHeader #logo {
	width:380px; 
	height:29px;
	background:transparent url('../img/logo_big.png') no-repeat;
	position:absolute;
	bottom:35px;
	left:177px;
}
#homeHeader #logo_ie6 {
	width:380px; 
	height:29px;
	background:transparent url('../img/logo_big_ie6.png') no-repeat;
	position:absolute;
	bottom:35px;
	left:177px;
}
 /******** header navigation ********/
	
#navi {
	height:17px;
	width:38%;
	background:#01587B;
	color:#FFF;
	float:right;	
}	
#navi #main {
	position:absolute;
	top:1px;

}
#navi ul{
	right:10px;
	margin-top:-3px;
}
#navi #main li{
	font-weight:bold;
}
 /* seperators */
#navi ul li{ 
	display:inline;	
	border-left:1px solid #fff; 
	padding:0 10px 0 10px;
}
#navi ul li.first { 
	border-left:none; 
	padding-left:0;
}
 /* links + effects */
#navi ul li a {
	color:#fff;
	text-decoration:none;
}
#navi ul li a:hover {
	text-decoration:underline;
}
#navi ul li.current a {
	font-weight:bolder;
}
 
 /******** footer ********/
  
#footer {
	height:48px;
	position:relative;
	border-top:1px solid #FFF;
	clear:both;
}
 
#footer #rightNav {
	float:right;
	margin-top:15px;
	
}
 /* seperators */
#footer ul li{ 
	display:inline; 
	border-left:1px solid #fff; 
	padding:0 10px 0 10px;
}
#footer ul li.first { 
	border-left:none; 
	padding-left:0;
}
 /* links + effects */
#footer ul li a { 
	color:#fff; 
	text-decoration:none;
}
#footer ul li a:hover { 
	color:#fff; 
	text-decoration:underline;
}
#footer ul li.current a { 
	font-weight:bold;
}
#footer ul li span { 
	font-weight:bold;
}
  
 /************** foto slider ****************/

.fotoSlider {
	float:left;
	width:80% !important;
} 
.prev {
	float:left;
} 
.next {
	float:left;
}
.fotoSlider ul li.item {
	width:100px;
	height:150px;
	padding:0 10px;
}  
 
 /******** home content ********/

.teaserBox {
	width:219px;
	height:172px;
	float:left;
	margin:37px 0px 0px 15px;
	padding:14px 8px;
	background:#127CA5;
	cursor:pointer;
}
.teaserBox:first-child {
	margin:37px 0px 0px 0px;
}
.teaserBox:hover {
	/*background:#1C7090;*/
	background:#01587B;
}
.teaserBox h2 {
	font-size:24px;
	padding-bottom:15px;
}
.teaserBox h2 span {
	font-weight:bold;
}
.teaserBox p {
	font-size:12px;
}
.teaserBox a {
	text-decoration:none;
	color:#FFF;
}

 /******** content ********/

#content {
	margin-top:15px;
	margin-bottom:15px;
	position:relative;
}
 /* filmroll */
#filmroll {
	width:759px;
	height:232px;
	background:transparent url('../img/filmroll.png') repeat-x;
	position:relative;
	left:-12px;
	z-index:5;
}
#filmroll.back{
	position:absolute;
	top:12px;
	z-index:-1 !important;
}
 /* video plyer */
#filmroll #videoplayer {
	background:#FFFFFF;
	position:relative;
	top:-12px;
}
#filmroll #videoplayer.big {
	border:7px solid #FFF;
	width:483px;
	height:251px;
}
#filmroll #videoplayer.small {
	border:7px solid #FFF;
	width:368px;
	height:245px;
}
#filmroll #videoplayer.classic {
	left:30px;
	float:left;
}
#filmroll #videoplayer.switched {
	right:12px;
	float:right;
}
#filmroll #videoplayer #player p {
	padding:18px;
	font-size:13px;
}

 /* playlist */
#filmroll ul#playlist{
	width:335px;
	height:181px;
	position:relative;
	top:26px;
}
.scroll-pane {
	width:335px;
	height:181px;
	overflow: auto;
}
#filmroll ul#playlist.classic {
	left:30px;
	float:left;
}
#filmroll ul#playlist.switched {
	right:30px;
	float:right;
}
#filmroll ul#playlist a {
	color:#fff;
}

#filmroll #playlist li.pl_entry {
	width:315px;
	height:55px;
	float:left;
	margin-left:5px;
	border-bottom:1px solid #80ACBD;
}

#filmroll ul#playlist li.pl_entry a img {
	width:64px;
	height:40px;
	padding:7px 15px 8px 20px;
	float:left;
}
#filmroll ul#playlist li.pl_entry a h3 {
	font-weight:bold;
	font-size:14px;
	padding-top:7px;
}
#filmroll ul#playlist li.pl_entry a span {
	font-weight:normal;
	font-size:11px;
}
#filmroll ul#playlist li.pl_entry.active{
	background:#0092C9 url('../img/pl_entry_bg.png') no-repeat;
	border-bottom:1px solid #01587B !important;	
}
#filmroll ul#playlist li.pl_entry.prev{
	border-bottom:1px solid #01587B !important;	
}

 /* filmroll menu */
#filmroll ul#menu{
	width:250px;
	height:181px;
	position:relative;
	top:26px;	
	padding:8px 0px;
}
#filmroll ul#menu.classic {
	left:30px;
	float:left;
}
#filmroll ul#menu.switched {
	right:30px;
	float:right;
}
#filmroll ul#menu li a {
	color:#fff;
}
#filmroll ul#menu  li.menu_entry {
	width:250px;
	height:55px;
	cursor:pointer;
	/*border-bottom:1px solid #80ACBD;*/	
}
#filmroll ul#menu li.menu_entry.active {
	background:#0092C9 url('../img/btn_main.png') no-repeat left;
	
}
#filmroll ul#menu li.menu_entry:hover {
	background:#0092C9 url('../img/btn_main.png') no-repeat left;
	/*border-bottom:1px solid #01587B !important;*/		
}
#filmroll ul#menu li.menu_entry h3 {
	font-weight:bold;
	font-size:15px;
	padding-top:18px;
	padding-left:20px;
}
#filmroll ul#menu li.menu_entry h3 a {
	text-decoration:none;
}

 /* sub navi tabs */
#content ul#tabs {
	float:left;
	width:225px;
	margin-left:8px;

}
#content ul#tabs li{
	color:#fff;
	cursor:pointer;
	border-bottom:2px solid #FFF;
	padding:10px;
}
#content ul#tabs li.last{
	color:#fff;
	cursor:pointer;
	border-bottom:none !important;
}
#content ul#tabs li a{
	color:#fff;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
}
#content ul#tabs li a:hover{
	color:#01587B;
}

 /* gradient content section */
div.gradient {
	width:100%;
	background:#A3E5F3 url('../img/gradient.jpg') repeat-x bottom left;
	color:black;
	position:relative;
	margin-top:-50px;
	padding-top:75px;
} 
.contentBox {
	width:208px;
	height:160px;
	float:left;
	padding:5px 18px;
	color:#01587B;
	border-left:1px solid #FFF;
}
.contentBox:first-child {
	width:209px;
	border:none;
}
.contentBox h2 {
	font-size:21px;
	padding-bottom:15px;
	color:#01587B;
}
.contentBox h2 span {
	font-weight:bold;
	font-size:18px;
}
.contentBox p {
	font-size:12px;
}
.contentBox h2 a {
	color:#01587B;
	text-decoration:none;
}
 /* solid white content section */
div.solid {
	width:483px;
	background:#FFF;
	color:#1E6E8D;
	position:relative;
	float:right;
	right:7px;
	margin-top:-12px;
	padding-top:17px;
} 
 /* headings + paragraphs */
div.solid h2 {
	font-weight:normal;
	font-size:24px;
	padding:15px;
	text-transform:uppercase;
}
div.solid h3 {
	font-weight:bold;
	font-size:12px;
	padding:0px 15px;
}
div.solid p {
	font-weight:normal;
	font-size:12px;
	padding:0px 15px 20px 15px;
	
}
div.solid p a {
	color:#8BB141;
}

 /* framed content for login/registration */
.contFrame {
	background:#DBEBF3;
	border:7px solid #FFF;
}
.contFrame h1 {
	color:#01587B;
	font-size:28px;
	padding:20px 20px 0px 20px;
	margin-bottom:74px;
}
.contFrame #packages li {
	list-style:none outside none;
	height:84px;
	margin:0px 20px 50px 20px;
}
.contFrame #packages li span{
	width:115px;
	height:84px;
	float:left;
	clear:both;
	background:url(../img/btn_package.png) no-repeat;
	font-size:17px;
	text-align:center;
	line-height:5em;
}
.contFrame #packages li span a {
	text-decoration:none;
	line-height:5em;
	color:#FFF;
	font-size:17px;
	text-align:center;
}
.contFrame #packages li h2 {
	width:115px;
	float:left;
	color:#01587B;
	font-size:28px;
	padding-left:37px;
}
.contFrame #packages li p {
	float:left;
	color:#01587B;
	font-weight:bold;
	padding-left:37px;
}
.contFrame p.footnote{
	float:right;
	clear:both;
	color:#01587B;
	font-size:18px;
	font-weight:bold;
	padding-right:20px;
}




 /* gallery */
#gallery {
	width:100%;
	height:100%;
	border-top:1px solid #FFF;
	margin-top:15px;
}
#gallery h3 {
	font-size:16px;
	padding:7px 20px;
	color:#FFF;	
}
#gallery .scrollable {
    position:relative; 
    overflow:hidden; 
    width:685px; 
    height:150px; 
	background:#01587B;
	float:left;
}
#gallery .scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}
#gallery .scrollable .items div{
	float:left;
}
/* single scrollable item */
#gallery .scrollable .items .item {
	float:left;
	margin:0 10px;
	width:117px;
	height:130px;
	list-style:none outside none;
	padding:10px 0px;
	text-align:center;
}
#gallery .scrollable .items .item img{
	height:100px;
	max-width:117px; 
}
#gallery .scrollable .items .item span{
	width:117px;
}
/* prev, next buttons */
#gallery a.browse {
	display:block;
	width:25px;
	height:150px;
	float:left;
	cursor:pointer;
	font-size:1px;
}
/* right button*/
#gallery a.right 	{
	background:#01587B url(../img/arrow_large_right.gif) no-repeat center center;
}
/* left button */
#gallery a.left {
	background:#01587B url(../img/arrow_large_left.gif) no-repeat center center;
} 
/* disabled button */
#gallery a.disabled {
	background:#01587B	!important;
	cursor:default !important;
}
/* load indicator button*/ 
#gallery a.load {
	cursor:progress !important;
} 




 /* packages scroll */
#scroll {
	position:relative;
	height:600px;
	overflow:hidden;
}

#packages {
	width:9999em;
	position:absolute;
	height:600px;
}

#intro img {
	float:left;
	width:213px;
	height:377px;
	margin-right:14px;
	margin-top:22px;
}
#intro img.last{
	margin-right:0px !important;
}
.package {
	float:left;
	width:667px;
	height:420px;
	padding:20px 27px;
	position:relative;
}

.package h2{
	color:#01587B;
	font-size:26px;
	display:inline;
	margin-right:5px;
}
.package span {
	color:#01587B;
	font-size:10px;	
}
.package #features {
	margin-top:25px;
	width:100%;
	height:60%
}

.package #features img{
	width:135px;
	height:100px;
	float:left;
	margin-right:40px;
	margin-bottom:25px;
	cursor:pointer;
}
.package #features img.last{
	margin-right:0px;
}
.package .pagination {
	position:absolute;
	bottom:20px;
	width:667px;
}
.package .pagination h1 {
	color:#a6c958;
	font-size:36px;
	display:inline;
	padding:0px;
	margin:0px;
}
.package .pagination p {
	position:relative;
	bottom:0px;
	font-size:12px;
	color:#000;
	width:280px;
	margin-top:10px;
}
.package .pagination p span {
	font-weight:bold;
	color:#000;	
	font-size:12px;
}
.package .pagination a.button {
	width:198px;
	height:50px;
	position:absolute;
	bottom:0px;
	right:0px;
}
.package .pagination a.button img {
	width:198px;
	height:50px;
}
/*
.details {
	background-color:#fff;
	color:#666;
	float:left;
	font-size:20px;
	margin:270px 0 0 0;
	padding:10px 60px;
	width:525px;
}

.demos {
	background-color:#fff;
	background-color:rgba(255, 255, 255, 0.8);
	border-left:1px solid #ddd;
	float:right;
	min-height:365px;
	padding:0 25px;
	width:272px;
}

.demos h2 {
	color:#065598;
	font-size:22px;
	display:block;
	padding:10px 0;
}

.demos a {
	color:#666;
	font-size:12px;
	text-decoration:none;
}

.demos p {
	margin:0 0 4px;
	background:transparent url(http://static.flowplayer.org/tools/img/bullet.png) no-repeat scroll 0 2px;
	padding:2px 0 1px 22px;
}
*/
#thumbs {
	background:url(../img/package_navi.png) no-repeat;
	height:121px;
	position:absolute;
	top:474px;
	width:721px;
	left:7px;
}

.t a {
	background:transparent url(../img/package_navi.png) no-repeat scroll -9px -121px;
	/*background:transparent url(../img/package_navi.png) no-repeat scroll -21px -90px;
	*/
	margin-left:9px;
	display:block;
	width:125px;
	float:left;
	height:95px;
	padding:13px 0px;
	cursor:pointer;
}

.t a.active {
	cursor:default !important;
}

.navi {
	margin-left:287px;
}

/* sprite for the package scroll navigation */
#t0 		  	{ margin-left:27px; background-position:-27px -122px; }
#t0.active { background-position:-27px 0 !important; }
#t0:hover  { background-position:-27px -243px; }
#t0:active { background-position:-27px -364px; }

#t1			{ background-position:-296px -122px; }
#t1:hover 	{ background-position:-296px -243px; }
#t1:active	{ background-position:-296px -364px; }
#t1.active	{ background-position:-296px 0 !important; }

#t2			{ background-position:-430px -122px; }
#t2:hover 	{ background-position:-430px -243px; }
#t2:active	{ background-position:-430px -364px; }
#t2.active	{ background-position:-430px 0 !important; }

#t3			{ background-position:-564px -122px; }
#t3:hover 	{ background-position:-564px -243px; }
#t3:active	{ background-position:-564px -364px; }
#t3.active	{ background-position:-564px 0 !important; }





/* overlays */

/* the overlayed element */ 
.simple_overlay { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#000000;
	padding:15px;
     
    width:400px;     
    min-height:200px; 
    border:1px solid #FFF; 
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
    background-image:url(../img/btn_close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:28px; 
    width:28px; 
}


 /* registration wizard */
.hide{
	display:none;
}
 
#regForm  {
	color:#01587B;
	font-size:14px;
	padding:10px;
	position:relative;
}
#regForm h2 {
	font-size:24px;
	display:inline;
	float:left;
}
#regForm h2.step_indicator {
	float:right;
}
#regForm span {
	font-size:14px;
	display:inline;	
}
#regForm span strong {
	font-weight:bold;
}
#regForm p {
	margin-top:20px;
}
#regForm a {
	color:#8BB141;
}
#regForm fieldset {
	margin-top:20px;
}
#regForm fieldset.gap {
	margin-top:20px !important;
}
#regForm fieldset p {
	margin:2px 0px;
	clear:both;
}
#regForm fieldset p.note {
	font-size:10px;
}
#regForm fieldset input {
	float:left;
	width:165px;
	margin-bottom:5px;
}
#regForm fieldset select {
	float:left;
	width:166px;
	margin-bottom:5px;	
}
#regForm fieldset input.radio {
	vertical-align:middle;
	width:20px !important;
	margin:0px;
	float:left;
}
#regForm fieldset label {
	width:100px;
	float:left;
	margin-bottom:5px;	
}
#regForm fieldset label[for=gender_male] {
	width:83px;	
}
#regForm fieldset label[for=gender_female] {
	width:83px;
}
#regForm fieldset label.radio {
	width:600px;
}
#regForm fieldset label.error { 
	display:none; 
	width:300px;
	float:left;
	color:#f00;
	font-size:10px;
	margin-left:20px;
	line-height:1em;
}
#regForm label.error { 
	display:none; 
	width:300px;
	float:left;
	color:#f00;
	font-size:10px;
	margin-left:20px;
	line-height:1em;
}
#regForm fieldset input.error { 
	border:1px solid #C00;
}
#regForm fieldset select.error { 
	border:1px solid #C00;
}
#regForm div.pagination {
	float:left;
}
#regForm img.button, input.button {
	width:198px;
	height:50px;
	margin-top:20px;
}
#regForm .back {
	float:left;
}
#regForm .submit {
	float:right;
}

#summary {
	margin-top:30px;
}
#summary strong {
	font-weight:bold;
}









 /******** scrollbar ********/
.jScrollPaneContainer {
	position:relative;
	overflow:hidden;
	z-index:1;
}

.jScrollPaneTrack {
	position:absolute;
	cursor:pointer;
	right:0;
	top:0;
	height:100%;
	background:#1C7090;
	border-right:1px solid #000;
	border-left:1px solid #000;
	width:8px !important;
}
.jScrollPaneDrag {
	position:absolute;
	/*background:#0092C9;*/
	background:#FFF;
	cursor:pointer;
	overflow:hidden;
	height:56px !important;
	width:8px !important;
}
.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;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
/* Stylesheet for my demo pages for jScrollPane - these styles aren't necessary for using jScrollPane and aren't specific to any particular example */

a.jScrollArrowUp {
	background: url(../img/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../img/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}
