ppp@charset "utf-8";



/* CSS Document */


body {
	width: 100%;	
	height: 100%;
	/*background-image: url(pictures/bg2.gif);
	background-repeat: X-repeat;*/
	background-color: lightblue;
}

.maincontentBox {
	width: 1210px;
	height: auto;
	border-width: 0px;
	border-style: solid;
	border-color: none;
	background-color: lightgray;
	float: left;
	}

	/* ------- biggest top picture area -----*/

    .pictureboxBig {
	width: 1200px;
	height: 255px;
	background-image: url(pictures/liljavaaramainareabg.jpg);
	background-repeat: no-repeat;
	border-width: 0px;
	border-style: solid;
	border-color: black;
	background-color: white;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: gray;	
	}



	/*/* --------- biggest logo area ---------*/

	 .logoareaBig {
	width: 500px;
	height: 90px;

	/*background-image: url(pictures/icons/logo.gif);
	background-repeat: no-repeat;*/
	background-color: none;
	padding-left: 5px;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: gray;*/
	}

	/* ------- biggest logo area ends -------*/


	/* ---- biggest top picture area ends ---*/



	/* -------- medium picture area ---------*/ 



	.pictureboxMid {
	width:798px;
	height: 130px;
	background-image: url(pictures/mediumareabg.jpg);
	border-width: 0px;
	border-style: solid;
	border-color: yellow;
	background-color: black;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	font-style: normal;
	color: gray;
	display: none;
	}





	/* --------- medium logo area ---------*/



	 .logoareaMid {
	width: 500px;
	height: 90px;
	/*background-image: url(pictures/icons/logo.gif);
	background-repeat: no-repeat;*/
	background-color: none;
	padding-left: 5px;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: gray;*/
	}



	/* ------ medium logo area ends ------*/


	/* ----- medium picture area ends----*/



	/* ------- smallest picture area -------*/

	.pictureboxSmall {
	width: 396px;
	height: 90px;
	background-image: url(pictures/smallareabg.jpg);
	border-width: 0px;
	border-style: solid;
	border-color: black;
	background-color: black;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	font-style: normal;
	color: gray;
	display: none;
	}


	/* ------ smallest logo area ------*/

	 .logoareaSmall {
	width: 500px;
	height: 90px;
	/*background-image: url(pictures/icons/logo.gif);
	background-repeat: no-repeat;*/
	background-color: none;
	padding-left: 5px;
	
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: gray;*/
	}

	/* ------ smallest logo area ends ------*/

	/* ------all top picture areas end ----- */




	/* ----------- textboxes ------------ */	

	.boxExtra{/* Empty textbox*/ 
	height: 300px;
	width: 391px;
	background-color: white;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	line-height: 120%;
	color: #666666;
	text-align: left;
	float: left;
	display: none;
	}
	

.pagenumberBox{/* leftmost headerbox*/ 
	height: 30px;
	width: 390px;
	padding: 20px 12px 2px 2px;
	margin-top: 25px;
	margin-bottom: 22px;
	margin-left: 22px;
	background-color: white;
}

.pagenumberText{/* leftmost headerbox text*/ 
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 11px;
	font-style: bold;
	color: #7d158d;
	text-align: left;
}


	.boxLeft{/* leftmost textbox*/ 
	height: 280px;
	width: 390px;
	background-color: white;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 20px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	line-height: 120%;
	color: #888888;
	text-align: left;
	clear: left;
	float: left;
	display: none;
	}


.boxMiddle {/* Middle textbox */ 
	height: 280px;
	width: 390px;
	background-color: white;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	line-height: 120%;
	color: #888888;
	text-align: left;
	float: left;
	display: none;	
}







.boxRight {/* rightmost textbox */ 
	height: 280px;
	width: 390px;
	background-color: white;
	border-style: solid;
	border-width: 1px;
	border-color: white;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;	
	font-size: 12px;
	line-height: 120%;
	color: #888888;
	text-align: left;
	float: left;
	display: none;
}


	.boxExtra{/* Empty box for occupying space for tab screen*/ 
		height: 280px;
	width: 390px;
	background-color: white;
	border-style: solid;
	border-width: 0px;
	border-color: white;
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	padding-top: 2px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	line-height: 120%;
	color: #888888;
	text-align: left;
	display: none;
	}

