/*********** TEMPLATE STYLES, WHICH ARE USED TO VARY THE OUTLOOK **********************/
body, .login_button_link, .route_and_place_select_points, .voucher_Gmap, .voucher_pic_map, .map_marker_info, #mapSheetMarkerInfo,.transition_wrapper,#frontPageButtonPopup,.back_to_slide_show_button{ 
background-color:#ffffff;
}
body{
color:#000000;
width:100%;
}
#fullContentWrapper{
width:100%;
}
#modelLoadProgressIndicator{
position: absolute;
z-index: 50000;
top: 35%;
left: 50%;
width: 200px;
margin-left: -100px;
padding-top: 50px;
padding-bottom: 82px;
text-align: center;
font-size: 32px;
line-height:40px;
font-weight: bold;
background-color:#ffffff;
color:#000000;
}
input[type="text"], input[type="password"], textarea {
background-color: #141414;
color: #ffffff; 
border-color: #bbbbbb;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus{
color: #000000; 	  
background-color: #d6eec4;
}

.login_header, 
.header_register, 
.header_route_select, 
.header_place_select, 
.header_place, 
.header_hint, 
.header_summary, 
.header_thanks, 
.header_nonsupported, 
.header_help, 
.header_map, 
.header_map_indoor, 
.header_popup, 
.header_transition,
.header_top,
.header_extra_info
{
background-color:#1c1c1c;
}

.login_footer,
.login_error_message_footer,
.register_footer,
.footer_register_error,
.footer_route,
.footer_video_place,
.footer_video_place_text,
.footer_video_load_progress,
.footer_advertisement,
.footer_hint, 
.footer_summary, 
.footer_thanks, 
.footer_nonsupported,
.footer_help,
.footer_map,
.footer_map_indoor,
.footer_popup,
.footer_transition{
background-color:#ffffff;
}




.line, 
.line_2,
.line_list,
.line_2_list,
.grid_line,
.line_header_bottom{
background-color: #b8bcc1;
opacity: 0.4;
}


.content_route_select,
.content_help,
.register_content, 
.content_nonsupported,
.content_popup,
.content_summary,
.content_transition{
background-image: none;
}

.login_content{
background-image: url(/data/template_symbols/v1/symbols/helsinki_half_3.jpg);
}

.login_applicationlogo{
background-image:url(/data/template_symbols/v1/symbols/sherpalogo.png);
}
.content_hint,
.content_map,
.content_place{
background-image: none;
}
.login_label_div,
.login_label_register,
.label_sendmessage,
.login_button_link{
color: #6bb536;
}
.login_button_link:hover, .login_button_link:focus{color: #1c1c1c;}
.adtxt{
color: #cccccc;
}
input.kokeile_kirjautumatta, .login_button, .button_register{
background-color:#6bb536;
color:#000000;
background: #6bb536; /* Old browsers */
background: -moz-linear-gradient(top,  #6bb536 0%, #a1d54f 50%, #6bb536 51%, #6bb536 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6bb536), color-stop(50%,#a1d54f), color-stop(51%,#6bb536), color-stop(100%,#6bb536)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6bb536 0%,#a1d54f 50%,#6bb536 51%,#6bb536 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6bb536 0%,#a1d54f 50%,#6bb536 51%,#6bb536 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6bb536 0%,#a1d54f 50%,#6bb536 51%,#6bb536 100%); /* IE10+ */
background: linear-gradient(top,  #6bb536 0%,#a1d54f 50%,#6bb536 51%,#6bb536 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bb536', endColorstr='#6bb536',GradientType=0 ); /* IE6-9 */
}

input.kokeile_kirjautumatta:hover,input.kokeile_kirjautumatta:focus, input.login_button:hover, input.login_button:focus, input.button_register:hover, input.button_register:focus{
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}

.map_sheet_progress_indicator{
background-color:#6bb536;
}
	


.button_select_place_feedback, 
.button_small, 
.button_listen_again, 
.button_hint, 
.hintBackToMapButtonInput, 
.giveHintAnswerButton, 
.giveHintAnswerStandaloneButton, 
.button_summary, 
.button_exit_thanks, 
.button_nonsupported_textmode, 
.button_help_logout, 
.button_yesno_popup, 
.button_voucher,
.grid_go_button,
.grid_location_button,
.button_expert_channel{
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f6f8f9, #e5ebee 50%, #b8bcc1 51%, #b8bcc1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#b8bcc1), color-stop(100%,#b8bcc1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#b8bcc1 51%,#b8bcc1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#b8bcc1 51%,#b8bcc1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#b8bcc1 51%,#b8bcc1 100%); /* IE10+ */
background: linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#b8bcc1 51%,#b8bcc1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#b8bcc1',GradientType=0 ); /* IE6-9 */
color: #000000;
}

input.button_select_place_feedback:hover, input.button_select_place_feedback:focus,
input.button_small:hover, input.button_small:focus,
input.button_listen_again:hover, input.button_listen_again:focus,
input.button_hint:hover, input.button_hint:focus, 
input.hintBackToMapButtonInput:hover, input.hintBackToMapButtonInput:focus, 
input.giveHintAnswerButton:hover, input.giveHintAnswerButton:focus, 
input.giveHintAnswerStandaloneButton:hover, input.giveHintAnswerStandaloneButton:focus,  
input.button_summary:hover, input.button_summary:focus,  
input.button_exit_thanks:hover, input.button_exit_thanks:focus, 
input.button_nonsupported_textmode:hover, input.button_nonsupported_textmode:focus, 
input.button_help_logout:hover, input.button_help_logout:focus, 
input.button_yesno_popup:hover, input.button_yesno_popup:focus, 
input.button_voucher:hover, input.button_voucher:focus,
.grid_go_button:hover, .grid_go_button:focus,
.grid_location_button:hover, .grid_location_button:focus,
.button_expert_channel:hover, .button_expert_channel:focus{
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #8aa87a 51%, #8aa87a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#e5ebee), color-stop(100%,#8aa87a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#e5ebee 51%,#8aa87a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#e5ebee 51%,#8aa87a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#e5ebee 51%,#8aa87a 100%); /* IE10+ */
background: linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#e5ebee 51%,#8aa87a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#8aa87a',GradientType=0 ); /* IE6-9 */
}

#numpadinputfield,
.numpadnumberbutton,
div.checkbox_float_place_question,
.voucherBody{
border-style:solid;
border-color: #f6f8f9;
}

.transition_wrapper{
color: #f6f8f9;
}

.progressbar,.transition_upload_wrapper{
background-color: #f6f6f6;
}

.inner_progressbar,.transition_upload_bar{
background-color: #99C45D;
}

div.checkbox_float_place_question_selected{
background-color: #6bb536;
}

.button_pause_half {
background-color: #99C45D;
}

.button_play_pause_container{
border-style: solid;
border-color: #99C45D;;
}

.button_play{
border-style: solid;
border-left-color: #99C45D; 
}

.duration_visible{
position:relative;
float:right;
z-index:1;
}

.button_forward_front_page,
.button_back_to_front_page {
border-style: solid;
border-left-color:  #6bb536; 
}


.switch_flags,
.switch_flags_route_select {
background-image: url(/data/template_symbols/v1/symbols/flag-switch.png);
}

.talennettu_2,.stored_marker{
background-image: url(/data/template_symbols/v1/symbols/tallennettu.png);
}
.talennettu_3,.visited_marker,.message_answered{
background-image:url(/data/template_symbols/v1/symbols/kayty_merkki.png);
}
.button_close_login_error,
.button_close_register,
.button_close_thanks,
.button_close_nonsupported,
.button_close_gmap,
.button_close_map_indoor,
.button_close_new_map_indoor,
.button_close_wiki,
.button_close_popup,
.transition_close_button,
.button_close_open_data{
background-image: url(/data/template_symbols/v1/symbols/button_close.png);
}
.button_arrange,
.button_arrange_standalone{
background-image: url(/data/template_symbols/v1/symbols/button_arrange.png);
}
.button_help_mozaik, .button_help{
background-image: url(/data/template_symbols/v1/symbols/button_help.png);
}
.button_logo_mozaik, .button_logo, .logo_help, .button_logo_place, .button_passive_logo_place{
background-image: url(/data/template_symbols/v1/symbols/logo_extra_small.png);
}
.button_home_place_select,
.button_home_poi,
.button_home_hint,
.button_home_summary,
.button_back_to_front_page_at_top_menu{
background-image: url(/data/template_symbols/v1/symbols/button_home.png);
}
.button_forward_standalone,
.button_sheet_selector_right,
.grid_go_button_header,
.next_clip_button{
background-image: url(/data/template_symbols/v1/symbols/button_forward.png);
}
.button_map_place,
.button_map_hint,
.grid_location_button_header{
background-image: url(/data/template_symbols/v1/symbols/button_map.png);
}
.button_up_standalone_place_select,
.button_up_standalone_poi,
.button_backwards_poi,
.button_up_standalone_hint,
.button_sheet_selector_left,
.button_close_single_place_map,
.button_close_help,
.previous_clip_button{
background-image: url(/data/template_symbols/v1/symbols/button_up.png);
}

.button_skip_track{
background-image: url(/data/template_symbols/v1/symbols/button_skip_track.png);
}
.button_ok_answer_comment,
.button_2_ok_answer_comment{
background-image: url(/data/template_symbols/v1/symbols/button_ok.png);
}
.button_minus_new,a.olControlZoomOut{ 
background-image: url(/data/template_symbols/v1/symbols/minus.png);
}
.button_plus_new,a.olControlZoomIn{
background-image: url(/data/template_symbols/v1/symbols/plus.png);
}

/************* BASIC FIXED STYLE DEFINITIONS AFFECTING THE WHOLE DOCUMENT *************/

@font-face {
font-family: pagefont;
src: url(/css/Oxygen-Regular.ttf);
}

p, body, input, div, form, textarea, button, h1, h2, h3{
font-size:16px;	
line-height:20px;
border:none;
font-family: pageFont, Helvetica, Arial, FreeSans, sans-serif;
}

body{ 
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width:320px;
}


div, form{
width:auto;
border:none;
}

textarea{
text-indent:10px;
height:30px;
width: 180px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px;
border-top-style:none;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
textarea:focus{
text-indent: 0px;
}

input{
text-indent:10px;
height:30px;
width: 180px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:  1px;
border-top-style:none;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
input:focus{
text-indent: 0px;
text-align:center;
}

input[type="text"], input[type="password"], textarea { font-size: 16px; }

.bottom_footer_bar {
background-color:#F5F5F5;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:32px;
z-index:1002;
min-width:320px;
-webkit-backface-visibility: hidden;
}

.bottom_feedback_container{
float: right;
margin-right: 5px;
position: relative;
width:105px;
height:50px;
}

.bottom_back_to_search_container{
position: relative;
width: 50px;
height: 80px;
background-image: url(/css/emuseo/KL_eMuseo_symbolit_alapalkki.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-color: transparent;
bottom: 28px;
margin-left: auto;
margin-right: auto;
left: 50%;
margin-left: -50px;
cursor:pointer;
}

.bottom_points_container{
float: left;
margin-left:5px;
margin-bottom: 2px;
position: relative;
width:28px;
height:28px;
background-image: url(/data/template_symbols/v1/symbols/vaaka.jpg);
background-size: auto 28px;
background-repeat: no-repeat;
background-color: transparent;
cursor:pointer;
padding:0;
border:none;
}

.bottom_feedback_button {
position: absolute;
height: 45px;
width: 45px;
background-size: 42px auto;
background-image: url(/data/template_symbols/v1/symbols/feedback.png);
background-repeat: no-repeat;
top: -28px;
right: 0px;
cursor: pointer;
background-color: transparent;
border:none;
padding:0;
}

.bottom_expert_channel_button {
position: absolute;
height: 45px;
width: 45px;
background-size: 42px auto;
background-image: url(/data/template_symbols/v1/symbols/button_expert.png);
background-repeat: no-repeat;
top: -28px;
right: 0px;
cursor: pointer;
background-color: transparent;
border:none;
padding:0;
}

.bottom_create_places_button {
position: absolute;
height: 45px;
width: 45px;
background-size: 42px auto;
background-image: url(/data/template_symbols/v1/symbols/add-place.png);
background-repeat: no-repeat;
top: -28px;
right: 0px;
cursor: pointer;
}

.bottom_add_comment_button {
position: absolute;
height: 45px;
width: 45px;
background-size: 42px auto;
background-image: url(/data/template_symbols/v1/symbols/comment.png);
background-repeat: no-repeat;
top: -28px;
right: 0px;
cursor: pointer;
}

.bottom_picker_map_button{
position: absolute;
height: 45px;
width: 45px;
background-size: 42px auto;
background-image: url(/data/template_symbols/v1/symbols/start_marker.png);
background-repeat: no-repeat;
top: -28px;
right: 0px;
cursor: pointer;
}

.bottom_feedback_text {
position: absolute;
color: black;
right: 2px;
top: 5px;
}

.list_filler_item{
position:relative;
float:left;
height:40px;
width:100%;
}

.bottom_filler_50px,.bottom_filler_50{
height:50px;
}

.clear_both{
clear:both;
}

.centralizer{
margin-left:auto;
margin-right:auto;
width: 95%;
max-width: 500px;
margin-top:4px;
padding-top: 2px;
/* max-width: 300px; */

}

.centralizer_90{
margin-left:auto;
margin-right:auto;
width: 90%;
max-width: 450px;
/*max-width: 280px; */
}


.centralizer_85{
margin-left:auto;
margin-right:auto;
width: 85%;
max-width: 425px;
/*max-width: 280px; */
}

.poi_width_measurement_element {
width: 95%;
max-width: 500px;
/* max-width: 300px; */
}

.hidden_element{
display:none;
}

input.kokeile_kirjautumatta, 
.button_select_place_feedback, 
.button_small,
.button_listen_again, 
.button_hint, 
.hintBackToMapButtonInput,
.giveHintAnswerButton, 
.giveHintAnswerStandaloneButton,
.button_summary, 
.button_exit_thanks, 
.button_nonsupported_textmode,
.button_help_logout, 
.button_yesno_popup, 
.button_voucher,
.grid_go_button, 
.grid_location_button,
.button_help_logout,
.button_expert_channel{
border-radius: 6px;
}


/** BACKGROUND SYMBOL AND LOGO SIZES**/

.button_help,
.button_arrange,
.button_arrange_standalone,
.button_home_place_select,
.button_up_standalone_place_select,
.button_help_mozaik,
.button_forward_standalone,
.button_home_poi,
.button_up_standalone_poi,
.button_backwards_poi,
.button_map_place,
.button_map_hint,
.button_home_hint,
.button_up_standalone_hint,
.button_home_summary,
.button_close_help,
.button_close_register,
.button_close_thanks,
.button_close_gmap,
.button_close_login_error,
.button_close_nonsupported,
.button_close_map_indoor,
.button_close_new_map_indoor,
.button_close_wiki,
.button_close_popup,
.transition_close_button,
.button_close_single_place_map,
.button_sheet_selector_left,
.button_sheet_selector_right,
.button_close_open_data{
background-size: 36px 36px;
}

.button_minus_new,
a.olControlZoomOut,
.button_plus_new,
a.olControlZoomIn{ 
background-size: 45px 45px;
}

.talennettu_2,
.stored_marker{
background-size: 25px 25px;
}
.talennettu_3,
.visited_marker{
background-size: 20px 20px;
}


#routeSelectHelpButtonDiv,
#arrangeRoutesDiv,
#mozaikPlaceSelectHomeButtonDiv,
#mozaikPlaceSelectHelpButtonDiv,
#mozaikPlaceSelectToUpperLevelDiv,
#arrangePlacesDiv,
#mozaikPlaceSelectHelpButtonDiv,
#summaryPageHomeButton,
#hintPageHomeButtonDiv,
#hintToUpperLevelDiv,
#mapButtonPlaceDiv,
#toUpperLevelDiv,
#pauseAndStopButtonContainerDiv,
#skipPlaceDivStandaloneRoute,
#skipPlaceDiv,
#thanksExitButtonDiv,
#buttonCloseGmap{
width: 36px;
height: 36px;
}

.button_logo,
.button_logo_mozaik,
.button_logo_place,
.button_passive_logo_place,
.logo_help{
background-size: auto 40px;
}


#routeSelectLogoDiv,
#mozaikPlaceSelectLogoDiv,
#placePagePassiveLogoDiv,
#placePageLogoDiv
{
width: 130px;
height:40px;
z-index:1;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
outline:none;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.header_top {
position:fixed;
top:0px;
left:0px;
width: 100%;
height: 70px;
z-index:100;
min-width:320px;
background-position:bottom;
}

.header_top_menu_items{
position:relative;
margin-left:3px;
}

#headerSlide{
opacity:1;
}

#slideShowShader{
opacity:0;
top:80px;
}

#slideShowLine{
margin-top:0px;
}

#slideShowInactivityGuardShader{
opacity:0.85;
z-index: 10001;
}

#slideShowInactivityGuardShaderText{
margin-top:80px;
}

.slide_show_header_hight{
height:80px;
}

#slideShowLogo{
width: 220px;
float:left;
}

