/*

medium (or mobile) CSS with what is specific when browser window is small: width < value set in page.tpl
- there is an even smaller CSS which is loaded on top of this and just makes the client description invisible in the client small list
*/

body {
	margin: 0;
	/*min-width: 480px;*/
	/*background-color: #063;*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
}

/*#center_image {display: none;}*/ /* nu inca: engine.9.05.07: we switched to white background and the same header with text for CARTA.ro as the main.css */

/* wrapper of wrapper - used in order to have location navigation div displayed before content although in html it is after content - see https://localhost/teste/divs/reverse.html */
#w_w {
	display: table;
	width: 100%;
}

#wrapper{
	padding: 0;
	display: table-footer-group; /* see w_w */ /* this is the secret of falling under the location vertical navigation menu hmw */
}

.content {
	margin: 0;
	width: auto;
	/*text-align: inherit;*/ /* nu stiu la ce folosea insa facea h1 sa fie centrat pe pagina */
}

#logo_up {
	/*padding: 10px 0 0px;*/ /* removed in engine.9.06.07 */
	/*color: white;*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
}

#path {
	/*display: none;*/ /* - we decided we need this visible */
}






.n_i_m {
	display: none;
}




.wd:not(.c_f_b) #map {
	/*height: auto;*/
	border-radius: 0;
}

#mobile_map {
	display: block;
	padding: 10px;
}





/*
 * 
 * Horizontal Menus - here the hm is hidden on the top of the page
 * 
 * in functions.js are the functions responsible for the hover effect which is not using the touch emulation of hover of the mobile browser as that gives different results on different mobile browsers
 *
 * 
 */


.hm {
	top: 40px; /* cancel previous css from main and wide */
	left: 10px; /* cancel previous css from main and wide */
	/*background: url('https://static.carta.ro/photos/images/3dots.png') right 4px no-repeat;*/
	/*background: url('https://static.carta.ro/photos/images/3dots.png') right bottom no-repeat;*/
	/*background: url('https://static.carta.ro/photos/images/3lines.png') right bottom no-repeat;*/
	background-color: transparent;
	/*background-image: url('https://static.carta.ro/photos/images/menu_white.png');*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
	background-position: 10px 10px;
	background-repeat: no-repeat;
	
	text-align: left;
	padding-top: 50px; /* push content down beyond the height of div to be invisible */
	
	max-height: 50px; /* transition doesn't like height: auto; so we work with max-height and set it to something really big bellow */
	height: 0; /* hide all content */
	overflow: hidden;
	width: 0; /* show only the three lines menu icon */
	position: absolute; /* let the next div (wrapper) go up under this div - just for safety here, normally inherited from wide.css */
}


/* we don't want the hover effect because it interfers with click on touch devices and the behaviour is erratic - different browsers treat touch differently - so we override the :hover from main.css: */
.hm:HOVER {
	border: none;
	top: 40px;
	left: 10px;
	height: 0; /* remove css from wide.css */
	/*background-image: url('https://static.carta.ro/photos/images/menu_white.png');*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
	background-position: 10px 10px;
	background-repeat: no-repeat;
	background-color: transparent;
	padding-top: 100px; /* bring content back from beyond the height of div to be visible */
	max-height: 50px; /*see explanation above*/
	width: 50px;
	position: absolute; /* so that it doesn't fall over the div bellow */
	box-shadow: none; /* no more shadows */
}


/* on touch devices - medium & small.css - we cannot rely on hover because every browser treats touch events different in regards to hover and click - so we use click activating in js the hover class */
.hm.hover {
	height: auto;
	/*background-color: white;*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
	padding-top: 0; /* bring content back from beyond the height of div to be visible */
	max-height: 10000px; /*see explanation above*/
	width: 100%;
	transition: max-height .5s;
	position: static; /* so that it doesn't fall over the div bellow */
	box-shadow: none; /* no more shadows */
	
	display: table; /* so that we would have two cells: the clmd and the ul */
	border: none;
}