.textBox {
	width: 350px; /*552px;*/
	height: auto;
	background: none; /*#E0E0E0;
	border-style: solid;
	border-width: 1px;
	border-top-style:solid;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	border-color: #C0C0C0;*/
	float: left;
	padding-left: 20px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 15px;
	margin-top: 8px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	color: #606060;
	text-align: left;
	border-radius: 5px 5px 5px 5px;	
}

	/* -------- textboxes end ---------*/
	
	
	/* -------- scaling image begins ---------*/
	
.responsive {
  max-width: 100%;
  height: auto;
}



/* -------- scaling image ends ---------*/





	/* ---------- linkboxes -----------*/

	a:hover, a:visited, a:link, a:active
	{
   	 text-decoration: none;
	}

	/* unvisited link */
	a:link {
    	color: darkgray;
	}

	/* visited link */
	a:visited {
    	color: red; /*lightgray;*/
	}

	/* mouse over link */
	a:hover {
    	color: hotpink;
	}

	.linkboxRight {
	width: 415px;
	height: 10px;
	border-width: 0px;
	border-style: solid;
	border-color: darkgray;
	background-color: white; /*#061679; #540D66;*/
	padding-top: 0px;
	padding-left: 2px;
margin-bottom: 22px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	float: left;
	display: none;
	}



	.linkboxMid {
	width: 415px;
	height: 10px;
	border-width: 0px;
	border-style: solid;
	border-color: darkgray;
	background-color: white; /*#061679; #540D66;*/
	padding-top: 0px;
	padding-left: 2px;
	margin-bottom: 22px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	float: left;
	display: none;
	}


	.linkboxLeft{
	width: 415px;
	height: 10px;
	border-width: 0px;
	border-style: solid;
	border-color: darkgray;
	background-color: white; /*#061679; #540D66;*/
	padding-top: 0px;
	padding-left: 2px;
	margin-bottom: 22px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	float: left;
	display: block;

	}


	/* --------- linkboxes end ---------*/





	/* ------------ footers -------------*/
	

	.footerRight {
	width: 386px;
	height: 110px;
	border-width: 0px;
	border-style: solid;
	border-color: black;
	background-color: #4E6F1A;
	padding-top: 15px;
	padding-left: 15px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: black;
	float: left;
	display: none;
	}


	.footerMid {
	width: 387px;
	height: 110px;
	border-width: 0px;
	border-style: solid;
	border-color: black;
	background-color: #4E6F1A;
	padding-top: 15px;
	padding-left: 15px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #8AB3CC;
	float: left;
	display: none;
	}


	.footerLeft{
	width: 387px;
	height: 110px;
	border-width: 0px;
	border-style: solid;
	border-color: black;
	background-color: #4E6F1A;
	padding-top: 15px;
	padding-left: 15px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size:12px;
	font-weight: bold;
	color: #8AB3CC;
	float: left;
		clear: left;
	}



	/* ------------ footers -------------*/

	
	.footertextBox {
	width: 170px;
	height: 70px;
	border-width: 0px;
	border-style: solid;
	border-color: none;
	background-color: #4E6F1A;
	padding-top: 15px;
	padding-left: 5px;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: black;
	float: left;
	display: inline-block;
	}

	/* ------------ footers end -------------*/



	/* ------------ header type face styles -------------*/



	.headerBlack{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: black;
	padding: 10px;
	float: left;
	}

	.headerGray{
	font-family: 'open sans condenced', 'open sans', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #606060;
	float: left;
	}



	

	.headerLightgray{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: lightgray;
	float: left;
	}


	.headerLightgray2{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: lightgray;
	float: left;
	}

	.headerWhite{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: white;
	float: left;
	}

	
	.header2White{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: white;
	float: left;
	}
	
	.header3White{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: white;
	float: left;
	}

	
	.sloganOrange{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	color: white; /*#FA6A00;*/
	float: right;
	position: absolute;
  	left: 258px;
   	top: 225px;

	}

	
	.sloganOrange2{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: white; /*#FA6A00;*/
	float: right;
	position: absolute;
    	left: 130px;
    	top: 116px;
	}

	/* ----------- header type face styles end ------------*/


	ul, ol, dl { 

	padding: 0;
	margin: 0;
	/*list-style-image: none;
	list-style-type: none;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #600;*/
	display: inline-block;	
}