#multipleLanguagesSlideshowPopup{
width: 230px;
padding-top: 20px;
}

#slideShowLangFlag{
margin-right:5px;
float:right;
width:110px;
height:50px;
margin-top:10px;
text-align:right;
overflow:hidden;
}

#slideShowContentWrapper{
color:#000000;
position:relative;
clear:both;
}

#slideShowClickMeText{
height:20px;
margin-top:-20px;
float:right;
margin-right:10px;"
}

.slide_show_header{
position:relative;
font-size: 32px;
text-align:center;
font-weight: bold;
line-height: 34px;
top: 90px;
}

.slide_show_header_route{
position:relative;
font-size: 32px;
text-align:center;
font-weight: bold;
line-height:34px;
margin-bottom:10px;
}

.slide_show_header_text{
position:relative;
font-size: 24px;
text-align:center;
margin-top: 20px;
line-height: 28px;
}

.slide_show_header_img{
width: 100%;
}

.slide_image_width{
max-width: 650px;
}

.back_to_slide_show_button{
position:fixed;
top: 180px;
width: auto;
height: 25px;
font-size: 16px;
font-weight: bold;
z-index: 10000;
padding-left:5px;
padding-right: 10px;
padding-top:5px;
opacity:0.75;
cursor:pointer;
}

/** SOME COMMON CLASSES USED IN MANY PLACES IN THE APPLICATION **/

.line, .line_list{
margin-top:10px;
left:-5%;
border:none;
z-index:1;
position:relative;
width:105%;
height:1px;
margin-bottom:9px;
}

.line_header_bottom{
width: 100%;
height: 1px;
}

.line_popup_adjust{
position:fixed;
top:70px;
z-index:100;
}


.line_2,.line_2_list{
margin-top:0px;
top:-10px;
left:-5%;
border:none;
z-index:1;
position:relative;
width:105%;
height:1px;
}

.line_list,.line_2_list{
margin-top:0px;
top:0px;
float:left;
}


.progress_bubble1 {
width: 100px;
height: 100px;
}

.progress_bubble2 {
width: 100px;
height: 100px;
}

.progress_bubble3 {
width: 100px;
height: 100px;
}

.progress_bubble4 {
width: 100px;
height: 100px;
}

.progress_bubble5 {
width: 100px;
height: 100px;
}

.progress_bubble6 {
width: 100px;
height: 100px;
}

.progress_bubble7 {
width: 100px;
height: 100px;
}

.progress_bubble8 {
width: 100px;
height: 100px;
}

.progress_bubble9 {
width: 100px;
height: 100px;
}

.progress_bubble10 {
width: 100px;
height: 100px;
}

.min_height_zero {
min-height: 0px;
}


/************* Login page CSS *****************************/

.login_wrapper {
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top: 70px;
overflow: hidden;
}

.login_header{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 70px;
width: auto;
padding-left:15px;
padding-bottom:0px;
background-position:bottom;
padding-top:8px;
min-width:300px;                                                         
}

