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

	VERSION 1.4.2
	Created by: Fey Xiang (http://shackl3d.com)
	Development Date: November 17th, 2012
	Release Date: November 15th, 2013
	Updated: ???
	
    // Table of Contents
    /// 1. Eric Meyer's CSS Reset: http://meyerweb.com/eric/tools/css/reset/
    /// 2. Elements
    /// 3. Typography
	/// 4. Forms
	/// 5. Global Selectors
	/// 6. Dreamselfy Generator
	/// 7. Modal
	
    ----------------------- */ 
    
/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     1. Eric Meyer's CSS Reset: http://meyerweb.com/eric/tools/css/reset/ 
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/ 
    
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     2. Elements (Headers, Links, Paragraphs, Lists, Images, etc.)
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/ 

	h1, h2, h3, h4, h5, h6 {
	color: #FE7B7F;
	line-height:2em;
	font-weight:700;
	}
	 
	a:link, a:visited{text-decoration:none; color: #EA797D;}
	a:hover{text-decoration:underline;}
	strong, b{font-weight:900;}
	 
	.left-text{text-align:left;}
	.centered{text-align:center;}
	.right-text{text-align:right;}
	.justify-text{text-align:justify;}
	.right{float:right;}
	
	p{margin-bottom:10px;}
	
	ul{list-style-type:disc; list-style-position:inside; margin-left:25px;}

	pre {width:100%; background:#ffc5c7;}

/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     3. Typography
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/

	h1{font-size:24px;}
	h2{font-size:20px;}
	h3{font-size:18px;}
	h4{font-size:18px;}
	h5{font-size:16px;}
	h6{font-size:14px;}

/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     4. Forms, PreCode, Definition Lists and Tables
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/

	label{display:block; margin-top:15px;}
	form, input, select, textarea, button{color:#4F5961;}
	
	input,textarea,select, a.button{
		border-radius:3px; 
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		background:#FFF; 
		border:1px solid #CCC; 
		outline:none;
	}
	
	input[type="text"], input[type="url"], input[type="email"], textarea{width:94%; max-width:450px;}
	input, button, select, textarea{padding:10px;}
	
	input[type="submit"],
	button, a.button{
		border:0;
		background:#FE7B7F;
		box-shadow:0 3px 0 0 #d95d62;
		-moz-box-shadow:0 3px 0 0 #d95d62;
		-webkit-box-shadow:0 3px 0 0 #d95d62;
		color:#FFF;	
		font-weight:700;
		padding:10px 12px;	
		position:relative;
		margin:0 10px 18px 0;
	}
	
	input[type="submit"]:hover,
	button:hover, a:hover.button{
		background-color:#F27176;
		text-decoration:none;
		cursor:pointer;
	}
	
	button:active, input[type="submit"]:active, input.active, a:active.button {
		background-color:#F27176;
		box-shadow:0 2px 0 0 #d95d62;
		-moz-box-shadow:0 2px 0 0 #d95d62;
		-webkit-box-shadow:0 2px 0 0 #d95d62;
		bottom:-1px;
	}
	
	input[disabled], input[disabled]:hover, input[disabled]:visited, input[disabled]:active{
		background:#eee;
		color:#a5a5a5;
		box-shadow:0 2px 0 0 #a5a5a5;
		-moz-box-shadow:0 2px 0 0 #a5a5a5;
		-webkit-box-shadow:0 2px 0 0 #a5a5a5;
		bottom:-1px;
	}
	
	#submit{display:block;}
	
	form.contact p{margin-bottom:15px;}
	form span.no, form span.required{color:#ff3840; text-shadow:0 0 6px rgba(255,255,255,.8);}
	form span.textarea{position: relative; top: -20px; }

	input[type="submit"]:hover{cursor:pointer;}

	input[type="text"]:focus,
	input[type="url"]:focus,
	input[type="email"]:focus,
	textarea:focus{background-image: url('../img/data/grdt_top.png'); background-position: top center; background-repeat: repeat-x;}
	
	textarea { height: auto; display:  inline; margin:0; }
	
	pre, textarea{
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	
	input, button, a.button{
		-webkit-transition: all 0.1s ease;
		-moz-transition: all 0.1s ease;
		-ms-transition: all 0.1s ease;
		-o-transition: all 0.1s ease;
		transition: all 0.1s ease;
	
	}
	
	pre {margin:10px 0;}
		
	pre:hover{
		box-shadow:inset 0 0 40px rgba(255,255,255,.5);
		-moz-box-shadow:inset 0 0 40px rgba(255,255,255,.5);
		-webkit-box-shadow:inset 0 0 40px rgba(255,255,255,.5);
	}
	
	dt{font-weight:700;}
	
	table{
		width:100%;
		text-align:left;
		border-collapse: separate;
		border-spacing:8px;
	}
	
	table td, table th{padding:4px 10px;}
	table tr:nth-child(even){background:#EEE;}
	table thead{ 
		background: #FE7B7F;
		color: #FFF;
		font-size:14px;
		text-transform:capitalize;
	}

/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     5. Global Selectors
		 5.1. Elements
		 5.2. Header
		 5.3. Navigation
		 5.4. Content
		 5.5. Footer
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/


body {
    background:#81467c url('../img/data/body_bg.png');
    color:#4F5961;
    font:13px/22px 'Lato', 'Arial', sans-serif;
}

header {
		
	/* 
		background: #4a2762 url('../img/data/header_25122013.png') 105% 0% repeat-x; 
		background: #4a2762 url('../img/data/header_31122013.png') 105% 0% repeat-x;
		 background: #4a2762 url('../img/data/header_14122013.png') 105% 0% repeat-x; 
	*/

	background: #4a2762 url('../img/data/header.png') 105% 0% repeat-x; 

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	height: 255px;
	width: 100%;	
}

        #logo{ 		
			
		background:url('../img/data/logo.png') no-repeat;
		color:#FFF;
		display:block;
		height:147px;
		position:relative;
		top:21px;
		text-indent:-999999px;
		width:488px;
		
		}

nav{
	height: 50px;
	padding: 20px 0;
	background: #fff;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
	margin-bottom:25px;
}

	#topnav, #topnav ul{ 
        margin: 0;
		padding: 0;
		z-index: 1000;
     }
		
		#topnav li {
			float: left;
			margin: 0;
			padding: 0;
			position: relative;
			list-style: none;
		}
		
		#topnav > li {
			margin-right: 2px;
			padding-bottom: 5px;
		}
	
		#topnav li a { display: block; text-decoration: none; -o-transition: all .15s ease-out; -moz-transition: all .15s ease-out; -webkit-transition: all .15s ease-out; transition: all .15s ease-in-out;}
		#topnav > li > a { line-height: 50px; padding: 0 18px; border-radius: 5px; font-size: 14px; font-weight: 600; color: #555F67;}
		#topnav > li > a.active { background-color: #FE7B7F; color: #fff;}
		#topnav > li:hover > a { background-color: #FE7B7F; color: #fff;}

	.wrapper{
		max-width:1015px;    
		width:98%;
		margin:0 auto;
		}
	
	.content{ 
		padding:15px;
		background:#FFF;
		margin-bottom:40px;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
		position:relative;
	}
  
	.contact{ 
		background-image: url('../img/data/contactbg.png');
		background-repeat:no-repeat; 
		background-position: 100% 0;
	}

	
footer {
	background: #4a2762;
	padding: 30px 0;
	color: #bbb;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}


/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     6. Dreamselfy Generator
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/  


.s1, .left{float:left;}
.s2, .right{float:right;}
.s3{margin:0 auto;}
.s3 img{display:block;}
.center{text-align:center;}
.clear{clear:both;}
.block{display:block;}
.hidden{display:none;}

ul.updates{margin:15px auto;}
ul.updates li{
    background:#FFF; 
    box-shadow:0 0 3px 0 rgba(0,0,0,.12); 
    -moz-box-shadow:0 0 3px 0 rgba(0,0,0,.12); 
    -webkit-box-shadow:0 0 3px 0 rgba(0,0,0,.12); 
    width:96%; 
    padding:10px; 
    margin: 5px auto;
}

.cp{margin-top:5px;}

.notice{
    margin:0 auto; 
    background:#2ec128; 
    border:1px solid #15922a; 
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
    -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
    -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
    padding:4px 6px; 
    margin:0 0 8px;
    color:#FFF;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    position:relative;}
    
    .canvas #equipped .notice{margin: 0 0 8px; color:#666; background:#FBFBFB; border:1px solid #CCC;}
    
    .notice a.close{
        position:absolute; 
        top:6px; 
        right:8px;
        display:block;
        font-weight:700;
        color:#666;
    }

.canvas{ margin:0 auto 45px; width:1015px; position:relative; clear:both;}
.canvas ul{list-style-type:none;}


.count, .version{
	background:rgba(98,53,108,.35);
	float:right;
	display:inline-block;
	color:#eee;
	box-shadow:inset 0 0 10px 0 rgba(0,0,0,.35);
	border-radius:32px;
	border:1px solid rgba(0,0,0,.2);
	padding:8px 28px;
}

.version{float:left;}

.canvas #equipped, .canvas #selfy, .canvas #inventory{
    background:#EEE;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    box-shadow:0 2px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0 2px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0 2px 3px rgba(0, 0, 0, 0.5);
    float:left;
    margin: 28px 5px 0;
    padding:12px;
	min-height:500px;
    position:relative;
	z-index:5;
}

.canvas #inventory{float:right; margin-right:0;}
.canvas #equipped {margin-left:0;}

#equipped{margin-left:0; width:238px;}
     #equipped .reset {left:0; right:0;}
     #equipped ul.row{display:block; margin:0 0 3px;}
     #equipped ul.row li{display:inline-block; padding:0; margin:0 5px 0 0;}
     #equipped ul.row li:last-child{margin-right:0;}
    #equipped ul img{
		background:#fbfbfb;
		border:1px solid #ccc;
		height:70px;
		padding:1px; 
		position:relative;
		width:70px;
	}

.canvas #selfy{max-width:235px; width:235px;}

	.canvas .skin{margin:5px auto 0; text-align:center;} 
		.canvas .skin img{ 
             height:25px; 
             width:25px; 
             margin:0 1px; 
             border:2px solid #FFF;
			 box-shadow: 0 2px 0 0 #ababab;
			 -moz-box-shadow: 0 2px 0 0 #ababab;
			 -webkit-box-shadow: 0 2px 0 0 #ababab;
             border-radius:20px;
             -moz-border-radius:20px;
             -webkit-border-radius:20px;
			 -moz-background-clip: content;
			 -webkit-background-clip: content-box;
			 background-clip: content-box;
		}
		.canvas .skin img:active, .canvas .skin img:focus{border-color:#F27176;}
    
	.canvas #selfy .save{margin:7px 0 5px;}
		.canvas #selfy .save a{
			display:block; text-align:center;
			font-weight:700;
			margin-right:0;
			font-size:16px;
			margin:0;
		}
		
	.canvas .button, .canvas .buttons, .canvas input[type="submit"]{
		font-family:'Open Sans', san-serif;
		text-shadow: 0 1px 0 rgba(0,0,0,.4);
		text-transform:uppercase;
	}
    
    .canvas #selfy .buttons {margin:15px auto 0; text-align:center;}
	.buttons{text-align:center;}
		.canvas .buttons a.button{display:inline-block; margin:0 5px;}
		.canvas #selfy .buttons .full{
		background:#975487;
		box-shadow:0 3px 0 0 #62356c;
		-moz-box-shadow:0 3px 0 0 #62356c;
		-webkit-box-shadow:0 3px 0 0 #62356c;
		}
		
		.canvas #selfy .buttons a:hover.full {background:#81467c;}
		.canvas #selfy .buttons a:active.full{
			box-shadow:0 2px 0 0 #62356c;
			-moz-box-shadow:0 2px 0 0 #62356c;
			-webkit-box-shadow:0 2px 0 0 #62356c;
		}
    
.canvas #inventory{margin-right:0; width:450px;}

	.canvas #inventory form.top{margin:0 auto 10px; overflow:hidden; text-align:center;}
		.canvas #inventory select, .canvas #inventory input{max-width:300px; padding:5px; margin:0;}
		
	
    .canvas #inventory ul{display:table-row; font:10px normal tahoma, helvetica, sans-serif;}
		.canvas #inventory ul.row {margin:0 auto 7px 0;  padding:0; display:table; width:100%; text-align:center;}
		.canvas #inventory ul.row li {display:table-cell; position:relative; max-width:80px; margin:0 4px;}
		.canvas #inventory ul.row li img{display:inline-block; background:#fbfbfb; width:75px; height:75px; border:1px solid #CCC; padding:1px;}
		.canvas #inventory ul.row span{display:block; line-height:12px;}
		
		.canvas #inventory ul.row li .shop-item{position:relative;}
		.canvas #inventory ul.row li .shop-item span.shop-info{display:block; position:absolute; top:4px; right:14px;
		}
		
		.canvas #inventory .controls .search{position:relative; top:2px;}
		
		.canvas #inventory ul.row li .shop-item span.shop-info a{ display:block; color:#FFF;
		background:rgba(0,0,0,.4); border-radius:20px; padding:0 5px;}
				
            .canvas #inventory .controls button{
                margin:0 5px 0 0;
				padding:5px;
				border-radius:3px;
				-moz-border-radius:3px;
				-webkit-border-radius:3px;
				border:2px solid #FFF;
				box-shadow: 0 2px 0 0 #ababab;
				-moz-box-shadow: 0 2px 0 0 #ababab;
				-webkit-box-shadow: 0 2px 0 0 #ababab;
            }
                .gc{color:#FFF; background-color:#2ec128; -webkit-background-clip: padding-box;}
                .cc{color:#FFF; background-color:#ff9f02; -webkit-background-clip: padding-box;}
        
		.canvas #inventory .controls{
			margin: 0 auto;
			text-align: center;
			display: block;
			position: relative;
			overflow: hidden;
		}
		
        .canvas #inventory .controls img { 
            height:25px; 
            width:25px; 
            margin:0 2px;            
            border-radius:6px;
            -moz-border-radius:6px;
            -webkit-border-radius:6px;
			border:2px solid #FFF;
			box-shadow: 0 2px 0 0 #ababab;
			 -moz-box-shadow: 0 2px 0 0 #ababab;
			 -webkit-box-shadow: 0 2px 0 0 #ababab;
        }
		
		.canvas .controls input[type="text"]{position:relative; display:inline-block; top:2px;}
		
		.canvas #inventory .controls a.selected img{border-color:#F27176;}
		
		.canvas a:hover.help{text-decoration:none; background-color:#26ade4;}
        
        .canvas #inventory .controls .nav{margin:8px 0;}
            .canvas #inventory .controls .nav a{
                display:inline-block; 
                line-height:23px; 
                font-weight:700;
                font-size:12px;
                background:#FFF;
                border:1px solid #CCC;
                color:#555;
                border-radius:4px;
				-moz-border-radius:4px;
				-webkit-border-radius:4px;
                padding:0 8px;
            }    
            
            .canvas #inventory .controls .nav a:hover{
                background:#F5F5F5;
                box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
                -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
                -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
            }


