/*
    Reset all values.(mainly for browser problems
*/
*{margin:0;padding:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after{content:'';}

/*
	--	HTML behaviour and structure
*/

body
{
    color:#998773; 
    font-family:Georgia, Arial, Sans-Serif; 
	background:white;
	font-size:62.5%;
}

a
{
    color:#8d7455;
	text-decoration:none;
	outline: 0 none;
}
a:hover{color:#ed87b2;}

h1,h2,h3,h4,h5{color:#8e7356;font-family:Georgia, Arial, Sans-Serif;background:transparent;padding-bottom:1px;}
h1{	font-size:2.1em;font-size:22px;background: transparent url(../media/images/dottedBorder_lightbrown.gif) repeat-x left bottom;}
h2{	font-size:2.1em;}
h3{	font-size:1.5em;}
h4{	font-size:1.3em;}
h5{	font-size:1em;}

.validation
{
	color:#E673A0;
}

object{
	margin:0;
	padding:0;
	border:0 none;
	outline:0 none;
	font-size:0em;
}

/*
	This is	a wrapper for everyting on the page
	Usage		wrap EVERYTHING on the page with this

*/
#container{font-size:1.2em;margin:auto; width:900px;}
#top{}
#menu{}
#footer
{
	display:inline-block;
	width:100%;
	border-top:1px solid #967c61;
	text-align:left;
    clear:both;
    font-size:12px;
    padding:10px 0;
    margin:0px 0 0 0;
 
}
#footer p{float:left;}
#footer{color:#c6b6a3;}
#footer a:Link, #footer a:Active, #footer a:Visited{ color:#7E5F3D;margin-right:6px;text-decoration:underline;}
#footer .ftLegal a:Link, #footer .ftLegal a:Active, #footer .ftLegal a:Visited{ color:#c6b6a3;}

#footer a:hover, #footer .ftLegal a:hover{color:#ed87b2;}


/* BACKUP FOOTER

#footer
{
	text-align:center;
    clear:both;
    font-size:1.2em;
    margin:auto;
    padding:25px 0;
 
}

.ftLegal{color:#c6b6a3;}
.ftLegal a:Link, .ftLegal a:Active, .ftLegal a:Visited{ color:#c6b6a3;margin-left:8px;}
.ftLegal a:hover{color:#ed87b2;}

*/

div#content{width:100%;float:left;}
div#pageTop{display:inline-block;width:100%; clear:both;margin-top:7px;}
div#pageTop .columnWide{margin:0;}
div.columnWide{float:left;width:623px;height:100%;margin-top:8px;}
div.column{float:left;margin-left:26px;width:250px;height:100%;}
div.stackedContainer{clear:both;width:100%;margin:0;padding:0;}


div.getintouch .column
{
	margin-left:0px;
}
/*
	--	Components
*/

/*
	This is: 	a component with rounded corners consisting of, mainly, a header and a message
	Usage: 	extend this set of classes when creating new puffs
	Markup:
	
<div class="puff">
	<span class="topLeft"></span>
	<span class="topRight"></span>
	<span class="bottomLeft"></span>
	<span class="bottomRight"></span>
	<div class="contentWrapper">
		<div class="header">
			<h2>puff</h2>
		</div>
		<div class="message">
			<p>message</p>
		</div>
	</div>
</div>
*/
div.puff{position:relative;display:inline-block;width:250px;min-height:40px;background:#dbeaf3;overflow:hidden;}
.getintouch div.puff{position:relative;display:inline-block;width:265px;min-height:40px;background:#dbeaf3;}
.happenings div.puff{position:relative;display:inline-block;width:225px;min-height:40px;background:#dbeaf3;}
div.puff .contentWrapper{display:inline-block;margin:15px;}
div.puff .contentWrapper a{position:relative;z-index:11;color:#dd568c;}
div.puff .contentWrapper .header{background:transparent;color:#5d89a0;}
div.puff .contentWrapper .header h2{margin-top:-5px;width:100%;padding:0 0 3px;margin-bottom:8px;font-size:21px; font-family:inherit; 
								color:#5d89a0;background:transparent url(../media/images/dottedBorder_blue.gif) repeat-x scroll left bottom;}
div.puff .contentWrapper .message{background:transparent;}
div.puff .contentWrapper .message p{margin-bottom:0;font-family:inherit;background:transparent;}

div.puff.blue{background:#dbeaf3;color:#5F89A1;}
div.puff.green{background:#E3EEDD;color:#647F5C;}
div.puff.brown{background:#ECE9E2;color:#7E5F40;}

div.puff .contentWrapper a.blue{background:#dbeaf3;color:#5F89A1;}
div.puff .contentWrapper a.green{background:#E3EEDD;color:#647F5C;}
div.puff .contentWrapper a.brown{background:#ECE9E2;color:#7E5F40;}

div.puff .contentWrapper .header h2.brownSifr
{
	background:transparent url(../media/images/dottedBorder_brown.gif) repeat-x scroll left bottom;
}

div.puff .contentWrapper .header h2.greenSifr
{
	background:transparent url(../media/images/dottedBorder_green.gif) repeat-x scroll left bottom;
}
/*
	This is: 	a list item component with an image to the left
	Usage: 	extend this set of classes when creating  custom list items
*/

div.imgListItem{display:inline-block;overflow:visible;padding-bottom:11px;margin-bottom:8px;background:transparent url(../media/images/dottedBorder_brown.gif) repeat-x left bottom;}
div.imgListItem .content{}
div.imgListItem img{float:left;}
div.imgListItem .textWrapper{margin-top:6px;margin-left:15px;width:508px;float:left;}
div.imgListItem .textWrapper h4{letter-spacing:-0.01em;word-spacing:0.1em;}
div.imgListItem .textWrapper p{margin-top:4px;letter-spacing:-0.04em;word-spacing:0.07em;}

/*
	This is 	a paging component
	Usage		--
*/

.pagingBottom{background-color:#F4F3EF;color:#A28E75;float:left;font-size:1em;height:32px;width:900px;}
.pagingBottom p{margin-top:8px;margin-left:10px;}
.pagingBottom a{color:#D9CFC3;}
.pagingBottom a.active{color:#8E7356;}

div.pagingWide{background-color:#F4F3EF;color:#A28E75;float:left;font-size:1em;height:32px;width:900px;}
div.pagingWide p {margin-top:8px;margin-left:10px;}
div.pagingWide p a {color:#8E7356;margin:0px 3px 0px 3px}
div.pagingWide p a.active{color:#D9CFC3;}
/*
div.pagingWide p a {color:#D9CFC3;margin:0px 3px 0px 3px}
div.pagingWide p a.active{color:#8E7356;}
*/
/*
	This is:	a bar to represent a product in a list
	Usage:	
*/

div.productRepresentationBar{margin-bottom:10px;display:inline-block;width:100%;}
div.productRepresentationBar .panel{position:relative;display:block;float:left;background:#f4f3ef;width:813px;height:29px;}
div.productRepresentationBar .panel input{font-family:Georgia, Arial, sans-serif;float:left;text-align:right;color:#967c61;margin-top:4px;margin-left:9px;width:30px;height:19px;border:1px solid #b2aba3;}
div.productRepresentationBar .panel span{margin-top:8px;height:19px;}
div.productRepresentationBar .panel .product{margin-left:12px;}
div.productRepresentationBar .panel .currency{display:block;float:left;margin-right:12px;text-align:left;}
div.productRepresentationBar .panel .price{display:block;float:left;margin-right:3px;width:100px;text-align:right;}

div.productRepresentationBar .panel .quantity{position:relative;padding-bottom:3px;display:block;float:left;}/*margin-right:46px;*/

div.productRepresentationBar a {float:right;}
div.productRepresentationBar a img{float:right;}

/*
	This is:	a styled form which looks like a paper
	
*/

fieldset.paperForm{position:relative;width:549px;height:282px;border:0;color:#7e5f3d;background:#fdfeff url(../media/images/formPaperBg.jpg) no-repeat left top}
fieldset.confirmed{background:#fdfeff url(../media/images/formPaperBg_confirmed.jpg) no-repeat left top}

fieldset.paperForm input{padding:4px 8px 5px 4px;font-family:Georgia, Arial, sans-serif;font-size:1em;color:#7e5f3d;border:0;position:absolute;width:235px;background:transparent;}
fieldset.paperForm p{position:absolute;}
fieldset.paperForm .inactive{color:#c6b6a3}
fieldset.paperForm #terms{position:absolute;font-size:1em}
fieldset.paperForm #terms .checkbox a{display:inline-block;margin-right:6px;margin-top:3px;width:14px;height:14px;background:transparent url(../media/images/shop_checkBox.gif) no-repeat;}
fieldset.paperForm #terms .checked a{background:transparent url(../media/images/shop_checkBox.gif) no-repeat 0 -14px}

fieldset.paperForm #terms .checkbox2{display:inline-block;margin-right:6px;margin-top:3px;width:14px;height:14px;background:transparent url(../media/images/shop_checkBox.gif) no-repeat;}


fieldset.paperForm #countryInfo{position:absolute;}
fieldset.paperForm input.validationFailed {background-color:#FAE4ED;}

/*
	This is	an article component consisting of a preamble and a paragraph with inline pictures
	Usage		place inside a .columnWide or margins have to be fixed
*/
div.article{}
div.article .preamble{margin-bottom:6px;}
div.article .paragraph h2{line-height:1em;float:left;font-size:21px;margin-top:5px;}
div.article .paragraph{line-height:1.28em; margin-bottom:7px;}
div.article .paragraph p{display:block;margin-bottom:12px;/*margin-left:4em;*/}
div.article .paragraph p span{display:inline-block;width:4em;}

div.article .pLeftImg{float:left;margin:18px 18px 18px 0;}
/*div.article .pRightImg{float:right;margin:18px 0px 18px 18px;EditMenuName:AlignLeft;}*/
div.article .pRightImg{float:right;margin:18px 0px 18px 18px;}





/*
	--	Commonly used classes
*/
/*
	This is:	A clickable area which covers an entire container at z-index 10
	Usage:	place html inside a RELATIVE positioned container to make it clickable
*/

a.click100{
	position:absolute;
	z-index:10;
	left:0;
	top:0;
	font-size:1px;
	line-height:1px;
	width:100%;
	height:100%;
	background:transparent;
	color:inherit;
	outline:0 none;
}

/*
	This is:	general settings for rounded corners
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.topLeft,span.topRight,span.bottomLeft,span.bottomRight{position:absolute;width:8px; height:8px;border:0 none;z-index:2;font-size:1px;overflow:hidden;}
/*
	This is:	a rounded corner
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.topLeft{
	top:0;
	left:0;
	background:transparent url(../media/images/corner_top_left.gif) top left no-repeat;
	
}

/*
	This is:	a rounded corner
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.topRight{
	top:0;
	right:0;
	background:transparent url(../media/images/corner_top_right.gif) top right no-repeat;
}

/*
	This is:	a rounded corner
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.bottomLeft{
	bottom:0;
	left:0;
	background:transparent url(../media/images/corner_bottom_left.gif) bottom left no-repeat;
	/*border:1px solid black;*/
}

/*
	This is:	a rounded corner
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.bottomRight{
	bottom:0;
	right:0;	
	background:transparent url(../media/images/corner_bottom_right.gif) bottom right no-repeat;
	
	
}

/*
	This is:	an extension of the regular rounded corners that makes them smaller (3x3px)
	Usage:	place html inside a RELATIVE positioned container to get rounded corners
*/

span.topLeftSmall,span.topRightSmall,span.bottomLeftSmall,span.bottomRightSmall{position:absolute;width:3px; height:3px;border:0 none;z-index:2;font-size:1px;overflow:hidden;}
span.topLeftSmall{top:0;left:0;background:transparent url(../media/images/corner_top_left_small.gif) top left no-repeat;}
span.topRightSmall{top:0;right:0;background:transparent url(../media/images/corner_top_right_small.gif) top right no-repeat;}
span.bottomLeftSmall{bottom:0;left:0;background:transparent url(../media/images/corner_bottom_left_small.gif) bottom left no-repeat;}
span.bottomRightSmall{bottom:0;right:0;background:transparent url(../media/images/corner_bottom_right_small.gif) bottom right no-repeat;}

div.enlImgWrapper{width:270px;height:200px;}
a.enlargeImg{float:right;text-decoration:none;padding-right:20px;margin-top:4px;margin-right:4px;background:transparent url(../media/images/enlGlass.gif) right top no-repeat;}

span.enlargeImg{float:right;text-decoration:none;padding-right:20px;margin-top:4px;margin-right:4px;background:transparent url(../media/images/enlGlass.gif) right top no-repeat;}

/*
	--	Classes that are used to overwrite default behaviour
*/

.alignRight{float:right;}
.alignLeft{float:left;}
.clearLeft{clear:left;}
.clearRight{clear:right;}
.clearBoth{clear:both;}


.green		{	color:#647f5c;	}
.lGreen		{	color:#9daf99;	}
.blue		{ 	color:#4f788e;	}
.lBlue		{	color:#a7c1d2;	}
.brown		{	color:#8e7356;	}
.lBrown		{	color:#c6b6a3;	}
.pink		{	color:#dd568c;	}

h1.borderLBrown,h2.borderLBrown,h3.borderLBrown,p.borderLBrown,
div.borderLBrown{background:transparent url(../media/images/dottedBorder_lightBrown.gif) repeat-x left bottom;}

h2.borderDBrown
{
    background:transparent url(../media/images/dottedBorder_brown.gif) repeat-x left bottom;
}

.underline
{
	text-decoration: none; 
	background: url('/media/images/underline.gif') repeat-x 0 100%;
	padding-bottom: 4px;
	white-space: nowrap;
	padding-right:5px;	
}

#milk
{
	cursor:pointer;
	display:none;
	/*visibility:hidden;*/
	opacity:0;
	background-color:white;
	z-index:100;
	position:fixed;
	left:0px;top:0px;
	width:100%;
	height:100%;
	
	/*filter: alpha(opacity = 0);*/
	filter: alpha(opacity = 0);
}

.hidden { display:none }

.offscreen { position:absolute; left:-2000px}

.thankyou
{
	padding:60px;
	background-image:url('/media/images/paperform_thankyou.jpg') !important;
	width:420px !important;
}

.thankyou div p { width:400px; }