.flags{
position:relative;top:5px;width:110px;float:right; z-index:1
}
.left_flag, .right_flag{
position: relative; 
height:40px; 
width:40px;
margin-right:10px;
z-index:1;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
margin-top: 10px;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.left_flag_en, .left_flag_en, .switch_flag_en{
background-size: 40px;	
background-repeat: no-repeat;
background-image: url(/data/template_symbols/v1/symbols/flag-en.png);
}
.left_flag_fi, .right_flag_fi, .switch_flag_fi{
background-size: 40px;	
background-repeat: no-repeat;
background-image: url(/data/template_symbols/v1/symbols/flag-fi.png);
}
.left_flag_se, .right_flag_se, .switch_flag_se{
background-size: 40px;	
background-repeat: no-repeat;
background-image: url(/data/template_symbols/v1/symbols/flag-se.png);
}
.left_flag_sa, .right_flag_sa, .switch_flag_sa{
background-size: 40px;	
background-repeat: no-repeat;
background-image: url(/data/template_symbols/v1/symbols/flag-sa.png);
}
.left_flag_ru, .right_flag_ru, .switch_flag_ru{
background-size: 40px;	
background-repeat: no-repeat;
background-image: url(/data/template_symbols/v1/symbols/flag-ru.png);
}

.left_flag_routeselect{
position: relative; height:20px; z-index:1;
}

.switch_flags {
background-size: 100% 100%;
position: relative; 
height:40px; 
width:60px;
z-index:1;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
margin-top: 10px;
margin-left:20px;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.switch_flags_route_select {
background-size: 100% 100%;
position: relative; 
height:40px; 
width:60px;
z-index:1;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
margin-top: 10px;
margin-left:20px;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.login_applicationlogo {
position:relative;
height:70px;
width:260px;
background-repeat:no-repeat;
background-size: auto 65px;
z-index:0;
}

.login_content{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:190px;
background-position:left;
background-size: auto 190px;
}

.kokeile_kirjautumatta_div{
width:auto; 
height:88px;
position:relative;
top: 70px;
padding-left:15px;
padding-top:30px;
}

input.kokeile_kirjautumatta{
background-repeat:no-repeat;
text-indent: 10px;
min-width: 230px;
text-align:left;
cursor:pointer;
border:none;
}

#loginwellcomediv1{
width: auto;
}

.login_footer{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-bottom:13px;
height:auto;
width:auto;
padding-left:15px;
}

.login_info_text{
padding-top: 20px;	
}


.login_button{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}

#loginButtonsComboDiv {
position:relative;
top: 10px;
height:50px;
width:300px;
}

.login_button_link{
width:auto;
cursor:pointer;
border:none;
text-indent: 0px;
margin-left:10px;
} 

#serviceInfoDiv {
padding-top:0px; 
padding-bottom:20px;
width: auto;
}

#serviceInfoMessageTxt  {
padding-top:10px;
}

.login_error_message_footer{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
height:200px;
width:auto;
padding-left:3%;
}

.button_close_login_error{	
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
}


.footer_overlay_login{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

#loginFormId{
width: 100%;
}

#unLabelDiv {
position:relative; 
margin-top:-15px; 
left:10px; 
width:200px;
margin-top:10px;
}

#unInputDiv  {
width:200px;
}

#pwInputDiv  {
width:200px;
}

#pwLabelDiv {
position:relative; 
top:0px; 
left:10px; 
width:200px;
}

#frontPageSomeDiv {
display:none;
}

.front_page_pc_input{
margin-top:10px;
}

.front_page_pc_input_text{
max-width:120px;
height:25px;
}


.button_forward_front_page {
float:left;
width: 0px; 
height: 0px; 
border-left-width: 32px; 
border-right-width:0px;
z-index: 1; 
position: relative; 
float: left; 
border-bottom: 33.3px solid transparent; 
border-top: 33.3px solid transparent; 
margin-left: 6%;
margin-top:1px;
margin-left:1px;
cursor:pointer;
float:right;
margin-right:5px;
}

.button_back_to_front_page{
width: 0px; 
height: 0px; 
border-left-width: 18px; 
border-right-width:0px;
position: relative; 
float: left; 
border-bottom: 20px solid transparent; 
border-top: 20px solid transparent; 
margin-left: 6%;
margin-top:1px;
margin-left:1px;
top: 7px;
cursor:pointer;
}

.button_back_to_front_page_at_top_menu{
background-size: 36px;
float: right;
width: 36px;
height: 36px;
margin-top: 7px;
margin-right: 10px;
cursor:pointer;
display:none;
padding:0;
border:none;
background-color:transparent;
}

.back_to_front_page_div {
position:fixed;
top: 218px;
z-index:401;
}

.goto_front_page_input_container{
margin-left: 25px;
width: 150px;
}

#goToFrontPageInput{
width: 150px;
}

#gotoFrontPageText{
text-align:center;
}

#frontPageButtonPopup{
margin-left: 20px;
width: 0px;
white-space: nowrap;
opacity: 0.8;
border-radius: 7px;
padding-bottom: 10px;
}

#frontPageInfoTxt{
width: 80%;
float:left;
min-height: 30px;
margin-bottom: 10px;
}

.front_page_app_image{
width: 100px;
height: auto;
}

.front_page_app_image_loader{
width: 100px;
min-height: 65px;
}

.front_page_app_image_div{
float: left;
margin-right: 20px;
}

.front_page_app_info{
width: 48%;
height: auto;
float:left;
}

.front_page_application_div{
margin-top:10px;
min-height: 65px;
cursor:pointer;
}

/******** REGISTER PAGE CSS ********/

.register_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_register{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 25px;
width: auto;
padding-left:3%;
background-position:bottom;
min-width:300px;
}

.register_content{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
}

.register_footer{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

.button_close_register{	
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
top:7px;
margin-left:6px;
padding:0;
background-color:transparent;
}


.login_label_register {
position:relative; 
top:5px; 
left:10px;
}


.marketing_permission{
height:100px; 
top:10px; 
position:relative; 
line-height:30px;  
width:250px;
}

input.radio_register{
width:20px;
height:20px;
text-indent:none;
-moz-border-radius:none;
-webkit-border-radius:none;
border:none;
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;
background-image:none;
color: #fff;
}

.button_register{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}

.footer_register_error{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

.info_text_register{
padding-top: 20px;	
}

#registerInput {
width:180px;
}

#registerAudioAlertAbortInput {
width:260px;
}

#permissionInput {
float:right;
}

#infoPermissionTxt {
width:80%;
}

#marketingPermissionTxt {
width:80%;
}


#marketingPermissionInput {
float:right;
}

/******** ROUTE SELECT PAGE CSS ********/
.route_select_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_route_select{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 50px;
width: auto;
padding-left:1%;
padding-top:20px;
background-position:bottom;
min-width:300px;
}

.button_help{
float:left;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;	
}

.button_logo{
float: left;
margin-right:5px;
top: 5px;
z-index:1;
position:relative;
width:120px;
height:46px;
background-repeat:no-repeat;
border:none;
cursor:pointer;
border:none;}

.talennettu_2 {
border-radius: 12px;
-moz-border-radius:12px;
-webkit-border-radius: 12px;
height:25px;
width:25px;
float:left;
margin-left: -120px;
text-align:center;
color:transparent;
background-color:transparent;
z-index:1;
position:relative;
background-repeat: no-repeat;
cursor:default;
}

/******** PLACE SELECT PAGE CSS ********/

.place_select_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_place_select{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 50px;
width: auto;
padding-left:1%;
padding-top:20px;
background-position:bottom;
min-width:300px;
}

.button_home_place_select{
margin-right:5px;
float:left;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
border: 0;
padding:0;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
cursor:pointer;
}

.button_up_standalone_place_select {
float:left;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;

}

.button_help_mozaik{
float:left;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.button_logo_mozaik{
float:left;
margin-right:0px;
top:6px;
margin-left:3px;
z-index:1;
position:relative;
width:120px;
height:46px;
background-repeat:no-repeat;
border:none;
cursor:pointer;
border:none;}


.talennettu_3 {
border-radius: 12px;
-moz-border-radius:12px;
-webkit-border-radius: 12px;
height:20px;
width:20px;
float:left;
margin-left: -120px;
text-align:center;
color:transparent;
background-color:transparent;
z-index:1;
position:relative;
background-repeat: no-repeat;
cursor:default;
}

.header_text_nobuttons
{float:right; width:170px; position:relative;
}

.header_text_mozaik_logo_and_help
{float:right; width:120px; position:relative; margin-right:5px; cursor:normal;
}

#multipleChoicesAnswerDiv, #textPlaceAnswerOptionsDiv, #textPlaceAnswerCommentDiv, #textPlaceGotoNextClipDiv, #finalResultDiv_textPlace{
margin-bottom: 15px;
}

.media_load_canvas_wrapper{position:relative;margin-right:auto;margin-left:auto;width:100px;height:100px; }

#numberSelectContainer{
width:198px;
margin-left:auto;
margin-right:auto;
}


#numberSelectGuide {
margin-top: 4px;
text-align:center;
}


#numpad {
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	border-color: transparent; 
	width: 198px;
	height: 319px;
	z-index:8;
}

#numpadinputfield {
	border-style: solid;
	border-width: 2px;
	height: 35px;
	width: 180px;
	position: relative;
	top: 10px;
	margin-bottom: 20px;
	font-size: 2em;
	z-index: 10;
	overflow: hidden;
	white-space: nowrap;
}
#numpadinputfieldtext {
	position:relative;
	z-index: 11;
	font-size:19px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:8px;
}


#numpadinputfielderrorbackground {
	display: none;
	background-color: rgba(255,0,0,0.7);
	z-index: 9;
	height: 30px;
	width: 173px;
	position: absolute;
	top:0px;
}

.numpadbutton {
	width: 52px;
	height: 52px;
	border-style: solid;
	border-width: 2px;
	border-radius: 20px;
	position: relative;
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}

#numpadbackspace {

}

#numpadnumberbuttoncontainer {
	position: relative;
}

.numpadnumberbutton {
	width: 52px;
	height: 52px;
	border-style: solid;
	border-width: 2px;
	border-radius: 20px;
	position: relative;
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	z-index: 20;
}



.numpadtext {
	position: relative; 
	font-size: 2em;
	margin: 0;
	padding: 0;
	text-align: center; 
	width:54px;
	height:54px;
	border:none;
	background-color:transparent;
	color: #000000;
}

.clear {
	clear: both;	
}