.canvas .tabs{position:absolute; top:50px; margin:0; padding:0; display:block !important;}
	.canvas .equipped {left:-50px;}
	.canvas .inventory{right:-50px;}
	.canvas ul.tabs li{margin:0; display:block; text-align:center;}	
	.canvas ul.tabs li a{
		background:#CCC; 
		box-shadow:2px 2px 0 2px #AAA;
		-moz-box-shadow:2px 2px 0 2px #AAA;
		-webkit-box-shadow:2px 2px 0 2px #AAA;
		color:#555;
		min-width:24px;
		min-height:24px;
		font-size:12px;
		padding:10px 13px;
		font-weight:900;
		display:block;
		position:relative;
		text-decoration:none;
		text-indent:-99999px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;

	}
	
	 .canvas  ul.equipped li a{
		box-shadow:2px 2px 0 2px #AAA;
		-moz-box-shadow:2px 2px 0 2px #AAA;
		-webkit-box-shadow:2px 2px 0 2px #AAA;
		-webkit-border-top-left-radius: 3px;
		-webkit-border-bottom-left-radius: 3px;
		-moz-border-radius-topleft: 3px;
		-moz-border-radius-bottomleft: 3px;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		padding-left:25px;
		}
				
		.canvas ul.inventory li a{ 
			-webkit-border-top-right-radius: 3px;
			-webkit-border-bottom-right-radius: 3px;
			-moz-border-radius-topright: 3px;
			-moz-border-radius-bottomright: 3px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			padding-right:25px;
		}
	
		.canvas ul.equipped li a.equip{
			background:#21b31c url('../img/data/shirt.png') 25% 50% no-repeat;
			box-shadow:0 4px 0 0 #3a952e, -2px 4px 5px 0 rgba(0,0,0,.5);
			text-indent:-999999px;
			z-index:5;
		}
		
		.canvas ul.equipped li a.help{
			background:#4dbce9 url('../img/data/help.png') 25% 50% no-repeat;
			box-shadow:0 4px 0 0 #4b9fc3, -2px 4px 5px 0 rgba(0,0,0,.5); 
			text-indent:-999999px;
			z-index:2;
		}
		
		.canvas ul.equipped li a.updates{
			background:#bbb url('../img/data/updates.png') 25% 50% no-repeat;
			box-shadow:0 4px 0 0 #999, -2px 4px 5px 0 rgba(0,0,0,.5);
			text-indent:-999999px;
			z-index:1;
		}
		
		.canvas ul.inventory li a.browse{
			background:#FE7B7F url('../img/data/search.png') 75% 50% no-repeat;
			text-indent:-9999px;
			box-shadow: 0 4px 0 0 #d95d62, 2px 4px 5px 0 rgba(0,0,0,.5);
			z-index:5;
		}
		
		.canvas ul.inventory li a.recent{
			background:#81467c url('../img/data/shirt_equip.png') 75% 50% no-repeat;
			text-indent:-9999px;
			box-shadow: 0 4px 0 0 #62356c, 2px 4px 5px 0 rgba(0,0,0,.5);
			z-index:2;
		}
		
		.canvas ul.inventory li a.atgames{
			background:#ff9100 url('../img/data/jptm.png') 75% 50% no-repeat;
			box-shadow:0 4px 0 0 #e87711, 2px 4px 5px 0 rgba(0,0,0,.5);
			z-index:1;
		}
		
		.canvas ul.inventory li a:hover, .canvas ul.inventory li a.selected{left:12px;}
		.canvas ul.equipped li a:hover, .canvas ul.equipped li a.selected{right:12px;}
		.canvas ul.equipped li a.selected, .canvas ul.inventory li a.selected{z-index:6;}
		
		
		input[type="submit"].large{display:block; width:100%; margin:5px 0; padding: 12px; margin-left:0; margin-right:0;}
		input[type="submit"].grey{background:#AAA; box-shadow: 0 3px 0 0 #999; -moz-box-shadow: 0 3px 0 0 #999; -webkit-box-shadow: 0 3px 0 0 #999;}
		
		
	#itemmsg{
		z-index: 9999;
	}
	
		#itemmsg .box{
  		background: #fff;
		border-radius: 3px;
		-moz-border-radius: 3px;
  		-webkit-border-radius: 3px;
  		box-shadow: 0 0 16px 0 rgba(0,0,0,.45);
  		-moz-box-shadow: 0 0 16px 0 rgba(0,0,0,.45);
  		-webkit-box-shadow: 0 0 16px 0 rgba(0,0,0,.45);
  		width:300px;
		overflow:hidden;
		}

		#itemmsg h4{background:#81467c; color:#FFF; padding:6px 0 4px;}
		#itemmsg .left img{margin:0 10px 10px -10px; border:1px solid #CCC;}

		#itemmsg .close a{
			font-size: 1.375em;
			line-height: 1;
			position: absolute;
			top: 0.5em;
			right: 0.6875em;
		}
	
	#msgbox li{list-style-type:none;}
	#msgbox li span.title{font-weight:bold;}
	#itemfull{}
	#iteminfo{}
		
