@charset "utf-8";
a, a:hover { color:#592202 !important; }
.verdana { font-size:11px;}
.page_content { position:relative; }
.board { width:80%; position:relative; margin:15rem auto 0 auto; }
.top { background:url(/images/2014/about/join/content-holder-top.png) no-repeat; height:6.8rem; }
.middle { background:url(/images/2014/about/join/content-holder-middle.png) repeat-y; height:auto; min-height:5rem; }
.bottom { background:url(/images/2014/about/join/content-holder-bottom.png) no-repeat; height:7.5rem; }
.content { position:relative; margin:auto; width:80%; border:1px solid transparent; }
.benefits_btn { background:url(/images/2014/about/join/find-out-btn.png) no-repeat; width:100%; height:7.8rem; position:relative; margin:auto; margin-bottom:7rem; font-size:3rem; }
.benefits_btn:hover { background-position:bottom; }
.benefits_btn p { position:relative; top:2.3rem; left:5%; font-size: 10px;}

.label_box { background:url(/images/2014/about/join/header-holder.png) no-repeat; width:65%; height:11rem; color:#9b0000; position:absolute; top:-3.8rem; margin-left:17.5%; font-size:3rem; }
.label_box p { margin-top:2rem; }

.mushroom { background:url(/images/2014/about/join/mushroom-deco.png) no-repeat; width:90%; height:13rem; position:absolute; top:-9rem; margin-left:5%; }

.character { position:relative; display:inline-block; vertical-align:middle; }
.character.sara { background:url(/images/2014/about/join/sara-m.png) no-repeat; width:35%; height:31rem; left: -20%; top:-12rem; }
/*.character.tampi { background:url(/images/2014/about/join/tampi-m.png) no-repeat; width:43%; height:34rem; right:-9%; top:-14rem; }*/

/* mobile */
@media only screen and (max-width: 480px) {
	.bm .label_box { background:url(/images/2014/about/join/header-holder.png) no-repeat; width:80%; height:14rem; color:#9b0000; position:absolute; top:-3.8rem; margin-left:9.5%; font-size:3rem; }
	.bm .label_box p { margin-top:3rem; }
}

@media only screen and (max-width: 390px) {
	.en .benefits_btn p { font-size: 9px; }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1024px) {
	.board { width:600px; margin-top:100px; }
	.top { height:53px; }
	.bottom { height:62px; }
	.content p.first { margin-top:35px; }
	.label_box { font-size:1.5rem; top:-2.9rem; }
	.label_box p { position:relative; margin-top:23px; }
	.mushroom { top:-6.9rem; }
	.benefits_btn { width:395px; height:50px; cursor:pointer; margin-bottom:50px; font-size:1.3rem; font-weight: bold;}
	.benefits_btn p { top:15px; left:17px; font-size: 14px}
	.benefits_btn:hover p { top:16px; }

	.character { position:absolute; top:50px !important; }
	.character.sara { background:url(/images/2014/about/join/sara.png) no-repeat; width: 240px; height: 266px; left: 13px; }
	/*.character.tampi { background:url(/images/2014/about/join/tampi.png) no-repeat; width:289px; height:295px; right:-27px; }*/
	.verdana { font-size:1.5rem;}

}