.crowd_sourcing_guide{
	position:relative;
	width: 280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	border-style:solid;
	border-width:1px;
	font-size: 20px;
	line-height:26px;
	border-color:#b8bcc1;
}

.float_right_header_div_100 {
position:relative;
float:right;
max-width: 120px;
margin-right: 10px;
}

.box_30_x_30 {
position:relative;
margin-top:10px;
width: 30px;
height: 30px;
margin-right:10px;
}

#crowdSourceOwnLocButton{
width:120px;
height: 40px;
font-size:16px;
}

/******** ROUTE AND PLACE SELECT COMMON CSS ********/

.button_arrange{
float:left;
margin-right:3px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
border:none;
cursor:pointer;
background-color:transparent;
padding:0;
}

.button_arrange_standalone{
float:left;
margin-right:3px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
cursor:pointer;
background-color:transparent;
border:none;
}

.header_text
{float:right; width:auto; position:relative; margin-right:10px; cursor:normal;
}

.header_text_2
{float:right; width:auto; position:relative; margin-right:10px;
}

.route_and_place_select_info{
position:relative;
float:right;
margin-right:10px;
}

.route_and_place_select_lang_flags{
text-align:right;
margin-top:5px;
}

.application_or_route_name{
position: absolute;
font-size:16px;
font-weight:bold;
margin-top: 50px;
width: 100%;
text-align: center;
text-align:center;
white-space:nowrap;
overflow:hidden;
}

.route_and_place_select_points{
margin-top:5px;
width:auto;
float:right;
opacity:0.8;
text-align:center;
}

.content_route_select{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
}

.footer_route{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
padding-top:8px;
background-repeat:repeat-x;
width:auto;
}

.footer_route_padding{
padding-left: 1%;
}

.auto_margins{
margin-left:auto;
margin-right:auto;
}

.label_select_place_feedback_combo {
position:relative;
padding-bottom: 20px;
z-index:100;
float:left;
width:100%;
}

.label_select_place_feedback {
position:relative;
width:auto;
z-index:100;
text-align:center;
max-width:300px;
}

.button_select_place_feedback {
position:relative;
width:auto;
margin-left:100px;
margin-top:15px;
height:30px;
cursor: pointer;
border: none;
cursor: pointer;
text-indent: 0px;
z-index: 100;
}

.mozaik_partition_header {
font-size:18px;
font-weight:bold;
margin-bottom: 6px;
float:left
}

.route{
padding-top:0px;
margin-top:0px;
width: 100%;
position:relative;
}

div.route_description{
position:relative;
margin-bottom: 0px;
height:auto;
position:relative;
width: 100%;
top: 0px;
z-index:0;
}

div.route_description_visited{
margin-bottom: 20px;
}

.image_reittivalinta{
border-radius: 12px;
-moz-border-radius:12px;
-webkit-border-radius: 12px;
width: 113px;
height: 85px;
float:left;
margin-right:10px;
margin-bottom:10px;
}

.route_text_2{
height:auto;
line-height:14px;
position:relative;
width: 190px;
font-size:14px;
min-height:85px;
float:left;
margin-top:5px;
margin-bottom:10px;
}

.route_text_3{
height:auto;
line-height:14px;
position:relative;
width: 190px;
font-size:14px;
min-height:85px;
float:left;
margin-top:5px;
margin-bottom:10px;
}

h4{
font-size:14px;
margin-top:7px;
}

.h4_shifted{
margin-top:-4px;	
}
.buttons_route{
width:100%;
}

.button_small{
height:20px;
width:80px;
text-align:center;
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
font-size:12px;
padding:0;
}

.button_small_location{
margin-left: 10px;
}

/********* ROUTE AND PLACE SELECT COMMON CSS FOR NEW LIST OUTLOOK ******/
.reitti_content_boxes{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
width:auto;
margin-left:auto;
margin-right:auto;
}
.grid_container {
width:95%;
min-width:300px;
max-width:600px;
margin-right:auto;
margin-left:auto;
margin-bottom:5px;
padding-top: 5px;
overflow:hidden;
cursor:pointer;
}
.grid_header_container{
position:relative;	min-height:30px; border-style:solid;border-width:0px 0px 0px 0px;
}
.visited_marker,.stored_marker,.empty_marker {
position: relative; width: 17px; height: 17px; z-index:10; background-size: 17px 17px; background-repeat:no-repeat;background-color:transparent;margin-left:170px;
}		
.grid_header {
position:relative;display:inline-block;font-size:16px;font-weight:bold;text-align:center;margin-bottom:4px;margin-top:5px;margin-left:30px;min-height:30px;width:92%;z-index:10;
}
.grid_header_link{
cursor:pointer;
}
.grid_item_number {
position:relative; text-align:center;margin-bottom:4px;margin-top:5px;min-height:17px;float:left;width:30px;z-index:10;
}
.grid_content{
position:relative;float:none;cursor:pointer;
}
.grid_image_div{
width:187px;height:140px;float:right;padding-top:5px;margin-left:5px;overflow:hidden;
}
.grid_image_div_autoheight{
width:187px;height:168px;float:right;padding-top:5px;margin-left:5px;overflow:hidden;
}
.grid_image_div_copyright{
position:absolute;font-size:10px;font-style:italic;line-height:12px;
}
.grid_image{
width:auto;height:140px;margin-top:-17px;
}
.used_place_info{
position: absolute; margin-top: 20px; margin-left: 5px; background-color: yellow; color: black;font-size: 16px;font-weight: bold;padding: 10px;
}
.grid_go_button_header{
position:absolute; 
text-align:center;
width:30px;
height:30px;
margin-top: 3px;
z-index:10; 
background-size: 30px 30px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
outline:none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
top:0;
right:5px;
}
.grid_go_button_header_hidden{
position:absolute; 
text-align:center;
width:30px;
height:30px;
z-index:10; 
background-size: 30px 30px;
background-repeat:no-repeat;
padding:0;
background-color:transparent;
right:0;
left:0;
}
.grid_location_button_header{
position: absolute; 
width: 30px; 
height: 30px;
top:0;
left: 0;
z-index:10; 
background-size: 30px 30px;
margin-left:4px;
margin-top:3px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.grid_location_button_header_hidden{
position: absolute; 
width: 30px; 
height: 30px; 
left:0;
top:0;
z-index:10; background-size: 30px 30px;margin-left:2px;margin-top:3px;background-repeat:no-repeat;
background-color: transparent;
border: none;
}
.grid_go_button{
width:80px;height:20px;position:relative;float:left;border-radius:4px;margin-bottom:4px;text-align:center;padding-top:3px; margin-left:3px;margin-top:5px;cursor:pointer;
}

/* outline-color: #000000 */
.grid_outline{
	outline: 3px solid;	
	outline-color: #50b8f5;
}
.grid_go_button_hidden{
display:none;
}
.grid_go_button_wide{
width:162px;
}
.grid_location_button{
width:80px;height:20px;position:relative;float:left;margin-left:5px;border-radius:4px;margin-bottom:4px;text-align:center;padding-top:3px;margin-top:5px; cursor:pointer;
}
.grid_location_button_hidden{
display:none;
}
.grid_text_content{
font-size:16px;margin-right:5px;padding-left:5px;min-height:96px;padding-top:5px;margin-top:3px;line-height:19px;
}
.grid_line{ margin-top:10px; left:-5%; border:none; z-index:1; position:relative; width:105%; height:1px; float:left;background-repeat:repeat-x;
}

@media screen and (min-width: 1240px) {

.reitti_content_boxes{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
margin-left:auto;
margin-right:auto;
width: 1215px;
}

.grid_container {
width:600px;
height:285px;
border-style:solid;
border-width:1px;
border-color:#b8bcc1;
float:left;
margin-right:5px;
margin-bottom:20px;
overflow:hidden;
}

.grid_header_container{
position:relative;	
border-width:0px 0px 0px 0px;
}

.grid_line{
display:none;
}

.grid_image_div{
width: 271px;
height: 200px;
float: right;
padding-top: 5px;
margin-left:5px;
overflow: hidden;
}

.grid_image_div_autoheight{
width: 271px;
height: 334px;
float: right;
padding-top: 5px;
margin-left:5px;
overflow: hidden;
}

.grid_image{
width: auto;
height: 200px;
margin-top: -17px;
}

.visited_marker{
position: relative;
width: 17px;
height: 17px;
z-index: 10;
background-size: 17px 17px;
background-repeat: no-repeat;
background-color: transparent;
margin-left: 249px;
}
}


/******** PLACE PAGE CSS ********/

.place_wrapper { 
position:relative;
width:100%;
height: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
min-height: 550px;
overflow: hidden;
}

.header_place{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 50px;
width: auto;
padding-left:3%;
padding-top:20px;
background-position:bottom;
min-width:300px;
}

.button_forward_standalone {
float:right;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.button_home_poi{
float:left;
margin-right:10px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
border:0;
padding:0;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
cursor:pointer;
border:none;
}

.button_up_standalone_poi {
float:left;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.button_backwards_poi{
float:right;
margin-right:3px;
margin-left:2px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

.button_logo_place, .button_passive_logo_place{
float:left;
top:4px;
z-index:1;
position:relative;
width:120px;
height:46px;
background-repeat:no-repeat;
border:none;
cursor:pointer;
border:none;}

.button_passive_logo_place {
cursor: default;
}


.button_map_place {
float: right;
margin-right:5px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
background-color:transparent;
padding:0;
border:none;
cursor:pointer;
}


.header_text_2_poi{
float:right; 
width:180px; 
position:relative;
font-size:12px;
margin-right:10px;
text-align:right;
}

.header_text_2_poi_container{
width: 96%;
position: absolute;
white-space: nowrap;
top: 47px;
}

.button_listen_again{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:30%;
margin-left:10px;
}

.open_question_answer{
width: 50%;
position:relative;
}

div.checkbox_float_place_question{
position:relative;
top:-5px;
width:20px;
height:20px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
float:right;
cursor:pointer;
}

div.text_float_place_question{
width:80%;
}	

.content_place{
position:relative;
margin-left:5px;
}

.the_poi_images_div {
position:relative;
}

.poi_image_play_button{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
top: 50%;
opacity: 0.7;
background-image: url(/data/template_symbols/v1/symbols/video_button.png);
background-repeat:no-repeat;
background-size: 100% 100%;
background-position: center center;
cursor:pointer;
margin-top:-50px;
z-index:1;
background-color:transparent;
cursor: pointer;
float: left;
padding: 0;

border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
}

.video_preview_place{ 
position:relative;
width:100%;
height:auto;
top:0px;
left:0px;}

.progressbar{
position:relative;
background-repeat:repeat-x;
float:right;
width: 87%;
height: 10px;
margin-top:6px;
margin-left: 1%;
}

.inner_progressbar {
width: 0px;
height: 10px;
}

.button_play_pause_container{
position:relative;
float:left;
z-index:1;
width:9%;
height:20px;
margin-top:2px;
border-width:1px;
margin-bottom: 2px;
min-width:40px;
padding-bottom: 1px;
}

.button_play_pause{
position:relative;
width: 100%;
height: 16px;
cursor:pointer;
background-color:transparent;
border:0;
padding:0;
margin:0;
}

.button_play{
width: 0px; 
height: 0px; 
border-left-width: 14px; 
border-right-width:0px;
z-index: 1; 
position: absolute; 
float: left; 
border-bottom: 7px solid transparent; 
border-top: 7px solid transparent; 
margin-left: 0;
margin-top:1px;
left:3px;
}

.button_pause_half{
margin-top:2px;
margin-left:4px;
height: 12px; 
width: 3px; 
position: relative; 
float: left;
left:20px;
}

.audio_load_progress_container{
position:relative;
z-index:1;
width:100%;
height:16px;
display:none;
background-color:transparent;
margin-top:10px;
}

.audio_load_progress_div{
width:24px;
height:24px;
margin-left:auto;
margin-right:auto;
background-color:transparent;
}

.clip_text{
margin-top:10px;
padding-top:2px;
}

.clip_image_loader {
position:absolute;
width: 100px; 
height: 100px;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}


.subtitle_txt{
padding-top: 2px;
}

.image_name{
margin-top: 10px;
}

.image_copyright{
font-size:10px;
font-style:italic;
}

.clip_image_container{
overflow: hidden;
min-height: 225px;
}

.slide_image{
position:relative;
top: 0px;
left: 0px;
display:none;
}

.place_name_text{
position: relative;
width: 90%;
float: left;
}

.place_name_text_80{
position: relative;
float: left;
width: 75%;
}

.next_and_previous_clip_button{
width: 66px;
position: relative;
height: 32px;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 30px 30px;
cursor: pointer;
float: right;
}

.next_clip_button{
position: relative;
height: 32px;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 32px 32px;
background-color:transparent;
cursor: pointer;
float: right;
padding: 0;
width: 32px;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
}

.previous_clip_button{
position: relative;
height: 32px;
width: 32px;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 32px 32px;
background-color:transparent;
cursor: pointer;
float: left;
padding: 0;
margin-right: 2px;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
}

.video_container{
padding-top: 5px;
min-height:225px;
position:relative;
}

.clip_container{
width: 100%;
position:relative;
margin-top: 10px;
}

.subtitle_container{
margin-top:-45px;
margin-bottom: 6px;
height: 40px;
text-align:center;
overflow:hidden;
position:relative;
background-color:transparent;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.6);
color:#FFF;
font-weight: bold;
}

.next_clip_text_div{
position: relative;
height: 20px;
width: 52px;
margin-left:5px;
}

.next_clip_text{
width: 100%;
text-align:center;
}

.place_edit_container{
position:relative;
width: 200px; 
height: 50px; 
margin-left:auto;
margin-right:auto;	
}

.place_edit_button{
margin-right:20px;
}

.clip_image_view {
position:absolute;bottom:10px;right:5px;height:40px;width:40px;background-image:url(/data/template_symbols/v1/symbols/zoom_btn.png);background-size: 40px 40px; z-index:99;display:none;cursor:pointer;
}

/******** HINT PAGE CSS ********/

.hint_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_hint{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 50px;
width: auto;
padding-left:3%;
padding-top:20px;
background-position:bottom;
min-width:300px;
}

.button_home_hint{
float:left;
margin-right:5px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
border:0;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
cursor:pointer;
border:none;
}

.button_up_standalone_hint {
z-index:1;
position:relative;
width:36px;
height:36px;
top:7px;
margin-right:5px;
margin-left: 6px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
float:left;
padding:0;
background-color:transparent;
}

.button_map_hint {
float: right;
z-index:1;
position:relative;
width:36px;
height:36px;
top:7px;
margin-right:5px;
margin-left: 1px;
background-repeat:no-repeat;
border-radius: 24px;
border:0;
background-color:transparent;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
padding:0;
}

.header_text_2_hint
{
width:100%; 
position:relative; 
top:10px;
text-align:center;
}

.content_hint{
position:relative;
background-repeat:repeat;
position:relative;
padding-left:3%;
width:97%;
background-position:bottom;
}

.text_shrink_hint{
width:80%;
outline:none;
white-space: nowrap;
}

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


.footer_hint{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:15px;
width:auto;
padding-left:3%;
padding-bottom:1%;
line-height:20px;
}


.button_hint{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}

.hintBackToMapButtonInput{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:120px;
}
.giveHintAnswerButton{
margin-top:4px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:100%; 
}

.advertisement_hint {
z-index:1;
position:relative;
margin-left: 3%; 
width: 97%;
}

#hintQuestionAndAnswerDiv{
margin-top:10px;
}

#hintQuestion{
margin-bottom:10px;
}

#hintAnswer{
height:30px; width:100%;margin-top:10px;margin-bottom:10px;
}

