@charset "utf-8";
/* Layout styles for Suomen Eläinfysioterapeutit web web site */

body{ 
	max-width: 1000px;
	min-width: 200px;
	text-align:center;
	margin: 0px auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

.bgImg{
	position: absolute;
	height:100%; /* Keep background height same as the content*/
	width:100%; /* Keep background width same as the body*/
}
.bgImg img{
	height:100%; /* Keep background height same as the content*/
}
/* Header ------------------------------------------------------------- */
#header{
	position:relative; /* The base position for Menus */
	width:100%;
	top:5px;
}
.narrowScreen{
	display:none;
}

/* Content ------------------------------------------------------------- */
#contentArea{
	position:relative; /* The base position for Menus */
	width:100%;
	height:900px;
}

/* Column structure ---------------------------------------------------- */
.column{
	top:0px;
	max-height:100%;
}
.mainColumn{
	height:100%; /* testi*/
	position:  relative;
}
#leftColumn{
	float:left;
	width:20%;
}
#mainColumnWide {
	width:100%;
}
#mainColumnNormal {
	width:80%;
}
#mainColumnNarrow {
	width:60%;
}
#rightColumn{
	float:right;
	width:20%;
}

/* Footer ------------------------------------------------------------- */
#footer{
	position:relative; /* The base position for footer texts */
	margin:0px auto;
	top:0px;
}
#footer .left{
	position:absolute; 
	top:0px;
	width:20%;
	float:left;
	text-align:left;
}
#footer .center{
	position:absolute; 
	top:1px;
	width:100%;
	float:left;
	text-align:center;
}
#footer .right{
	position:absolute; 
	top:0px;
	width:20%;
	float:right;
	text-align:right;
}

/* Defaults for all panes ------------------------------------------------- */
.pane{
	padding-left:15px;
	padding-right:15px;
	padding-top:8px;
	padding-bottom:8px;
	overflow:auto; /* Keep content within the height */
	width:100%;
	height:100%;
	min-height:200px;
}

/* iframes ---------------------------------------------------------------- */
.pane .iframe{
	width:100%;
	height:700px;
}
.flash .iframe{
	width:765px;
	margin:0px auto;
	height:570px;
}

/* Menus ------------------------------------------------------------------ */
.menu{
}
#languagemenu{
	position:absolute;  z-index:20; width: 100%;
}
#languagemenu button{
	width:5%;
	padding:2px;
}

#mainMenu{
	position:absolute;  z-index:20; width: 100%;
	bottom:10px;
}
#mainMenu button{
	height:100%;
	width:16%;
	padding:0px;
}

#leftMenu{
	margin-top:10px;
}
#leftMenu button{
	width:100%;
	text-align:left;
	padding-bottom:5px;
}
#rightMenu{
	margin-top:10px;
	margin-left:10px;
}
#rightMenu button{
	width:100%;
	white-space:normal;
	text-align: center;
}
#rightMenu .intro p{
	max-width:100%;
	height:auto;
	white-space:normal;
	text-align: center;
}

#videoIndex, #photoIndex{
	padding-left:15px;
	padding-right:15px;
	padding-top:8px;
	padding-bottom:8px;
	width:100%;
	height:100%;

}
#videoIndex .title, #photoIndex .title{
	color:#CCC;
	font-weight:bold;
	font-size:120%;
}

#videoIndex button, #photoIndex button{
	vertical-align:top;
	padding:2px;
	width:160px;
	color:#CCC;

}

#videoIndex img, #photoIndex img{
	width:auto;
	max-width:100%;
	height:90px;
	border:	2px ridge #D4D0C8;
}

/* Hide altLocation when wide screen  ------------------------------------------------- */
.altLocation{
	display:none;
}
.originalLocation{
}


@media all and (max-width: 640px) {
/* Hide original and display altLocation when narrow screen  --------------------------- */
.originalLocation{
	display:none;
}
.altLocation{
	display:inherit;
}
.wideScreen{
	display:none;
}
.narrowScreen{
	display:inline;
	width:90%;
}
#contentArea .narrowScreen img{
	min-height:800px;
	height:100%
}

#contentArea .narrowScreen .bgImg{
	width:100%;
	height:100%;
	
}

.column {
	height:100%;
}
#languagemenu button{
	width:8%;
}
#mainMenu{
}
#mainMenu button{
	width:30%;
}
#leftColumn,#rightColumn{
	float:none;
	padding-top:5px;
	padding-bottom:5px;
}
#leftMenu,#rightMenu{
	margin:0px auto;
}
#leftMenu button,#rightMenu button{
	width:100;
	text-align:center;
	vertical-align:top;
	
}
#footer {
}
#footer .center {
}
#footer .right, #footer .left {
}

	
}