.hm ul {
	padding: 0; /* fill up the whole width of hm */
	display: table-cell; /* this is the second cell, the first one is clmd */
}

.hm ul ul {
	position: static; /* push down the other li */
	visibility: visible; /* we don't work with visibility but with display - because visibility still uses space in browser even if element is not visible */
	display: none;
	left: 0; /* right under the clicked / hovered / touched li */
	border: none;
	box-shadow: none;
	width: 100%;
}

/* when a li is hovered - by hovere class here in medium & small.css then unhide the ul within */
.hm ul li.hover > ul {
	display: block; /* redefine behaviour because in main.css it works with visibility - see explanation for .hm ul ul */
}
.hm ul li.hover > ul li {
	padding-left: 40px;
	background-color: #eee;
}

.hm li {
	height: auto;
	line-height: 32px;
	width: 100%;
	border-bottom: 1px solid #dddddd;
	padding-left: 30px;
}

/* expandable location links have now a different style of arrows */
.hm .taphover {
	background-image: url('https://static.carta.ro/photos/images/menu_right.png');
	background-position: 10px center;
	background-repeat: no-repeat;
}

.hm .taphover.hover {
	background-color: #eee;
	background-image: url('https://static.carta.ro/photos/images/menu_down.png');
	background-repeat: no-repeat;
	background-position: 10px 4px;
}

/* no more arrow images in location links */
.hm .ac {display: none;}

/* close horizontal menu div */
/*#clhmd {
	display: inline-block;
	width: 40px;
	background-image: url('https://static.carta.ro/photos/images/menu_close.png');
	background-color:  #cd6155 ;
	background-position: center center;
	background-repeat: no-repeat;
	border-right: 1px solid black;
	cursor: pointer;
	display: table-cell;
}*/






/*
 *
 * location horizontal navigation starting in engine.8.01.17
 * 
 */

h1 {display: inline;}

/* location header */
.l_h {
	padding-left: 10px;
}

.lhn {
	display: inline; /* to stick left to H1 */
}

.lhndm {
	float: none; /* cancel float from main.css - we work without floats */
	height: auto; /* in order to cance height: 19px from main.css */
	display: inline; /* it needs inline in order to be inline with h1 */
}

#lhn .lhns, #lhn .lhnd, #lhn .selected_lhnd {
	display: none; /* starting in engine.8.01.17 */
}

.selected_lhnd {top: 1px;} /* no more yellow border underneath the tab - which I don't know why it appears beacuse in main and wide.css is not there */

.vm ul {
	display: none;
	visibility: visible; /* so that :hover in main.css would not make it visible anymore which would make it invisible on unhover */
	position: static; /* cancel absolute from main.css */
}

.vm ul li {
	float: none; /* we don't use float because we use real heights that really use space from viewport in medium and small.css */
	line-height: 32px;
	border-bottom: 1px solid #dddddd;
	padding-left: 30px;
}

.vm.hover {
	display: table;
	width: 100%;
	border: 1px solid black;
	border-radius: 5px;
	padding: 0;
	margin-bottom: 10px;
	background: white;
}

.vm.hover #mores_a {
	display: none;
}

.vm.hover ul {
	display: table-cell;
	border: none;
	box-shadow: none;
	border-radius: 0 5px 5px 0;
}

/* close vertical menu div */
#clvmd {
	width: 40px;
	background-image: url('https://static.carta.ro/photos/images/menu_close.png');
	background-color:  #cd6155 ;
	background-position: center center;
	background-repeat: no-repeat;
	border-right: 1px solid black;
	border-radius: 5px 0 0 5px;
	cursor: pointer;
	display: none; /* this is the first cell, the first one is the ul */
}

.vm.hover #clvmd {
	display: table-cell;
}