#byPassHintQuestionButton{
width:100px;
}

#tryAgainHintQuestionButton{
width:150px;margin-right:25px;
}

#hintGivenAnswer{
margin-top: 20px;
margin-bottom: 20px;
}


/******** SUMMARY PAGE CSS ********/

.summary_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_summary{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 50px;
width: auto;
padding-left:3%;
padding-top:20px;
background-position:bottom;
padding-top:20px;
min-width:300px;
}

.button_home_summary{
margin-right:20px;
top:7px;
z-index:1;
position:relative;
width:36px;
height:36px;
padding:0;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
cursor:pointer;
}

.content_summary{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
}

.footer_summary{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

.button_summary{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}


#summaryPageGotoFeedbackDiv{
height:120px; 
}

#summaryPageGiveFeedbackButton{
width:270px;
}

#summaryPageAdDiv{
height:200px; width:100%; 
}

#thanksPagePriceDiv{
width: 280px;
background-position: left bottom;
}

.thanks_page_price_abrobatur,
.thanks_page_price_cumlaude,
.thanks_page_price_magna,
.thanks_page_price_laudatur,
.thanks_page_price_excimia{
background-repeat:no-repeat;
background-position: center bottom;
background-size: 82% auto;
margin-top: 10px;
padding-bottom: 180px;
}

.thanks_page_price_excimia{
background-image: url(/data/template_symbols/v1/symbols/1-sija.png);
}

.thanks_page_price_laudatur{
background-image: url(/data/template_symbols/v1/symbols/2-sija.png);
}

.thanks_page_price_magna{
background-image: url(/data/template_symbols/v1/symbols/3-sija.png);
}

.thanks_page_price_cumlaude{
background-image: url(/data/template_symbols/v1/symbols/4-sija.png);
}

.thanks_page_price_abrobatur{
background-image: url(/data/template_symbols/v1/symbols/5-sija.png);
}

/******** COMMON FEEDBACK AND FEEDBACK THANKS PAGE CSS *****/

.thanks_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_thanks{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 0px;
width: auto;
padding-left:3%;
padding-bottom:0px;
padding-top:20px;
background-position:bottom;
padding-top:0px;
min-width:300px;
}

.footer_thanks{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
padding-bottom:3%;
}

.button_close_thanks{	
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
top:5px;
}

.button_exit_thanks{
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}


/******** THANKS PAGE CSS ********/

.content_thanks{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:0px;
background-position:left;
}

.info_text_thanks{
padding-top: 20px;
width: 230px;
}

#feedbackThanksBackToStartButtonDiv{
width: 230px;
}


#feedbackThanksBackToStartButton{
width:120px;
}


/******** FEEDBACK PAGE CSS ********/

.txt_underline{
text-decoration:underline;
}

.content_feedback{
position:relative;
top:-120px;
background-repeat:repeat-x;
position:relative;
width:100%;
background-position:bottom;
}

.feedBackScoreRangeDiv {
padding-bottom: 20px;
display:none;
}

#feedbackPageSendFeedbackButton{
width:250px;
}

.multiSelectionFeedBackDiv {
margin-top:10px;
height:40px;
position:relative;
margin-bottom:20px;
}

.multiSelectionTextFeedBackDiv {
margin-top:10px;
position:relative;
margin-bottom:20px;
}


.feedbackPageScoreValuesPara { 
width:120px;
margin-left:-16px;
}

.feedBackHeaderScoreItem {
width:40px;
height:40px;
text-align:center;
position:absolute;
cursor:pointer;
font-size:0px;
background-color: transparent;
border: none;
}

.feedBackHeaderScoreItem1, 
.feedBackHeaderScoreItem2,
.feedBackHeaderScoreItem3,
.feedBackHeaderScoreItem4{
background-repeat:no-repeat;
background-position:center;
background-size: 34px;
color:transparent;
}

.feedBackHeaderScoreItem1{
background-image: url(/data/template_symbols/v1/symbols/smile_big.png);
left:0px;
}


.feedBackHeaderScoreItem2{
background-image: url(/data/template_symbols/v1/symbols/smile_medium.png);
left:60px;
}

.feedBackHeaderScoreItem3{
background-image: url(/data/template_symbols/v1/symbols/smile_small.png);
left:120px;
}
.feedBackHeaderScoreItem4{
background-image: url(/data/template_symbols/v1/symbols/smile_none.png);
left:180px;
}


.feedbackButtonsRow {
padding-bottom: 20px;
}

.feedBackRadioButton {
width:20px;
height:20px;
text-indent:none;
-moz-border-radius:none;
-webkit-border-radius:none;
border:none;
border-top-style:none;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;
margin-left:10px;
margin-right:10px;
}

.feedBackRadioButton_borders{
border-style: solid;
border-width: 2px;
border-radius: 22px;
}


.feedBackRadioButton_no_borders{
border-style: none;
}