/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     7. My Selfy Page
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/ 


	.fancy-bar{
		background: #FE7B7F url('../img/data/patt.png');
		box-shadow: 0 3px 0 0 #d95d62, 0 2px 3px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 3px 0 0 #d95d62, 0 2px 3px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0 3px 0 0 #d95d62, 0 2px 3px rgba(0, 0, 0, 0.5);
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		color: #FFF;
		font-weight: 700;
		padding:10px 0;
		text-shadow: 0 2px 0 #503136;
	}
	
	article .buttons{clear:both; text-align:center; margin:15px 0 15px -54px; }
	article .margin-reset{margin-left:-52px;}
	
	article.content{overflow:hidden;}
	
	article .col{
		width: 30% !important;
		float: left;
		padding: 1.62%;
		}
		
	article #equipped{margin:0 auto;}
	
	table input{padding:4px 8px;}
	table.ppg{
		text-align:left;
		border-collapse:collapse;
		border-spacing:0;
		line-height:20px;
		width:100%;
	}
	
	table.ppg td:nth-child(2n+1){font-weight:700; padding-left:0;}
	table.ppg tr:nth-child(even){background:none;}
		
	.comments-section{
		border-top:1px solid #ccc;
		margin-top:25px;
	}
	
	form.comment textarea{min-height:100px;}