/* green div in the center that contains almoust everything */
#gd {
	background-position: right -20px; /* adjust the background image defined in main.css: engine.9.06.02 */
	padding: 80px 10px 0;
	padding: 0;
	/*background: url('https://static.carta.ro/photos/images/carta.t.png') center top no-repeat;*/ /* nu inca: engine.9.05.07: we switched to white background and the same header with text for CARTA.ro as the main.css */
	/*background: #063;*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
	width : auto;
	-moz-border-radius: 0;
	border-radius: 0;
	border: none;
	color: white;
	float: none; /* override float left from CSS */
	margin: 0;
}

#path, .cpp, h1 {
	/*padding-left: 10px;*/
}

#path {/*display: none;*/text-align: left;}

h1 {text-align: left;}


#p1, #fb {
	right: 10px;
	text-align: right;
	left: auto;
}

#fb {top: 0;}
#p1 {top: 30px;}

#horizontal_navigation {width: auto;}

.wd {
	/* forget about the 10px padding from main.css */
	/*padding: 0;*/
	/* forget about these borders from main.css */
	/*border: none;*/
	border-radius: 0;
	border: none;
}









/* client full */
/*.c_f {
	margin-top: 0;
}*/


/* client full header in client.display.full.tpl */
.c_f_h {
	padding: 0 0 5px 10px;
}

/* while in location h1 needs to be inline in medium.css so that mores menu would be displayed at the right of h1, in client full we don't want h1 to be inline */
.c_f_h h1 {
	display: block;
}

/* client vertical navigation phones - enable click on phone number */
.c_f #phones a[href^=tel] {
	pointer-events: auto;
	cursor: pointer;
}








#small_pictures {
	display: none;
}

/* client content 1 - the content */
.cl1 {
	width: 100%;
	float: none;
}

/* client content 2 - the contact */
.cl2 {
	float: none;
	margin-left: 0;
	width: 100%;
}

/* client price */
.cpr {float: left;}

/* client places and phones */
.cpp {display: inline-block; text-align: left; margin: 7px 5px 20px 5px;}

/* phones in client full */
.phones {padding-left: 50px;}

.places {padding-left: 50px; margin-top: 0;}

/* client website, address and contact button */
.cawc {float: right;}








#s_f {
	display: initial;
}




/* search query wrapper
- needed to contain the padding so that sq would have width 100% in the small CSS
- and the borders and the background-image
*/
#sqw {
	width: calc(100% - 4px);
	/*overflow: hidden;*/
	display: block;
	height: 40px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #006600;
	background: url('https://static.carta.ro/photos/images/find.png') no-repeat scroll 10px 7px;
	background-color: #FFFFCC;
	/*margin: 10px 0 0;*/
	margin-bottom: 10px;
}

/* search query */
#sq {
	width: calc(100% - 40px);
	/*height: 100%;*/
	color: gray;
	border: none;
	/*FONT-SIZE: 1.7em;*/
	background: none;
	background-color: none;
	margin: 0 0 0 40px;
	padding: 0;
	color: gray;
}


#so_sp {
    min-width: 0;

}

#sosbw {
	display: block;
	width: 100%;
	position: relative;
}

#sbw {
    position: absolute;
    right: 0;
    top: 0;
}

/* instant search results frame */
#isrf {
	width: 100%;
	position: relative;
	z-index: 100;
}

/* search form simple */
#sfs {
	display: block;
	position: absolute;
	right: 20px;
	top: 30px;
}

#sfw {
	display: none;
}

/* search button */
#sb {/*float: right;*/}

/* search options button */
.sob {/*position: static;*/} /* commented because we need it relative (defined in main.css) so that span inside it would be 100% */

/* search options div */
#sod {
	-moz-border-radius: 0 5px 5px 5px;
	border-radius: 0 5px 5px 5px;
}

#ribbon A:link, #ribbon A:visited {color: white;}

#vertical_navigation {display: none;}

/* don't display the flags and the login links but instead show login_2 - see bellow */
#languages {display: none;}

.location_map {display: none;}

.location_POIs {/*display: none;*/}