.risutJaRuusut  {
width:250px;
height: 100px;
margin-top: 10px;
}

.risutJaRuusutInput  {
width:250px;
height: 20px;
margin-top: 10px;
}

#feedbackPopUpFormContainer{
padding-bottom: 40px;
}

#feedbackPopupForm,#feedbackPopupHeaderTxt,#feedbackPopupSendFeedbackDiv{
width:220px;
margin-left:auto;
margin-right:auto;
}

.feedback_rating_table_detailed,.feedback_rating_table{
width: 97%;
border: solid 1px;
margin-top:10px;
}

.feedback_rating_info_table{
width: 56%;
border: solid 1px;
}


.feedback_rating_row{
width: 100%;
}

.feedback_rating_name_cell{
width: 50%;
}

.feedback_rating_value_cell{
width: 50%;
text-align:right;
}

.feedback_rating_cell_image{
width:40px;
height:30px;
}

/******** ADD PALCE PAGE CSS *******/

.full_length_element{
width: 100%;
text-align: center;
}

#addPlaceImageDiv{
width:260px; 
height:195px; 
margin-left:auto; 
margin-right:auto; 
position:relative;
border:solid 1px;
text-align:center;
cursor:pointer;
}

#addPlaceImageUploadDiv{
display:none;
width: 400px;
height: 300px;
}

#addPlaceImgeInputContainer{
width:0px;height:0px;position:absolute;top:-1000px;
}

#addPlaceImageInput {
height:0px;
width:0px;
border:none
}

#addPlaceImageLoadProgress{
position:relative;
width: 100px;
height: 100px;
margin-top: 58px;
margin-left:auto;
margin-right:auto;
}

#addPlaceMapButtonContainer{
margin-top:10px;
height:55px; 
margin-left:auto; 
margin-right:auto; 
position:relative;
border:solid 1px;
text-align:center;
cursor:pointer;
}

#addPlaceMapButton{
top: 0px;
}

#addPlaceMapButtonText{
float:left;
margin-left: 10px;
margin-top: 10px;
}

#addPlaceContentGuide,
#addPlaceNameContainer,
#addPlaceImageContainer,
#addPlaceDescriptionContainer,
#addPlaceSubmitContainer,
#addPlaceContentContainer,
#addPlaceMapButtonContainer{
position:relative; 
padding-top: 10px;
clear:both;
}

#addPlaceContentContainer{
max-width: 260px;
margin-left:auto;
margin-right:auto;
}

#addPlaceContentGuideText{
text-align:center; 
font-weight:bold;	
}

#addPlaceDescriptionInput{
height: 100px;
padding-top: 10px;
}

#addPlaceSubmitInput{
width: 100%
}


/******** EXPERT CHANNEL PAGE CSS *******/

.border_color_expert_channel{
	border-color: #000000;
}

.button_expert_channel{
	text-indent: 0px;
	cursor:pointer;
	border:none; 
	width:auto;
	min-width: 100px;
	min-height:40px;
	margin-bottom: 10px;
	border:0;
	background-color:transparent;
	font-size:16px;
}

#messageFormCommOptions{
	margin-bottom: 15px;		
}

.commicon_expert_channel {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50px 50px;
	display: block;
	height: 50px;
	width: 50px;
	float:left;
	/*margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	*/cursor: pointer;
	border: 2px #1C1C1C solid;
	margin-right: 15px;
}

.button_active_expert_channel {
	border: 2px white solid!important;
}

#emailicon_expert_channel_container{
	/*height: 60px;*/
}

#emailicon_expert_channel_container p{
	margin: 0;
}

#emailicon_expert_channel{
	background-image: url("/data/template_symbols/v1/symbols/emailicon.png");
	clear:both!important;
}

#emailinput_expert_channel{
	margin-top: 10px;
	width: 100%!important;
}

#fbicon_expert_channel{
	background-image: url("/data/template_symbols/v1/symbols/facebookicon.png");
}

#twicon_expert_channel{
	background-image: url("/data/template_symbols/v1/symbols/twitterlogo.png");
}

#vkicon_expert_channel{
	background-image: url("/data/template_symbols/v1/symbols/vklogo.png");
}

#errorlist_expert_channel{
	list-style-type: none;
	padding:0;
}

.disabled_expert_channel {
	cursor: wait;
	pointer-events: none;
}

#ajaxLoadingContainer_expert_channel{
	height: 150px;
	left: 50%;
	margin-left: -75px;
	margin-top: -75px;
	position: absolute;
	top: 50%;
	width: 150px;
	z-index: 2000;
}

#ajaxLoading_expert_channel{
	width: inherit;
	height: inherit;
}

#messageinput_expert_channel {
	width: 100%!important;	
}

#messageFormContainer_expert_channel {
	padding-top: 10px;
	margin-top: 70px;
	height: 400px;
	position: relative;
}

#formCancelButton_expert_channel {
	position: absolute;
	right: 0;	
}

.float_left {
	float:left;
}

.messageDetailsTopic_expert_channel{
	font-weight: bold;
	text-decoration: underline;	
}

#deleteMessageButton_expert_channel{
	position: absolute;
	right: 0;	
}

#messageDetailsContainer_expert_channel{
	padding-top: 10px;
	margin-top: 70px;
	height: 400px;
	position: relative;	
}

#messageDeleteConfirmContainer_expert_channel{
	padding-top: 10px;
	margin-top: 70px;
	height: 400px;
	position: relative;	
}

#deleteCancelButton_expert_channel{
	position: absolute;
	right: 0;
}

#messageContainer_expert_channel{
	padding-top: 10px;
	margin-top: 70px;	
}

.message_expert_channel {
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	position:relative;
}

.message_expert_channel_content {
	border: 0;
	padding:0;
	margin:0;
	background-color:transparent;
	color:#000000;
}

.message_answered_expert_channel {
	background-repeat: no-repeat;
	background-size: 25px 25px;
	border-width: 2px;
	border-style: solid;
	border-radius: 25px;
	height: 25px;
	margin-top: -14.5px;
	position: absolute;
	right: 2px;
	top: 50%;
	width: 25px;
}
/******** NONSUPPORTED PAGE CSS ********/

.nonsupported_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
}

.header_nonsupported{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 25px;
width: auto;
padding-left:3%;
background-position:bottom;
min-width:300px;
}

.content_nonsupported{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
}

.footer_nonsupported{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

.button_close_nonsupported{	
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
}

.button_nonsupported_textmode{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}


#nonSupportedTexModeInput{
width:270px;
}

/******** HELP PAGE CSS ********/
.help_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
overflow: hidden;
}

.header_help{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 70px;
width: auto;
background-position:bottom;
min-width:300px;
position:fixed;
width:100%;
top:0px;
z-index:100;
}

.logo_help {
float: left;
margin-right:5px;
top: 4px;
z-index:1;
position:relative;
width:130px;
height:46px;
background-repeat:no-repeat;
border:none;
cursor:pointer;
border:none;}

.content_help{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
top:70px;
}

.footer_help{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
top:59px;
width:auto;
padding-left:3%;
}

.button_close_help{	
z-index:1;
position:relative;
width:36px;
height:36px;
top:7px;
margin-right:5px;
margin-left: 6px;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
float:left;
padding:0;
}


.button_help_logout{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
border-radius:15px;
}

#helpLogoutDiv{
margin-top: 10px;
}

#helpStyleSelections{
display:none;
height:370px;
}

.style_section_margins{
margin-top:10px;
margin-bottom:20px;
}

#helpStyleLogoDivContainer{
margin-bottom:10px;
width:270px;
height:76px;
padding-top:5px;
}

#helpStyleLogoDiv{
margin-left:5px;
width:260px;
height:70px;
background-repeat:no-repeat;
}

#helpStyleColorText{
margin-bottom:10px;
}

.help_style_box_selector{
position:relative;
width:50px;
height:50px;
float:left;
border-width:1px;
border-color:#000000;
border-style:none;
margin-bottom:10px;
}

.help_style_box{
position:relative;
width:40px;
height:40px;
margin-left:5px;
margin-top:5px;
}

#appNameChangeInput{
width:95%;
}

#appNameChangeInput:focus{
text-align:left;
padding-left:10px;
}

#activateStyleButton{
margin-top:0px;
}



/******** OUTDOOR MAP PAGE CSS ********/

.map_wrapper { 
position:relative;
width:100%;
height: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
}

.header_map{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:99;
position:fixed;
height: 0px;
width: 100%;
padding-left:3%;
padding-top:0px;
background-position:bottom;
min-width:300px;
}

.content_map{
position:relative;
padding-top:0px;
background-repeat:repeat;
position:relative;
height:500px;
background-position:bottom;
}

.button_minus_new{ 
position:absolute;
right: 10px;
top: 10px;
width:45px;
height:45px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border:none;
cursor:pointer;
padding:0;
z-index:1000;
}

.button_plus_new{
z-index:1000;
position:absolute;
top: 10px;
right: 65px;
width:45px;
height:45px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
padding:0;
cursor:pointer;
border:none;
}

.voucher_Gmap{
z-index:1000;
position:absolute;
right: 10px;
top: 94px;
width:auto;
opacity:0.8;
text-align:center;
}

.button_close_gmap{	
z-index:10000;
position:absolute;
top: 10px;
left: 10px;
width:36px;
height:36px;
background-color:transparent;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
padding:0;
}

.info_text_map_distance_container {
position:absolute;
left: 56px;
top: 10px;
width: 120px;
height: 40px;
background-color:white;
z-index:1000;
}

.info_text_map_distance{
color:black;
font-size: 12px;
padding-top: 13px;
width: 120px;
height: 25px;
white-space:normal;
font-weight: bold;	
text-align:center;
}

.map_marker_info{
height:auto;
width: 300px;
opacity: 1;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
margin-top:50px;
position:absolute;
top:50px;
left: 10px;
z-index:10000;
}

.button_close_single_place_map{
z-index:1;
position:relative;
width:36px;
height:36px;
margin-right:5px;
margin-left:6px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
float:left;
top:7px;
padding:0;
}

#mapMarkerInfoImage{
display:block;
position:relative;
width:auto;
height:220px;
}

#mapMarkerInfoImageContainer{
width:300px;
height:220px;
overflow:hidden;
}

