/* Stadissa.fi responsive changes */

htlml, body { height: auto; }
body {  width: 100%; }


#container {
    max-width: 1078px;
    width: 100%;
    min-width: 100px;
	min-height: auto;
	position: relative;
}
.juhlaviikot img { width:100%; height:auto;  }

#headercontent {
	width: 100%;
	margin: 0;
	overflow:hidden;
	background-image:linear-gradient(260deg,#ad27cd,#ed843a);
}

.headerLeft {float:left; width: 360px;}
#headernavigator { width: auto; max-width: 100px; }

.headerRight { float: right; }

#headerlogo2 { 
		 margin-left: 25px;
		 margin-top: 3px;
		 width: 185px;
		 height: 20px;
		 background-size: 155%;  }
.toppickswrapper{ float: right; margin-left: 0;  margin-top:0; }
.toplistcontent {  margin-right: 15px; }
.toplist {  
    margin-right: 5px;
    margin-top: 3px;}

.search { margin-left: 15px; margin-top: 10px;}
#EventPage #eventDescription img { width: 100%!important; max-width: 500px; }
/* Calendar content */
.mainwrapper { float: none; }

/* Web leveydet */
#calendarheader {width: 10.3%; float:left;}
.calendardatewrapper {width: 100%; float:left;}
.eventWrapper { width: 89.7%; float: left; }
#MainPage .wrapper { width: 85.3%; }
#GenericPage .wrapper,#SearchResults .wrapper { width: 82%; margin-right: 2px; }
#GenericPage #rightbar, #SearchResults #rightbar { width: 17.5%; }
#GenericPage p, .footerAds3 {width: 100%;}
.searchresultscontent {  width: 97.5%; }
.searchnavigator, .searchresultsfooterwrapper { width: 100%; }
.eventBlock { width: 24.7%; float: left; margin-right: 0.3%; padding-top: 0; padding-bottom: 2px; padding-left: 0; padding-right: 0; margin-left: 0; }
#rightbar { width: 14.7%; margin-left:0; }

/* Sisasivujen sivun leveydet */
#PlacePage .wrapper, #EventPage .wrapper { width: 83.5%;}
#PlacePage #rightbar, #EventPage #rightbar { width: 16%; }
#PlacePage .column, #EventPage .column { overflow: visible; }
#PlacePage .column.left, #PlacePage .column_left , #EventPage .column_left { width: 60%;}/* was 55% */
#PlacePage .column.right, #PlacePage .column_right, #EventPage .column_right { width: 33.5%;} /* was 37% */
#rightbar .rightwrapper {position:relative;}
#EventPage #eventImage img { max-width: 95%; }
/* \Event sivun leveydet */

.calendarday { margin-top: 0; 
margin-bottom: 5px; }

/* 1.solu  */
/* Date & time */