h1, h2, h3, h4, h5, h6, {/* otsikkotekstikoot ja värit */
	color: white; /*harmaa*/
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 90%;/*tämä pienentää kaikki fonttikoot 20%:lla*/
	font-style: bold;
}
}

 p {/* perusteksti koko ja väri */ 
	color: black; /*#A0A0A0; harmaa*/
	font-size: 9px;
	font-style: normal; /*300;*/
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
}


.picturePosition{
	width:200px;
	height:150px;
	margin-right: 8px;
	margin-top: 8px;
	float: left;
    }

.aquapictPosition{
	width:300px;
	height:140px;
	margin-right: 8px;
	margin-top: 8px;
	float: left;
    }

.aquatextBox{
	width:265px;
	height:auto;
	background-color: none; /*#F2F2F2;'/
	padding-top: 8px;
	padding-right: 8px;
	padding-left: 8px;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2;
	float: left;
    }


.artPrice{
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 18px;
	font-style: bold;
	text-decoration: none;
	color: gray;
	float: left;
    }


.linkboxColor {
	width: 408px;
	height: 50px;
	margin-bottom: 20px;
	background-color: #541362;

}


.darkgray { 
 color : #f00; text-decoration : none;
}

.red { 
 color : #f00; text-decoration : none;
}
.green { 
 color : #0f0; text-decoration : none;
}
.blue { 
 color : #00f; text-decoration : none;
}



/*--------------------------------------------- */

/* dropmenu alkaa */



body {
	background: none;/*#212121;*/
	color: white; /*#ffffff;*/
	margin: 0;
	padding: 0;
	word-wrap:break-word !important;
	font-family: 'open sans', 'open sans condenced', Gill Sans, Gill Sans MT, Calibri, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 13px;
	}

p {
	text-align: left;
	font-weight: normal;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */

nav { 
	margin:0;
	padding: 0;
	background-color: gray; /*#254441;*/

}

 Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
and adding "position:reltive" */

nav ul {
	float: left;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	

/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: #540D66;
	}


/* Styling the links */
nav a {
	display:block;
	padding:6px 10px;	
	color:white; /*#FFF;*/
	font-size:12px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }



/* Background color change on Hover */
nav a:hover { 
	background-color: #9D1ABE; 
}


/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 10px; 
}
	

/* Display Dropdowns on Hover */

nav ul li:hover > ul {
	display:inherit;
}

/* Fisrt Tier Dropdown */

nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries

--------------------------------------------- */



@media all and (max-width : 360px) {

	nav {
		margin: 0;
	}

	.toggle + a,
	.menu {
		display: none;
	}

	.toggle {

		display: block;
		background-color: #254441; 
		padding: 6px 20px;	
		color: white; /*#FFF;*/
		font-size: 11px;
		text-decoration: none;
		border: none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}


	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}

	nav ul li ul li .toggle,
	nav ul ul a,

  nav ul ul ul a{
		padding: 6px 20px;	
		color:#FFF;
		font-size:12px; 
	}

	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: none; /*#212121;*/ 
	}


	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}	

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
	}
}

@media all and (max-width : 330px) {
	nav ul li {
		display:block;
		width: 94%;
	}
}



/*dropmenu loppuu*/















/*Markup:

<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>
*/

-----
-----
-----	
.red:link { 
 color : #f00; text-decoration : none;
}

.green:link { 
 color : #0f0; text-decoration : none;
}

.blue:link { 
 color : #00f; text-decoration : none;
}
*/