#markerInfoHeader{
font-size: 16px;
font-weight: bold;
line-height: 20px;
margin-bottom: 10px;
margin-top: 5px;
}

#markerInfoDescription{
font-size:16px;
line-height:20px;
margin-top:10px;
}

#mapMarkerInfoCloseBtn{
margin-left:10px;
}

#mapMyPositionMarker{
background-image:  url(/data/template_symbols/v1/symbols/start_marker.png);
display:none;
}

#mapTargetMarker{
background-image:  url(/data/template_symbols/v1/symbols/end_marker.png);
display:none;
}

#mapOtherMarker{
background-image:  url(/data/template_symbols/v1/symbols/intermediate_marker.png);
display:none;
}

#mapMarkerShadow{
background-image:  url(/data/template_symbols/v1/symbols/shadow_marker.png);
display:none;
}

#mapOpenDataDiv{
width:300px;
height:100%;
background-color:black;
position:absolute;
top:0px;
left:0px;
z-index:1001;
}

.button_close_open_data{
position:fixed;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
top:80px;
background-color: transparent;
padding: 0;
}

a.olControlZoomIn {
margin-right:20px;
}

#mapExtraContributionDiv{
position: absolute;
bottom: 15px;
right: 10px;
width: auto;
height: 20px;
background-color: #FFF;
opacity: 0.8;
color: grey;
}


/******** INDOOR MAP PAGE CSS ********/

.map_indoor_wrapper { 
position:relative;
width:100%;
min-height: auto;
height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
top:70px;
overflow: hidden;
}

.map_indoor_wrapper_new { 
position:absolute;
width:100%;
height:680px;
margin: 0;
padding: 0;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0;
min-width:300px;
top:70px;
overflow: hidden;
}

.header_map_indoor{
padding: 0;
margin:0;
z-index:1;
position:relative;
width: auto;
background-position:bottom;
min-width:300px;
}

.content_map_indoor{
position:relative;
background-repeat:no-repeat;
background-position:top center;
padding-left:3%;
width:97%;
height:600px;
}

.footer_map_indoor{
padding: 0;
margin: 0;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

.button_close_map_indoor{	
z-index:1;
position:relative;
margin-top:-610px;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
}

.voucher_pic_map{
position:absolute;
margin-left:70%;
margin-top:5px;
width:auto;
opacity:0.8;
text-align:center;
z-index:1;
}

.button_close_new_map_indoor{	
z-index:1;
position:fixed;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
top:80px;
left: 1%;
background-color: transparent;
padding: 0;
}

.button_close_wiki {
z-index:1;
position:fixed;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
top:80px;
right: 80px;
background-color: transparent;
padding: 0;
}

.map_symbol_div{
position:absolute;
cursor:pointer;
z-index:10;
background-color: transparent;
padding: 0;
border: none;
}

.map_symbol_div_2{
position:absolute;
z-index:10;
background-color: transparent;
padding: 0;
border: none;
}

.map_symbol_div_highlight{
}

#mapSheetMarkerInfo{
position:absolute;
height:auto;
width: 205px;
opacity: 0.9;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
margin-top:55px;
z-index:95;
}

#mapSheetMarkerInfoImage,#mapSheetMarkerInfoImageDiv{
width:200px;
height:150px;
}

.button_sheet_selector_left{
position: absolute;
width: 36px;
height: 36px;
cursor: pointer;
background-color: transparent;
padding: 0;
outline: none;
border: none;
top: 50%;
margin-top: -32px;
left: 10px;
}

.button_sheet_selector_right{
position: absolute;
width: 36px;
height: 36px;
cursor: pointer;
background-color: transparent;
padding: 0;
outline: none;
border: none;
top: 50%;
margin-top: -32px;
right: 10px;
}

.map_sheet_progress_indicators{
position: absolute;
height: 46px;
width: 70%;
left: 15%;
bottom: 30px;
}

.map_sheet_progress_indicator{
height: 15px;
margin-top:17px;
position: relative;
float: left;
border-radius:1px;
opacity:0.5;
}

.map_sheet_image,#mapSheetControlsDiv{
min-width: 300px;
width:100%;
}

.map_sheet_image{
position:absolute;
height:auto;
touch-action: none;
}

.map-sheet-opacity{
opacity:0;
}

#mapSheetsDiv{
position:absolute;
width:100%;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}

#mapSheetsContainerDiv,#mapSheetControlsDiv{
position: relative;
width: 100%;	
}

#mapSheetControlsDiv{
margin-top:-110px;
}

#mapSheetOpenDataDiv{
width:300px;
height:100%;
position:absolute;
top:0px;
left:0px;
z-index:110;
}
@media screen and (min-width: 400px) {
#mapSheetOpenDataDiv{
width: 400px;	
}
} 


/******** POP UP DIALOGUE COMMON CSS ********/
/**SAVE OR EXIT POPUP, LOCATE POPUP, SKIP PLACE POPUP, SEND EMAIL POPUP, CHOOSE LANGUAGE POPUP **/
.popup_wrapper { 
position:relative;
width:100%;
height: auto;
min-height:680px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align:middle;
background-position:left top;
background-repeat:repeat-x;
border:none;
left:0px;
min-width:300px;
}

.header_popup{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 70px;
width: 100%;
padding-top:0px;
background-position:bottom;
min-width:300px;
position:fixed;
z-index:100;
top:0px;
left:0px;
}

.content_popup{
position:absolute;
background-repeat:repeat-x;
width:100%;
height:50px;
top:70px;
background-position:left;
z-index:1000;
}

.footer_popup{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:absolute;
background-repeat:repeat-x;
width: 100%;
/*width:97%; */
/*padding-left:3%; */
top:120px;
}

.button_close_popup{	
z-index:1;
position:relative;
width:36px;
height:36px;
background-repeat:no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 27px;
cursor:pointer;
border:none;
}


.button_yesno_popup{
margin-top:15px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:auto;
}


.info_text_popup{
padding-top: 20px;
width: 280px;
margin-left:auto;
margin-right:auto;
}

/** POINTS POPUP CSS **/
#pointsPopupFooterResultTxt{
text-align:center;
}

#pointsPopupFooterPointsHeader,
#pointsPopupWordPuzzleDiv,
#pointsPopupPuzzleResult,
#pointsPopupFbDiv{
text-align: center;
}

#shareResultsButton{
width: 30px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-size: 100% auto;
cursor:pointer;
margin-bottom:20px;
}

#pointsPopupFooterPriceDiv{
width: 280px; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
height: auto;
}

.close-points-popup2{
position:relative;
display:block;
width:100px;
height:40px;
background-color:transparent;
color:#000000;
border: 1px solid #000000;
left:50%;
margin-left:-50px;
margin-top:20px;
cursor:pointer;
}


/** LOCATE POPUP CSS **/

#paikannusButtonitContainer{
margin-top:20px;
height:50px;
width:280px;
margin-left:auto;
margin-right:auto;
}

#orderList{
width:120px; margin-right:25px;
}

#dontOrderList{
width:120px;
}

/** SKIP PLACE POPUP CSS **/

#ohitaPaikkaButtonitContainer{
margin-top:20px;
height:50px;
width:280px;
margin-left:auto;
margin-right:auto;
}

#skipPlaceInput{
width:120px; margin-right:25px;
}

#dontSkipPlaceInput{
width:120px;
}

/** SAVE OR EXIT POPUP CSS **/

#popupTallennaButtonsContainer{
margin-top:20px;
width: 280px;
margin-left:auto;
margin-right:auto;
}

#SaveRoute{
width:120px; margin-right:25px;
}

#ExitRoute{
width:120px;
}

/** SEND EMAIL POPUP CSS **/



.error_indication{
color:red; 
}

#PopupSendSMS{
height:700px;
}

#PopUpSendSMSContainer{
height:700px;
}

#messageTypeSelectionDiv{
margin-top:10px;
}

#emailButton{
width:120px; margin-right:25px;
}

#smsButton{
width:120px;
}

#emailInputDiv{
margin-top:20px; height:300px;
}

#emailAddress{
height:30px; width:280px;margin-top:10px;margin-bottom:10px;
}

#emailSubjectLabel{
margin-top:10px;
}

#emailSubject{
height:30px; width:280px;margin-top:10px;margin-bottom:10px;
}

#emailContentLabel{
margin-top:10px;
}

#emailContent{
height:70px; width:280px;margin-top:10px;margin-bottom:10px;
}

#emailContentEmptyErrorDiv{
margin-bottom: 10px; 
}

#deliverEmailButton{
width:280px;
}

#smsInputDiv{
margin-top:20px; height: 300px; 
}

#smsNumber{
height:30px; width:280px;margin-top:10px;margin-bottom:10px;
}

#smsInputHeaderDiv{
margin-top:10px;
}

#smsContent{
height:70px; width:280px;margin-top:10px;margin-bottom:10px;
}

#smsContentEmptyErrorDiv{
margin-bottom:10px; 
}

#smsContentErrorDiv{
margin-bottom:10px; 
}

#deliverSMSButton{
width:280px;
}

/** Accessible specific CSS **/

.accessible_focus:focus{
outline-color:#50b8f5;
outline-style:solid;
outline-offset:1px;
outline-width:3px;
}

.accessible_focus_map:focus{
outline-color: #50b8f5;
outline-style:solid;
outline-offset:1px;
outline-width:4px;
}

.map-accessibility-marker-highlight{
background-color: #50b8f5;
}

.accessible_select_route_info{
position:absolute;
left:10px;
top:-40px;
height:30px;
width:30px;
border-radius: 20px;
border: 1px solid #000000;
background-image: url(/data/template_symbols/v1/symbols/accessibility.png);
background-size:100%;
user-select:none;
cursor:pointer;
}

.accessible_map_info{
z-index: 1000;
position: absolute;
top:10px;
left:50%;
margin-left:-22px;
width: 45px;
height: 45px;
background-repeat: no-repeat;
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
padding: 0;
cursor: pointer;
border: none;
background-image: url(/data/template_symbols/v1/symbols/accessibility.png);
background-size:100%;
}

.accessible_map_traverser{
position: absolute;
right: 0;
top: 140px;
z-index: 10000;
color: white;
background-color: #50b8f5;
min-height:20px;
overflow-x: hidden;
width:200px;
}