/*
   :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
     7. Modal from ZURB Foundation Framework
   ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
*/ 

	.reveal-modal-bg {
	  position: fixed;
	  height: 100%;
	  width: 100%;
	  background: black;
	  background: rgba(0, 0, 0, 0.45);
	  z-index: 98;
	  display: none;
	  top: 0;
	  left: 0; }

	.reveal-modal {
	  visibility: hidden;
	  display: none;
	  position: absolute;
	  left: 50%;
	  z-index: 99;
	  height: auto;
	  margin-left: -40%;
	  width: 80%;
	  background-color: white;
	  padding: 1.25em;
	  border: solid 1px #666666;
	  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	  top: 50px; }
	  .reveal-modal .column,
	  .reveal-modal .columns {
		min-width: 0; }
	  .reveal-modal > :first-child {
		margin-top: 0; }
	  .reveal-modal > :last-child {
		margin-bottom: 0; }
	  .reveal-modal .close-reveal-modal {
		font-size: 1.375em;
		line-height: 1;
		position: absolute;
		top: 0.5em;
		right: 0.6875em;
		color: #aaaaaa;
		font-weight: bold;
		cursor: pointer; }

	@media only screen and (min-width: 768px) {
	  .reveal-modal {
		padding: 1.875em;
		top: 6.25em; }
		.reveal-modal.tiny {
		  margin-left: -15%;
		  width: 30%; }
		.reveal-modal.small {
		  margin-left: -20%;
		  width: 40%; }
		.reveal-modal.medium {
		  margin-left: -30%;
		  width: 60%; }
		.reveal-modal.large {
		  margin-left: -35%;
		  width: 70%; }
		.reveal-modal.xlarge {
		  margin-left: -47.5%;
		  width: 95%; } }
	@media print {
	  .reveal-modal {
		background: white !important; } }
	/* Foundation Joyride */
	.joyride-list {
	  display: none; }

	/* Default styles for the container */
	.joyride-tip-guide {
	  display: none;
	  position: absolute;
	  background: black;
	  color: white;
	  z-index: 101;
	  top: 0;
	  left: 2.5%;
	  font-family: inherit;
	  font-weight: normal;
	  width: 95%; }

	  /*====== SELFY MODAL ====== */
	  
		.selfy-modal{
			border-radius:6px;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			text-align:center;
			border:4px solid #503136;
			overflow: hidden;
		}
		
		.selfy-modal a:hover, #itemmsg .close a:hover{text-decoration:none;}
		.selfy-modal .close-reveal-modal, #itemmsg .close a{
			color: #FFF;
			background: #fe7b80;
			padding: 6px 10px;
			border-radius: 4px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
			box-shadow:0 3px 0 0 #d95d62;
			-moz-box-shadow:0 3px 0 0 #d95d62;
			-webkit-box-shadow:0 3px 0 0 #d95d62;
		}
		
			.selfy-modal dl{
				background:url('../img/data/patt.png');
				margin:0 auto;
				width: 100%;
				padding: 25px;
				margin: 0 0 -27px -24px;
				border-top: 4px dashed #503136;
				color: #FFF;
				text-shadow: 0 2px 0 #503136;
			}
			
			.selfy-modal input[type="text"]{border-color: rgba(139,12,3,.76);}
			
			