.minicalendarwrapper { width: auto !important;}
.calendardatewrapper.today { width: 100%; margin-top: 0; padding-bottom:0; }
.calendardate { width: auto !important; margin-right: 1px; height: 98%;}
/* 2-4 solut */
/* events */
/* category headers */
.calendarday, .categoryheader { width: 100%; }
.categoryheader { margin: 0; background: #7b7b7b  } 
.categoryheader:after {clear: both;}
.minicalendar, .minicalendar input{ width: 97%; font-size: 0.8em; background-color:#858989;}
.miniSlize { background-color: #7b7b7bfc; height: 34px; }
.subcategoryheader,.subcategoryheader.last  { width: 100%; height: auto; margin-top: -1px; }

.calendarcontent,
.calendarcontent.last { width: 99.5%;  float: none; margin-right: 0;padding-left:0.5%; padding-right: 0; margin-left: 0; }

/* Calendar footer */
.categoryfootercalendar { width: 10.3%; }
.categoryfooter { width: 89.7%; float: left;  margin-left: 0;}
.banner img, .scaledImageFitWidth.img,
.uiScaledImageContainer,
._2p3a, .fb_iframe_widget span, #rightbar .google-ads { width: 100% !important;}
.webHide, .showPhone { display: none;}
.hideTablet, .hidePhone { display:block; }


#eventDescription div {
	text-overflow: ellipsis;
}



.mce-content-body img {
  max-width: 100%;
  height: auto;
}




/* Tablet koko */

@media (max-width: 980px) {
    .headerLeft .toplist { width: 120px; }
    .headerLeft { width: 160px; }
	.headerRight { margin-top: 10px; }
    #headernavigator { display: none; }
    #headerlogo { 
     margin-top: 10px; margin-left: 15px;
     width: 90%; height: auto;
     background-size: 100%;
    }
    #headerlogo a { height: 30px; }
    #headerlogo2 {
		 margin-left: 15px;
		 margin-top: 2px;
		 width: 145px;
		 height: 20px;
		 background-size: 155%; }
    .search {width: 130px; margin-left: 15px; margin-top: 10px; padding-right: 5px;}
	.search input#search { width: 80px; }	
	.headerRight .toppickswrapper { float: left; margin-top: 0; margin-right: 30px; min-height: auto;}
	.headerRight .toplistcontent { height: auto; padding:5px; text-shadow: 0 0 16px;}
	.noClearWeb {display:none;}
	.toppickswrapper #topPlaces {
		width: 250px;  margin-top: 2px;	
	}
	.toplistcontent ol {
   		 margin-left: 0;
   		 padding: 0;
	}
	.toppickswrapper #topEvents {
	    margin-left: 0;
	    margin-top: 2px;
	    min-height: auto;
	    width: auto;
	}
	#topPlaces.toplist, #topEvents.toplist { margin-right: 0; max-width: 260px; }
	.headerRight #headerlinks { margin-top: 4px; margin-right: 20px;}
	.webHide, span.headerlink { display: block; }
	span.headerlink {margin: 0 3px 0 5px; }	
	.calendardatewrapper { min-height: 50px; }
	.calendarcontent, .calendarcontent.today { min-height: 20px; }
	.calendardate.today {height: auto !important; }
	.calendarcontent, .calendarcontent.last {overflow:hidden; }
	#calendarfooter .calendardatewrapper { width: 99.6%; float:left; }	
	.minicalendarwrapper { background-color: transparent; }
	.miniSlize { display:none; }
	/* PVM tablet size */
	.calendarday { position: relative; }
	.calendardate { width: 10.3% !important; height: auto !important;position: absolute; top: 0; bottom: 0; border:1px solid #222;}
	.calendardate.today { top: 31px;}
	.hideTablet { display:none; }
	 
 /* Tab/iPad palstaleveydet */
	#calendarheader, .calendardatewrapper {width: 12.3%; }
	#calendarheader .calendardatewrapper {background-color: transparent; }
	.eventWrapper { width: 87.7%; }
	#MainPage .wrapper { width: 82.5%;}
	.eventBlock {width: 49.4%; margin-right: 0.4%; background: url(/images/calendar_gradient.png) 100% 0% repeat-y; background-color: #F8F9F8;}
	#rightbar {width: 17.5%;} 
	 
	#GenericPage .wrapper,#SearchResults .wrapper { width: 80%;}
	#GenericPage #rightbar ,#SearchResults #rightbar{width: 19%;}
	#PlacePage .wrapper, #EventPage .wrapper  { width: 72%;}
	#PlacePage #rightbar, #EventPage #rightbar {width: 19.5%;}
	#PlacePage .column.left, #PlacePage .column_left, #EventPage .column_left {width: 96%;}
    #PlacePage .column.right, #PlacePage .column_right, #EventPage .column_right {  width: 96%;} 
    #PlacePage .ads, #EventPage .ads { width: 100%;}
    #PlacePage .column.left { min-height: auto; }
}

@media (max-width: 843px) {
	.toppickswrapper #topPlaces { display:none; }
	#topEvents.toplist { max-width: 280px; }
}

/* Mobiilikoko */

@media (max-width: 768px) {
	.headerRight #headerlinks { margin-right:10px;}
	.calendardatewrapper { min-height: 50px; height: 50px !important; width: 100%; }
	.calendardate.today { height: 50px !important;min-height: 50px;}
	.calendardate  {width: auto !important; position: relative; height: 37px !important;min-height: 37px; top: auto; bottom: auto;}
	.calendardate.today { top: 0;}
	.calendardatewrapper.today { min-height: 60px;}
	.calendarcontent.today,  .calendarcontent, .calendarcontent.last { height: auto !important;}
	.calendardatewrapper, .eventWrapper  { display: block; width: 100%; float: none; }
	.minicalendarwrapper { float: none; }
	.minicalendar, .minicalendar input { width: 99.5%; }
	.calendardate .day { font-size: 12px; display: inline; }
	.calendardate .weekday, .calendardate .month, .calendardate .year { display: inline; }
	#MainPage .calendarevent {line-height: 10px;}
	
	.calendardate .today, .calendardate .weekday,.calendardate .month,.calendardate .year,.calendardate .day,
	#MainPage .calendareventtitle { font-size: 16px; }
	.minicalendar input { font-size: 14px; }
	.categoryfootercalendar { width: auto; }
	
	/* Mobiili palstaleveydet */
    #calendarheader, .calendardatewrapper {width: 100%; }
	#MainPage .wrapper,#PlazaPage .wrapper,  #EventPage .wrapper  { width: 76.25%;}
	.eventBlock { width: 100%; background-image: none; background-color: transparent;}
	#rightbar {width: 23.75%;}
	.calendarday, .categoryheader { width: 99.5%; }
	#GenericPage .wrapper, #SearchResults .wrapper { width: 75%; }
	#GenericPage #rightbar  ,#SearchResults #rightbar { width: 24%; }
		
	#PlazaPage .wrapper, #EventPage .wrapper  { width: 73%;}
	#PlazaPage .wrapper, #EventPage #rightbar {width: 26%;}
	#EventPage #routeFinderForm input[type="text"] {width: 120px;}
	
	
	.mce-content-body img {
	max-width: 100%;
	height: auto;}

    
	.hidePhone { display:none; }
	.showPhone { display: block;}
}

@media (max-width: 615px) {
	.toplistcontent {  margin-right: 0; }
	#GenericPage .wrapper{ width: 73%; }
	#GenericPage #rightbar { width: 25.5%; }
}
@media (max-width: 557px) {
	.headerRight #headerlinks {display: none; }
}

@media (max-width: 445px) {
	#topEvents.toplist {
		font-size: 11px;
		max-height: 110px;
		overflow-y: scroll;
		overflow-x: hidden;
		max-width: 100%;
	}
	.headerLeft {display: block; }
	
	#headerlogo2 {display: none; }
	
	.search { max-width: 110px; }
	.headerLeft .toplist { max-width: 100px; }
	.search input#search { width: 40px; }
	#headerlogo, #headerlogo2,.search { margin-left: 5px; }
	.toplistcontent li { margin: 3px 0;}
	.calendardate .today, .calendardate .weekday,.calendardate .month,.calendardate .year,.calendardate .day,
	#MainPage .calendareventtitle { 
		font-size: 14px; 
		margin-right: 0.5em;
		margin-bottom: 0.5em;
	}
	
	 .headerLeft #headerlogo a {
        height: 24px; /* smaller logo */
        display: block; /* logo is displayed */
        margin: 0 auto; /* Center */
    }
	
	.calendareventtime {
		margin-right: 0.5em;
		margin-bottom: 0.2em;
	}
	#EventPage #eventTitle h1, #PlacePage h1  {font-size: 20px;}
	#EventPage .wrapper,#PlacePage .wrapper { border-color: transparent;}
	#EventPage .column.left, #PlacePage .column.left, #EventPage .wrapper,#PlacePage .wrapper { border-color: transparent;}
	#PlacePage #placeImages, #PlacePage #map, #EventPage #map, #sharethis iframe { width: 280px!important; }	
}