.csl {/*border-bottom: 1px solid silver;*//* box-shadow: -5px 0 15px 0 #888 inset;*/}

.csl:HOVER {/*background-color: white;*/}

/* client small list text */
.csl_t {
	/*font-size: 17px;*/ /* DEPRECATED in 14.00.01 - because we put it in main */
}

/* features examples - hidden in the small & medium css */
.fex {display: none;}

/* features column - different in medium and small css */
.fc {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}

/* features comlumn spacer - different in medium and small css */
.fcs {
	display: none;
}

/* feature div - different in medium and small css */
/*.fd {
	width: 100%;
}*/

/*
CSS for rdd - radio as drop down
*/

/* in order not to push the content down on display of the drop-down, the rdd span/div needs to be positionned absolute in a relative positionned outer span/div */
.rddo {
	position: relative;
	width: 140px;
	display: inline-block;
	vertical-align: top;
}

/*First, do some styling on the UL*/
.rdd{
	float: left;
	list-style-type:none;
	margin:0;
	top: -5px;
	padding:5px 15px 5px 5px;
	background-image: url('https://static.carta.ro/photos/images/arrow_down_spaced.gif');
	background-repeat: no-repeat;
	background-position: right center;
	position: absolute;
}

.rdd a {
	TEXT-DECORATION: none;
}

.rdd:hover {
	border:solid 1px #000;
	border-radius: 5px;
	background-image: none;
	background-color: #FFAE00;
}
 
/*Now we need to remove the actual radio buttons, the links will serve as the click area*/
.rdd input{
	display: none;
}
 
/*By default, hide the links and any text*/
.rdd a, .rdd span{
	display:none;
}

/*All the links should show when the rdd span/div is hovered*/
.rdd:hover a, .rdd:hover span{
	display:block;
}
 
/*Otherwise, only the link that follows a checked radio should display but not clickable - for touch screens*/
.rdd input:checked+a{
	display:block;
	font-weight:bold;
	cursor: default;
	pointer-events: none;
}

/* don't display the submenus - not seen in rdd */
.jqpopupmenu1 li, .rdd a img {
	display: none;
}

/* sort.menus inline with promoted.categories */
.v2134 {
	display: none;
}


/* but when expanded then not inline anymore */
/*#lsm.hover {
	display: block;
	margin-bottom: 10px;
}*/

/* enhance offer div wrapper in location horizontal menu */
.enhodw {
	display: block;
	font-size: 12px;
	font-weight: bold;
	float: none;
}

/* don't display the span containing ":" - but let the spans inside links visible */
.enhodw span:not(.enho) {display: none;}

/* unless enhodw is hover */
.enhodw.hover span:not(.enho) {display: inline;}

/* display the arrow img */
.enhodw img {display: inline;}

/* unless enhodw is hover */
.enhodw.hover img {display: none;}

.enhodw.hover {
	display: table-row;
	/*float: none;*/
	text-align: left;
}

/* enhod are visible only on enhodw hover */
.enhod {display: none;}

.enhodw.hover .enhod {
	display: inline; /* in small.css they are made block */
	margin-top: 3px;
}








/* explain search more div */
#e_s_m {
	/*display: none;*/
}



/* the big picture smaller */
.nb {
	max-width: 100%;
}

/* if there are leftovers from the horizontal menu then do not shift to the right the content */
.wd, .wdpg {
	clear: left;
}

/* login 2 in location.display.vertical.navigation.tpl - visible only in small.css and medium.css because login div is hidden there */
.login_2 {
	display: block;
}









.bottom {
	background: #333333;
	padding: 10px 0 10px;
	/* next two lines needed to eliminate a strange 1px line on top of the .bottom div on my Meizu */
	/*position: relative;
	top: -1px;*/
}



.notinmedium {display: none !important;}




#payment_iframe {
	min-width: 500px;
}



.warn_down {
	margin: 200px 10px 50px;
}



#lsm select {
	background-color: unset;
	border: none;
}

#sort_select:hover {
	background-color: unset;
}