.accessible_map_traverser_item{
position:fixed;
height:20px;
white-space:nowrap;
background-color:#50b8f5;
width:10px;
right:-20px;
}

/** CHOOSE LANGUAGE POPUP CSS **/

#theSelectionFlagsDiv{
padding-top:10px;
width:230px;
}

.lang_popup_div{
margin-bottom:30px;
position:relative;
float:left;
margin-left:20px;
}

.lang_popup_flag{
position: relative; 
height:40px; 
width:40px;
z-index:1;
cursor:pointer;
background-color: transparent;
display: inline-block;
padding: 0;
border: none;
margin-top: 10px;
margin-right: 5px;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
}

/** ADVERTSIMENT CSS **/


.fb_add {
margin-top: -53px;
margin-left: 100px;
width: 100px;
}

.adImageContainer{
margin-top:15px;
margin-bottom:10px;
}

.specialAddImageForTwitter{
width: 25px;
height: 25px;
}

.specialAddImageForFb{
width: 25px;
height: 25px;
margin-left: 30px;
display:inline-block;
cursor:pointer;
}

.info_window{
position:absolute;
top: 0px;
z-index:2000;
width: 100%;
height: auto;
}

.info_window_iframe_container{
position:relative;
width: 100%;
}

.info_window_iframe{
width: 100%;
}

.header_extra_info{
height: 70px;
width: 100%;
}

#infoWindowCloseButton{
float:right;
margin-right: 10px;
width:auto;
}

.infobox{
height:60px;
}

.infoboxinput{
margin-top:10px;
}

.infoboxsubmit{
float:left;
font-size:16px;
margin-left:20px;
margin-top:7px;
cursor:pointer;
height:37px;
}

.infoboxresponse{
font-size:16px;
margin-top:15px;
}

/** SOCIAL MEDIA CSS **/

.socialMediaButtonContainer{
position:relative;
height: 30px;
}

.bottom_some_container{
position:relative;
float:left;
margin-left:8px;
margin-top:2px;
}

.bottom_some_container_crowd_sourced{
position:absolute;
margin-left:8px;
top: -105px;
width: 25px;
}

.socialMediaButton{
position: relative;
float:left;
width:25px;
height:25px;
margin-right:24px;
cursor: pointer;
}

.socialMediaButton_crowd_sourced{
position: relative;
float:left;
width:25px;
height:25px;
cursor: pointer;
margin-bottom: 10px;
}

.socialMediaButton_bottom_header{
height: 25px;
background-position: bottom;
}

.socialMediafbButton{
background-repeat:no-repeat;
background-image: url(/data/template_symbols/v1/symbols/f_logo.png);
}

.socialMediatwButton{
background-repeat:no-repeat;
background-image: url(/data/template_symbols/v1/symbols/twitterbird.png);
}

.socialMediavkButton{
background-repeat:no-repeat;
background-image: url(/data/template_symbols/v1/symbols/vklogo.png);
}

/** VOUCHER POPUP CSS **/
.voucherBody{
width: 300px;
margin-top: 10px;
padding-left:5px;
padding-right:5px;
padding-bottom: 5px;
}

.voucherName{
padding-bottom:10px;
padding-top:10px;
font-size:18px;
font-weight:bold;
}

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

.voucherImage{
width:300px;
height:auto;
border-radius:12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
display:block
}

.voucherDescription{
margin-top:10px;
margin-bottom:10px;
font-size: 16px;
}

.voucherClaimHeader{
font-size: 16px;
}

.voucherGrantResult{
font-size: 16px;
font-weight:bold;
padding-top:10px;
}

#enterVoucherCodeInput.inputtxt{
display:block;
margin-top:10px;
width:95%;
height: 25px;
text-align: center;
}
#enterVoucherCodeInput.input{
text-indent: 10px;
height: 25px;
width: 120px;
margin-left: 20px
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
}

.button_voucher{
margin-top:15px;
margin-bottom:15px;
height: 25px;
text-indent: 0px;
cursor:pointer;
border:none; 
width:95%;
}

.voucherClaimHeader {
padding-bottom: 0px;
}
.voucherClaimContainer {
width: 280px;
float: left;
}
.highLightPoints {
background-color: rgb(219, 243, 217);
cursor: pointer;
border-style:solid;
border-width:1px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-color: white;
width: auto;
height: auto;
text-align: center;
}

/** TRANSITION INDICATOR CSS **/


.header_transition{padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
height: 70px;
width: auto;
padding-left:3%;
background-position:bottom;
min-width:300px;
}

.content_transition{
position:relative;
background-repeat:repeat-x;
position:relative;
width:100%;
height:50px;
background-position:left;
}

.footer_transition{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
z-index:1;
position:relative;
background-repeat:repeat-x;
padding-top:20px;
width:auto;
padding-left:3%;
}

#transitionIndicatorContainer{
margin-top:10px;
}

/** NEW TRANSITION ANIMATION CLASSES**/

.transition_wrapper {position: fixed; top: 0px; width: 100%; height: 100%; min-height: 680px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;vertical-align: middle; background-position: left top; background-repeat: repeat-x; border: none; left: 0px; min-width: 300px; z-index: 200;opacity:0.7;}
.transition_content_wrapper{position:relative;margin-right:auto;margin-left:auto;margin-top:100px;width:150px;height:200px; }
.transition_close_button_container{position:relative;top:10px;width:100%;height:28px;z-index:10; }
.transition_close_button{position:relative;top:10px;width:28px;height:28px;background-repeat:no-repeat;background-size:28px 28px;float:right;z-index:10;}
.transition_canvas_wrapper{position:relative;margin-right:auto;margin-left:auto; margin-top:36px;width:150px;height:150px; }
.transition_upload_wrapper{width:100%;height:26px;}
.transition_upload_bar{position:relative; width:2%; top:3px; height: 20px;}
.transition_temp_opac{opacity:0.3;}

/** CSS3 PROGRESS ANIMATION **/

.grid_image_loader_div{
position:relative;
float:right;
height:96px;
width: 96px;
margin-right:19px;
}

.css3_loader_lifted_margin {
  opacity:0.5;
  font-size: 10px;
  margin: -21px auto;
  text-indent: -9999em;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #f6f8f9;
  background: -moz-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.css3_loader {
  opacity:0.5;
  font-size: 10px;
  margin: 25px auto;
  text-indent: -9999em;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f6f8f9;
  background: -moz-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #f6f8f9 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.css3_loader:before,.css3_loader_lifted_margin:before {
  width: 50%;
  height: 50%;
  background: #f6f8f9;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.css3_loader:after,.css3_loader_lifted_margin:after {
  background: #ffffff;
  width: 85%;
  height: 85%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/** EXTRA **/

div.select_route_route_description_admin, div.select_place_route_description_admin{
border-color: #b8bcc1;
}


/** DEBUG RELATED CSS **/

.loginAudioDebug {
text-align:left; margin-left:10px;
}

#clientDebugDivTxt{
text-align:left; margin-left:10px;
}

#serverDebugDivTxt{
text-align:center; color:red;
}

#startDebugDivTxt{
text-align:center; color:blue;
}

.noBrowserSupport {
height: 500px;
}

.noBrowserSupportHeader {
margin-top: 10px;
margin-left:3%;
width:97%;
position:relative;
height:85px;
width:99px;
background-repeat:no-repeat;
background-image:url(/data/template_symbols/v1/symbols/tarinasoitinlogo.png);
z-index:0;
}

.noBrowserSupportErrorTxt{
margin-top: 10px;
margin-left:3%;
width:97%;
}

#totalScoreValue,#mozaikPlacesListHeaderTxt{
color:white;
font-size:18px;
font-weight:bold;
}
#routeSelectLogoDiv{
height:52px;
}
.button_logo{
background-size: auto 52px;
}

div.checkbox_float_place_question{
border-color: black;
}
/* screen width 200-400px */
@media screen and (min-width: 200px) {

.route_text_3,.route_text_2{
min-height:75px;
margin-top:10px;	
}

.adtxt {
width: 275px;
}

}

/*  end < 400px   */


/* screen width 400-600px */
@media screen and (min-width: 400px) {


.mozaikPlaceDescriptionStyle {
height: 66px;
overflow:hidden;
line-height: 16px;
}

div.select_route_route_description_admin, div.select_place_route_description_admin, div.select_place_route_separator {
float: left;
border-color: rgba(184,188,193,1);
border-style: solid;
border-radius: 12px;
border-width: 1px;
min-height: 100px;
margin-left: 5px;
margin-bottom: 20px;
width: 350px;
height:164px;
}

div.select_place_route_separator {
height: auto;
min-height: 40px;
}

.mozaik_partition_header{
width: 350px;
text-align:center;
}

.line_2_list{
display:none;
}

.line_list{
display:none;
}

.login_info_text {
max-width: 400px;
}

.image_reittivalinta{
width:150px;
height:113px;
}

.talennettu_3,.talennettu_2 {
margin-left:-157px;
}

.route_text_3,.route_text_2{
min-height:113px;
margin-top:10px;	
}

.h4_shifted {
min-height: 28px;
}


.button_small {
margin-top: 15px;
}

.adtxt {
width: 387px;
}

}

/* screen width 600-800px */
@media screen and (min-width: 737px) {

.mozaikPlaceDescriptionStyle {
height: 66px;
overflow:hidden;
line-height: 16px;
}


div.select_route_route_description_admin, div.select_place_route_description_admin, div.select_place_route_separator {
float: left;
border-color: rgba(184,188,193,1);
border-style: solid;
border-radius: 12px;
border-width: 1px;
min-height: 150px;
margin-left: 5px;
margin-bottom: 20px;
width: 350px;
height:164px;
}


.mozaik_partition_header{
width: 350px;
text-align:center;
margin-top: 20px;
}

.line_2_list{
display:none;
}

.line_list{
display:none;
}

.login_info_text {
max-width: 600px;
}

.image_reittivalinta{
width:150px;
height:113px;
}

.talennettu_3,.talennettu_2 {
margin-left:-157px;
}

.route_text_3,.route_text_2{
min-height:113px;
margin-top:10px;	
}

.h4_shifted {
min-height: 28px;
}


.button_small {
margin-top: 15px;
}

.adtxt {
width: 580px;
}

}