/* Breakpoints for Medium Devices (e.g., most smartphones) */
@media (max-width: 420px) {
	.headerLeft { width: 100px; }
}

@media (max-width: 380px) {
	/*.headerRight { display: none; }*/
	.headerRight { max-width: 170px; }
	.headerLeft { width: 150px; }
	.search { max-width: 150px; }
	#headerlogo { max-height: 23px; }
	
}

@media (max-width: 322px) {
	.headerRight { display: none; }
	
}

/* phone fixes */
@media only screen 
and (min-device-width : 366px) 
and (max-device-width : 445px) 
and (orientation : portrait) {
	#topEvents.toplist {
			font-size: 11px;
			max-height: 140px;
			overflow-y: scroll;
			overflow-x: hidden;
			max-width: 317px;
	}
	.toplistcontent li { margin: 3px 0;}
	.headerLeft { width: 120px; }
	#headerlogo2 { width: 115px; }
	.search { width: 70px; }
	.headerLeft .toplist { width: 100px; }
	.search input#search { width: 60px; }
	#headerlogo, #headerlogo2,.search { margin-left: 5px; }
	.calendardate .today, .calendardate .weekday,.calendardate .month,.calendardate .year,.calendardate .day,
	#MainPage .calendareventtitle { font-size: 14px; }
	#EventPage #eventTitle h1, #PlacePage h1  {font-size: 20px;}
	#EventPage .wrapper,#PlacePage .wrapper { border-color: transparent;}
	#EventPage .column.left,  #PlacePage .column.left, #EventPage .wrapper,#PlacePage .wrapper { border-color: transparent;}
	#PlacePage #placeImages, #PlacePage #map, #EventPage #map, #sharethis iframe { width: 280px!important; }
	
}

