@font-face {
	font-family: 'SegoeScript';
	src: url(fonts/SEGOESCB.TTF);
	
	font-weight: normal;
	font-style: normal; 
}
body {
	color: #808080;
	font-family: arial, helvetica, sans-serif;
}		
				
#bn_tutorial {
	/*width: 640px;*/
	/*width: 100%;*/
	margin: 2px;
	padding: 0 10px;	
	
	font-family: arial;
	font-size: 14px;
	overflow: hidden;
	padding: 6px 0 16px 16px;
}
.dots {
	float:left;
	font-size: 20px;
	color: #A56383;	
	margin-top: 5px;
}
#bn_tutorial h1 
{
	font-family: SegoeScript;
	color: #A56383;
	font-size: 21px;
	text-align: center;
	margin: 2px 8px 2px 2px;
}
#bn_tutorial h2 
{
	font-family: SegoeScript;
	color: #A56383;
	font-size: 19px;
	margin: 2px 5px;
	clear: both;
}
#bn_tutorial h3 
{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	margin: 2px;
	clear: both;
}
#bn_tutorial p {			
	margin: 5px;
	line-height: 20px;
}
#bn_tutorial #tabs-content ul li {
	line-height: 20px;
}

#bn_tutorial #tabs-content ul.flower {
margin: 0px;
}

#bn_tutorial #tabs-content ul.flower  li  {
	list-style-image: url('/images/flower_m.png');
}

#bn_tutorial #tabs-content ol  li  {
	margin: 3px 0;
	line-height: 20px;
}

#bn_tutorial .framed {
width: 85%;
}

#bn_tutorial .framed ul li {
	list-style-image: url('/images/check_ok.png');
}

#bn_tutorial .framed.exl ul li {
	list-style-image: url('/images/check_exl.png');
}

#bn_tutorial .highlighted {
	background-color: #C2ADAD;
	color: white;
	padding: 1px 2px;
	border-radius: 2px;
}

#bn_tutorial .highlighted2 {
	background-color: #696969;
	color: white;
	padding: 1px 2px;
	border-radius: 2px;
}

#bn_tutorial .redframed {
	/*border: 1px rgb(219, 169, 169) solid;*/
	padding: 5px;
}

#bn_tutorial .framed {
	margin: 12px auto;
	padding: 8px;
	background-color: #F1EBE5;
	color: rgb(83, 85, 87);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid #DDCFC0;		
}		

#bn_tutorial .infographic {
	margin: 12px auto;
}

#bn_tutorial .infographic.right {
	float: right;
}

#bn_tutorial .downloads p {
	margin-bottom: 15px !important;
}

#bn_tutorial .download_link, .recomm_link {
	color: #A56383;
	text-decoration: none;
}
#bn_tutorial .download_link {
	margin-left: 52px;
}

#tabs-content {
/*background-image: url("https://25.media.tumblr.com/d2053f8dd8eccd6b039fb671fd9f530f/tumblr_mf5sxbBLSH1rirnzso1_400.jpg");*/
}	
		
.ui-tabs 							{ zoom: 1; }
.ui-state-active {background-color: #ffffff;}
.ui-tabs .ui-tabs-nav 				{ 
	list-style: none; 
	position: relative; 
	padding: 2px 2px 0 	0; 
	overflow: hidden; 
	top: -15px; 
	z-index: 1000; 
	/*height: 25px; */
}

.ui-tabs .ui-tabs-nav li 			{ 
	position: relative; 
	/*float: left; */
	border: 1px solid #ccc; 
	border-bottom-width: 0 !important; 
	margin: 0 2px -1px 0; 
	border: 1px solid #ccc;
    padding: 0px 6px;
    text-decoration: none;
    background-color: #F3EEE9;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}
.ui-tabs .ui-tabs-nav li:hover { 
	background-color: #E0D9D1;;	
}
	
.ui-state-active a {color: white !important;}
.ui-tabs .ui-tabs-nav li.ui-state-active  {background-color: #A56383 !important;}

.ui-tabs .ui-tabs-nav li a 			{ 
	float: left; 
	text-decoration: none; 
	padding: 5px 10px; 
	color: rgb(155, 143, 143);
	font-weight: bold;
	outline: none; 
}

.ui-tabs .ui-tabs-nav 
li.ui-tabs-selected 				{ padding-bottom: 1px; border-bottom-width: 0; background: white; }

.ui-tabs .ui-tabs-panel 			{ display: block; border-width: 0; background: none;
									  border: 1px solid #ccc; position: relative; min-height: 200px; height: auto !important; height: 200px; padding: 10px;/* border-radius: 8px;*/}
#bn_tutorial  #tabs-content {border-radius: 8px;}
.ui-tabs .ui-tabs-hide 				{ display: none !important; }


/* ============== Vertical ============== */ 

#bn_tutorial .ui-tabs.ui-tabs-vertical {
    padding: 0;
   /* width: 42em;*/
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: right;
	width: 40px;
	width: 6%;
   /* width: 10em;
    background: #CCC;*/
    border-radius: 0 4px 4px 0;
    /*border-left: 1px solid gray;*/
}

#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav li, .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active  {
	min-height: 40px;
	/*margin: 4px 0;*/
	border: 1px solid #6392AD;
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    padding: 5px 5px 5px 0;
	width: 20px;
	
    margin-left: -1px;
    border: 1px solid #DDCFC0;                          
	box-shadow: 0px -3px 7px rgba(156, 149, 149, 0.48);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
   /* right: -2px;*/
    z-index: 2;
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;    
	font-size: 12px;
	font-family: SegoeScript;
	font-weight: normal;
	text-align: center;
	width: 10px;
	padding: 8px;
	word-wrap: break-word;
	text-transform: uppercase;
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}

#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
	/**background: url(../images/note_str.png);*/
	box-shadow: -6px 10px 14px #A79D96;
    float: left;
    width: 576px;
    width: 89%;
	min-height: 600px;
    /*border-left: 1px solid gray;*/
   /* border-radius: 0 6px 6px 0;*/
    position: relative;
    /*left: -1px;*/
}

@media (max-width: 700px){
	#bn_tutorial .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
	    width: 85%;
	}
}