/*=========== 1024PX OPTIMIZATION ===============*/

@media screen and (max-width: 1230px){

.canvas #equipped, .canvas #selfy, .canvas #inventory{width:auto; padding:10px;}
.canvas #inventory select, .canvas #inventory input{max-width:250px;}

.canvas{width:980px;}

	.wrapper{
		max-width:1000px;
		font-size:0.98em;
	}
	
	.canvas #inventory{min-width:425px;}
	
	.canvas #inventory ul.row li img{width:65px; height:65px;}
	
	body{ 
		-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		transition: width 1s ease-in-out, left 1.5s ease-in-out;
	}
}



@media screen and (max-width: 1180px){

	input[type="submit"], button, a.button {padding:5px 9px;}
	
	.canvas{width:880px;}

	.wrapper{
		max-width:960px;
		font-size:0.98em;
	}

	.canvas .skin img, .canvas #inventory .controls img{width:20px; height:20px;}
	
	.canvas #equipped, .canvas #selfy, .canvas #inventory{width:auto; padding:6px; min-height:460px; margin:28px 8px 0;}
	
	
	#equipped ul img{width:60px; height:60px;}
	
	.canvas #selfy{width:auto; min-width:auto;}
	.canvas #inventory, .canvas #equipped{margin-left:0;margin-right:0;}
	.canvas #inventory{min-width:40px;}
	.canvas #inventory ul.row li img{width:60px; height:60px;}
	
	.canvas .inventory{right:-30px;}
	.canvas .equipped{left:-30px;}
	.canvas ul.tabs li a{padding:5px 8px;}
	.canvas ul.equipped li a{padding-left: 10px;}
	.canvas ul.inventory li a{padding-right:10px;}
	
	embed{width:220px; height:320px;}
	
	body{ 
		-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		-o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
		transition: width 1s ease-in-out, left 1.5s ease-in-out;
	}
	
}

/*=========== HOLIDAY : HALLOWEEN ===============*/


	header {
		/* background: #4a2762 url('http://dreamself.me/img/data/header_05102014.png') 105% 0% repeat-x; */
		position:relative;
	}	
	
	/*header .forest{
		background: url('http://dreamself.me/img/data/header_05102014_2.png') 105% 0% repeat-x; 
		animation: animatedBackground 90s linear infinite;
		-ms-animation: animatedBackground 90s linear infinite;
		-moz-animation: animatedBackground 90s linear infinite;
		-webkit-animation: animatedBackground 90s linear infinite;	
		height: 255px;
		width: 100%;	
		position:absolute;
		left:0; right:0;
		z-index:5;
	}*/
	
	a#logo{width:350px; height:80px;}
	
	a#moonmoon{
		background: url('http://dreamself.me/img/data/logo.png') -360px 0 no-repeat;
		display: block;
		height: 150px;
		position: relative;
		top: -59px;
		text-indent: -999999px;
		width: 140px;
		left: 360px;
	}