/* Uutiskirje */
/* uutiskirjeModal */

.tRight { 
	text-align: right; 
    position: fixed;
    bottom:2px;
	z-index:9;
    right: 2px;
}
#uutiskirjeModal {	
    display: none;
    position: fixed;
    z-index: 10;
	padding-top: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
/* Modal Content */
.modal-content {
    margin: auto;
    padding: 0 0 2px 0;
    width: 95%;
    height: 90%;
	max-height:750px;
    max-width: 800px;
}
@media (max-width: 768px) {
	.modal-content {
		height: 80%;
	}
}
/* The Close Button */
.suljeUutiskirje {
	font-size: 16px;
    padding: 5px 10px; 
	font-weight: bold;
	text-align: right;
}
.suljeUutiskirje:hover,
.suljeUutiskirje:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.text-right {
	text-align: right;
}

.tilausFrameDiv {
	width: 100%;
	height: 100%;
	background-color: #fefefe;
	border: 1px solid #889;

}

.tilausFrame {
	height:100%; width:100%;
}

.avaaUutiskirje{
    background: url('/ads/Tapahtumavinkit-nappi3.svg'); 
	border: 0;
	width: 256px;
	height: 32px;
	cursor: pointer; cursor: hand;
}


/* Flash-mainos */
.valo900 {
	display: none;
}
@media screen and (min-width: 900px) {
.valo900 {
	display: block;
	width: 980px;
	height: 400px;
	margin: 0 auto;
	}
}
.valo640 {
	display: none;
}
@media screen and (min-width:640px) and (max-width: 899px){
.valo640 {
	display: block;
	min-width: 640px;
	margin: 0 auto;
	}
}
.valo480 {
	display: none;
}
@media screen and (min-width:480px) and (max-width: 639px){
.valo480 {
	display: block;
	min-width: 480px;
	margin: 0 auto;
	}
}
.valo240 {
	display: none;
}
@media screen and (min-width:240px) and (max-width: 479px){
.valo240 {
	display: block;
	min-width: 240px;
	margin: 0 auto;
	}
}
/* \Flash-mainos */



@media screen and (min-width: 981px) {
.calendarday {
display: flex;
}
.calendardatewrapper {
height: calc(100% - 35px) !important;
}
.calendardate, .calendardate.rounded_all_3 {
height: 100% !important;
}
}