#bn_tutorial .tab-inner {
	border: 2px solid #E2DCDC; 
	border-radius: 8px;
	padding: 6px 10px; 
	min-height: 580px;
}


#bn_tutorial a.mover 							{ background: #900; padding: 6px 12px; position: absolute;
								      color: white; font-weight: bold; text-decoration: none; }
#bn_tutorial .next-tab { 
	position: absolute;
	bottom: 20px;
	right: 24px;
}

#bn_tutorial .prev-tab { 
	position: absolute;
	bottom: 20px;
	left: 24px;
}
#bn_tutorial .next-tab a, .prev-tab a {
	color: #A56383; 
	font-family: Georgia, serif;
	font-size: 32px;
	text-decoration: none;
}

#bn_tutorial #tabs-content div {
	margin-bottom: 8px;
}

/* ============== simple view ============== */ 

#bn_tutorial.simple .next-tab, #bn_tutorial.simple .prev-tab, #bn_tutorial.simple #tutorial_tabs #menu , #bn_tutorial.print .next-tab, #bn_tutorial.print .prev-tab, #bn_tutorial.print #tutorial_tabs #menu , #bn_tutorial.simple .hidethis, #bn_tutorial.print .hidethis {
	display:none;
}

#bn_tutorial.simple #tabs-content .tab {
float: left;
width: 525px;
;
height: 735px;
margin-right: 30px;
}

#bn_tutorial.simple .dots {
width: 200px;
overflow: hidden;
}

#bn_tutorial.simple .tab-inner {
height: 705px;
}

#bn_tutorial.simple {
/*width: 1110px;*/ /* !!! pdf-hez */
/*font-size: 0.9em;*/
}

#bn_tutorial.simple .framed {
padding: 2px;
margin: 10px auto;
}
#bn_tutorial.simple .framed ul  {
margin: 0px;
}

#bn_tutorial.print .framed {
	width: 95%;
}

#bn_tutorial.print .infographic {
text-align: center;
}

/*#bn_tutorial.simple #tabs-1 , #bn_tutorial.simple #tabs-2, #bn_tutorial.simple #tabs-3, #bn_tutorial.simple #tabs-4, #bn_tutorial.simple #tabs-5, #bn_tutorial.simple #tabs-6 {
height: 980px;
}*/

#bn_tutorial.print @page { size: landscape; margin: 2.0cm;   }
#bn_tutorial.print @media print{@page {size: landscape}}

#bn_tutorial.print {
	width: 100%;
}

#bn_tutorial.print #tabs-1 , #bn_tutorial.print #tabs-2, #bn_tutorial.print #tabs-3, #bn_tutorial.print #tabs-4, #bn_tutorial.print #tabs-5, #bn_tutorial.print #tabs-6 {
width: 48%;
margin-right: 12px;
height: 700px;
float: left;
}


#bn_tutorial .webicon {
	background: url('/images/icons.png');
	width: 20px;
	height: 26px;	
}


#bn_tutorial .webicon.else {
	background-position: 0px -28px;		
}

#bn_tutorial .ui-tabs-active .webicon {
background-position: -22px 0;
}

#bn_tutorial .ui-tabs-active .webicon.else {
background-position: -22px -28px;
}

.bn_tutorial_facebook {
	margin: 10px;
}

/*
.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

 -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}*/