@charset "utf-8";

.cover { background-size:100% auto !important; }

.categories { margin:2rem auto; position:relative; }
.categories .category { position:relative; display:inline-block; vertical-align:middle; width:20%; height:6.5rem; background-size:100% auto !important; margin-top:2rem; cursor: pointer; }
.categories .category.alex { background:url(/images/2014/inbox/toggle-left.png) no-repeat; }
.categories .category.tampi { background:url(/images/2014/inbox/toggle-right.png) no-repeat; }
.categories .category:hover, .categories .category.selected { background-position:bottom; }
.categories .category p { position:relative; margin-top:0.7rem; }
.categories .category.selected p { margin-top:1rem; text-shadow: 1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,0px 1px 0 #fff,1px 0px 0 #fff,0px -1px 0 #fff,-1px 0px 0 #fff,1px 3px 7px #000; }
.categories .icon { width:10%; position:absolute; left:50%; top:3.5rem; margin-left:-5%; }
.categories .icon img { width:100%; max-width:700%; }

.character {  }
.character.selected { display:block; }
.wood { position:relative; margin:auto; background:url(/images/2014/about/sara/wood-holder-m.png) no-repeat; width:95%; height:12rem; z-index:3; }
.character .wood .line { position:absolute; height:10rem; border-right:1px dashed #592202; width:1%; top:6.5rem; }
.character .wood .line.left { left:30%; }
.character .wood .line.right { right:30%; }
.character .wood .line .bug { position:absolute; bottom:-1rem; width:500%; height:4.5rem; left:-180%; }
.character .wood .line.left .bug { background:url(/images/2014/bg/bug-partition-left.png) no-repeat; }
.character .wood .line.right .bug { background:url(/images/2014/bg/bug-partition-right.png) no-repeat; }

.image_box { position:relative; margin:2rem auto; background:url(/images/2014/bg/image-holder.png) no-repeat; width:60%; height:56rem; z-index:2; }
.image_box .label { background:url(/images/2014/about/sara/text-holder-01.png) no-repeat; width:35%; height:7rem; position:absolute; left:50%; margin-left:-17.5%; color:#9b0000; top:-1.5rem; text-align:center; }
.image_box .label p { position:relative; margin-top:1.5rem; }
.image_box .image { width: 100%; left: -0.8%; position: absolute; top: 7rem; }
.tampi .image_box .image { width:76%; left:7.8%; }

.wood_link { position:relative; }
/*.wood_link div { position:absolute; background:url(/images/2014/about/sara/holder-link.png) no-repeat; height:7rem; width:3%; top:-3.5rem; }*/
.wood_link div { position:absolute; width:3%; top:-3.5rem; }
.wood_link div.left { left:38%; }
.wood_link div.right { right:38%; }

.board { position:relative; width:90%; left:5%; margin-top:4rem; }
.board .label { position:absolute; background:url(/images/2014/about/sara/text-holder-02.png) no-repeat; width:50%; left:50%; margin-left:-25%; z-index:2; top:-2.2rem; color:#9b0000; text-align:center; }
.board .label p { margin-top: 1.8rem; }
.board .box { position:relative; width:100%; }
.board .box.top { background:url(/images/2014/about/sara/content-holder-top.png) no-repeat; height:7rem; }
.board .box.middle { background:url(/images/2014/about/sara/content-holder-middle.png) repeat-y; height:auto; }
.board .box.bottom { background:url(/images/2014/about/sara/content-holder-bottom.png) no-repeat; height:7rem; }
.board .content { width: 85%; left: 7.5%; position: relative; text-align: left; top: -1rem; overflow: hidden; }
.board .content p { margin:0 0 1rem 0; }
.board .content .details { border:1px dashed #592202; border-radius:2rem; margin:1rem auto 0 auto; background-color:#fff; }
.board .content .details .row { width:95%; position:relative; margin:0.7rem auto; }
.board .content .details .row div { position:relative; display:inline-block; vertical-align:top; }
.board .content .details .row .left { width:17%; }
.bm .board .content .details .row .left { width:25%; }
.board .content .details .row .colon { width:3%; }
.board .content .details .row .right { width:79%; }
.bm .board .content .details .row .right { width:70%; }
.board .content .details .row img { width: 40%; position: relative; top: -0.5rem; margin-right: 5%; }


@media only screen and (min-width: 480px) {
	.categories .category p { margin-top:1.3rem; }
	.categories .category.selected p { margin-top:1.5rem; }
	.character { text-align:left; }
	.top_thumb, .wood_link, .board { position:relative; display:inline-block; vertical-align:top; }
	.character .top_thumb { width:50%; margin-left:1%; }
	.character .wood { height:8.5rem; }
	.character .wood .line { top:3.5rem; height:8rem; }
	.character .wood .line.left { left:25%; }
	.character .wood .line.right { right:25%; }
	.character .wood .line .bug { height:2.5rem; }
	.image_box { width:80%; }
	.image_box .label { width:50%; height:7rem; margin-left:-25%; top:-3rem; }
	.image_box .label p { margin-top:1.9rem; }
	.image_box .image { top:5rem; }
	.image_box .image img, .wood_link img { max-width:800%; width:100%; }
	.wood_link { width:5%; left:-3%; }
	.wood_link div { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); width:100%; left:0% !important; }
	.wood_link div.left { top:15rem; }
	.wood_link div.right { top:33rem; }
	.board { width:45%; margin-left:-8%; }
	.board .box.top { height:3.5rem; }
	.board .label { width:70%; margin-left:-35%; }
	.board .label p { position:relative; margin-top:1.3rem; }
	.board .box .content { top:0; }
	.board .box .content .details .row .left { width:20%; }
	.board .box .content .details .row .right { width:77%; }
}

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

@media only screen and (min-width: 1025px) {
	.page_content .desktop { position:relative; width:905px; position:relative; margin:auto; }
	.wood { background-image:none; z-index:3; }
	.ladybug { position:absolute; margin-left: -17px; width: 944px; margin-top:0px; }
	.characters { width:990px; margin-top:-40px; margin-left:-43px; text-align:left; }
	.character { width:100%; height:auto; position:relative; display:inline-block; vertical-align:top; }
	.character.tampi { margin-left:-6px; }
	.image_box { width:364px; height:346px; display: inline-block; margin-left: 65px; }
	.image_box .label { width:145px; height:50px; margin-left:-72.5px; top:-18px; }
	.image_box .label p { margin-top:14px; }
	.image_box .image { width:356px; height:245px; top:48px; left:50%; margin-left:-180px; }
	.tampi .image_box .image { left:50%; margin-left:-153px; }
	.wood_link { width:100%; top:-27px }
	.wood_link div { width:18px; height:43px; top:0 !important; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); }
	.wood_link div.left { left:30% !important; }
	.wood_link div.right { left:70% !important; }
	.board { width:495px; margin-top:-6px; left:0; margin-left:0; }
	.board .label { width:265px; height:50px; margin-left:-133px; }
	.board .label p { margin-top:13px; }
	.board .box.middle { height:355px; }
	.character_info { display: inline-block; vertical-align: top; }
}