/* wrapper backgrounds by Rob Garrison (aka Mottie) */
#wrapper {
	width: 800px;
	height: 430px;
	padding: 40px;
	margin: 0 auto;
}

/*************
 Glass
 *************/
#wrapper.glass {
	border: 1px solid rgba(0,0,0,0.5);
	-moz-border-radius: 10px 10px 2px 2px;
	-webkit-border-radius: 10px 10px 2px 2px;
	border-radius: 10px 10px 2px 2px;
	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

/*************
 Glowy backlight
 *************/
#wrapper.glowy {
	width: 80%;
	background: -moz-radial-gradient(50% 50%, farthest-side, #695750, #000);
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#695750), to(#000));
	background: gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#695750), to(#000));
}

/*************
 Paper
 curled corners from http://matthamm.com/box-shadow-curl.html
 *************/
#wrapper.paper {
	position: relative;
	background: #fff url(../images/bkgd-paper.jpg);
	border: 1px solid #cacfc5;
	height: 390px;
	padding: 40px;
	margin: 0 auto;
	-moz-border-radius:0;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.paper:before, .paper:after {
	content: '';
	z-index: -1;
	position: absolute;
	left: 23px;
	bottom: 13px;
	width: 70%;
	max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
	height: 55%;
	-webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
	box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
}
.paper:after {
	left: auto;
	right: 23px;
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
}

/*************
  Carbon fiber image
 *************/
#wrapper.carbonfiber {
	border: rgba(22,22,22,1) 2px solid;
	background-image: -moz-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-carbon-fiber.gif);
	background-image: -webkit-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-carbon-fiber.gif);
	background-image: repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-carbon-fiber.gif);
}

.as-oldie #wrapper.carbonfiber {
	border: rgb(22,22,22) 2px solid;
	background-image: url(../images/bkgd-carbon-fiber.gif);
}

/*************
 Leather image
 *************/
#wrapper.leather {
	background-color: rgba(117, 117, 117, 0.5);
	background-image: -moz-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-leather.jpg);
	background-image: -webkit-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-leather.jpg);
	background-image: repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.4), rgba(0, 0, 0, 0.4) 100%), url(../images/bkgd-leather.jpg);
}

.as-oldie #wrapper.leather {
	background-color: rgb(117, 117, 117);
	background-image: url(../images/bkgd-leather.jpg);
}

/*************
 Dark wood image
 *************/
#wrapper.dark-wood {
	background-image: url(../images/bkgd-wood1.jpg);
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
}

/*************
 Light Wood image
 *************/
#wrapper.light-wood {
	background-image: -moz-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.5), rgba(0, 0, 0, 0.5) 100%), url(../images/bkgd-wood2.jpg);
	background-image: -webkit-repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.5), rgba(0, 0, 0, 0.5) 100%), url(../images/bkgd-wood2.jpg);
	background-image: repeating-radial-gradient(50% 50%, circle cover, rgba(117, 117, 117, 0.5), rgba(0, 0, 0, 0.5) 100%), url(../images/bkgd-wood2.jpg);
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
}

.as-oldie #wrapper.light-wood {
	background-image: url(../images/bkgd-wood2.jpg);
}

/*************
 Noise overlay
 *************/
#wrapper.noise {
	background-image: url(../images/bkgd-noise.png);
	border: rgba(128,128,128,0.1) 1px solid;
}

.as-oldie #wrapper.noise {
	border: rgb(128,128,128) 1px solid;
}