@import url('//fonts.googleapis.com/css?family=Droid+Sans:700,400');
	
.mrdeepay-outer {
	min-height: 400px;
	border: 1px solid transparent;
	background: url('bg.png') #191A1C;
	font: 13px/18px 'Droid Sans', sans-serif;
	color: #EEE;
	/* wow */ overflow: auto; /* http://stackoverflow.com/questions/1394724/css-margin-top-when-parents-got-no-border */
}
	
.mrdeepay-outer a:link {
	color: #CFA580;
	font-weight: bold;
	text-decoration: none;
}
.mrdeepay-outer a:visited {
	color: #CFA580;
}
.mrdeepay-outer a:hover {
	color: #E9B485;
	text-decoration: underline;
}
.mrdeepay-outer a:active {
	color: #E9B485;
	text-decoration: underline;
}
	
.mrdeepay-box {
	margin: 16px;
	border: 1px solid #727272;
	border-radius: 1px;
	background: url('box_shading.png') bottom repeat-x #444;
	box-shadow: 0 0 20px rgba(255,255,255,0.01), 0 3px 3px rgba(0,0,0,0.4);
}
.mrdeepay-box > h2 {
	background: url('h2_bg.png') no-repeat;
	margin: 8px 14px 6px 8px;
	padding-left: 24px;
	font-size: 18px;
	line-height: 20px;
}

.mrdeepay-box.main {
	margin-right: 262px;
}
.mrdeepay-box.side {
	float: right;
	width: 230px;
}
.mrdeepay-box.side > span {
	display: block;
	margin-right: 4px;
	background: url('toggle.png') center right no-repeat;
	cursor: pointer;
}
.mrdeepay-box.side > span > h2 {
	background: url('h2_bg.png') no-repeat;
	margin: 8px 14px 6px 8px;
	padding-left: 24px;
	font-size: 14px;
	line-height: 20px;
}

.mrdeepay-box.side .mrdeepay-content {
	height: 0;
	margin: 0;
	border: 0;
	padding: 0;
	overflow: hidden;
	-webkit-transition: all 150ms ease; /* Firefox */
	-moz-transition: all 150ms ease; /* WebKit */
	-o-transition: all 150ms ease; /* Opera */
	transition: all 150ms ease; /* Standard */
}

.mrdeepay-box.side:hover .mrdeepay-content {
	height: auto !important;
	margin: 0 4px 4px;
	border: 1px solid #666;
	padding: 16px 16px 30px;
	overflow: auto;
}

.mrdeepay-content {
	margin: 0 4px 4px;
	border: 1px solid #666;
	border-radius: 1px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3) inset;
	background: url('noise.png') #2A2A2A;
	padding: 16px 16px 30px;
}
	
.mrdeepay-content hr {
	width: 100%;
	margin: 16px auto;
	border-top: 1px solid #161616;
	border-right: none;
	border-bottom: 1px solid #4A4D51;
	border-left: none;
}	
	
.mrdeepay-content .quote,
.mrdeepay-content .code {
	margin: 12px 40px 0px;
	border: 1px solid #727272;
	border-radius: 1px;
}
.mrdeepay-content .quote {
	background-color: #595244;
}
.mrdeepay-content .quote .boxhead,
.mrdeepay-content .code .boxhead {
	display: block;
	margin: 4px 5px;
	font-size: 12px;
}
.mrdeepay-content .quote .boxhead {
	color: #C3BBAA;
}	
.mrdeepay-content .quote .box,
.mrdeepay-content .code .box {
	margin: 0 4px 4px;
	border: 1px solid #666;
	border-radius: 1px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3) inset;
	background-image: url('noise.png');
	padding: 16px 16px 30px;
	margin: 0 3px 3px;
	padding: 8px;
}
.mrdeepay-content .quote .box {
	background-color: #2A2A2A;
}

.mrdeepay-content .code {
	background-color: #525944;
}
.mrdeepay-content .code .boxhead {
	color: #BBC3AA;
}
.mrdeepay-content .code .box {
	display: block;
	margin: 0 3px 3px;
	max-height: 450px;
	background-color: #252A29;
	color: #99C377;
	overflow-y: auto;
}