/* @override http://localhost/~mike/michaelangelo/sample/Resources/style.css */

body {
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	background: #312E28;
}

.clear {
   clear: both;
}

h1 {
	margin: 0;
	margin-top: 10px;
	background: #5D988B;
	color: white;
	text-shadow: #000 0px 1px 5px;
	padding: 10px;
	padding-left: 20px;
}

#menu {
	margin: 0;
	background: #71BAAC;
	color: white;
	text-shadow: #000 0px 1px 5px;
	font-size: 0.8em;
	line-height: 2.0em;
	padding-left: 50px;
	border-top: 2px solid #579288;
	list-style-type: none;
	overflow: hidden;
}

#menu li {
	float: left;
	margin-right: 30px;
}

#menu li a {
	text-decoration: none;
	color: white;
	font-weight: bold;
 	opacity: 0.5;
 	-moz-opacity: 0.5;
   filter:alpha(opacity=50);
}

#menu li.selected a, #menu li a:hover {
	opacity: 1.0;
	-moz-opacity: 1.0;
  filter:alpha(opacity=100);
}

#background {
	position: absolute;
	top: 58px;
	right: 50%;
	margin-right: -400px;
}

.switcher {
   overflow: hidden;
}

.switcher li {
	float: left;
	list-style-type: none;
	width: 16px;
	height: 16px;
	border: 1px solid black;
	margin-right: 4px;
	text-indent: -9999px;
   cursor: pointer;
}

.switcher li:hover {
	border:  1px solid #eee;
}

.switcher li a {
	display: block;
	text-indent: -9999px;
	width: 100%;
	height: 100%;
}

.switcher li.wood {
	background: url(icon-wood.png);
}

.switcher li.cork {
	background: url(icon-cork.png);
}

.switcher li.wallpaper {
	background: url(icon-wallpaper.png);
}

.switcher li.white {
	background: white;
}

.switcher li.black {
	background: black;
}

.switcher li.grey {
	background: gray;
}

.switcher li.boathouse {
   background: url(icon-boathouse.png);
}

.switcher li.pier {
   background: url(icon-pier.png);
}

.switcher li.thailand {
   background: url(icon-thailand.png);
}

.switcher li.city {
   background: url(icon-city.png);
}


#container {
	width: 800px;
	margin: 0 auto;
	border-bottom: 3px solid #1E1C18;
	border-left: 2px solid #1E1C18;
	border-right: 2px solid #1E1C18;
	margin-bottom: 30px;
}

#container .plain {
	overflow: auto;
	padding-top: 20px;
	background: url('gradient.jpg');
}

#container .divider {
	background: url(shadow.png) repeat-x;
	height: 30px;
	width: 800px;
	position: absolute;
}

#container .patterned {
	padding-top: 30px;
	background: url('background-wood.jpg');
	overflow: auto;
	min-height: 500px;
	padding-bottom: 30px;
}

.wood #container .patterned {
	background: url('background-wood.jpg');
}

.cork #container .patterned {
	background: url('background-cork.jpg');
}

.wallpaper #container .patterned {
	background: url('background-wallpaper.jpg');
}

.white #container .patterned {
	background: white;
}

.black #container .patterned {
	background: black;
}

.grey #container .patterned {
	background: gray;
}

.demo {
	margin-top: 20px;
	width: 400px;
	height: 360px;
	text-align: center;
	float: left;
	overflow: hidden;
}

.demo h3 {
	margin: 0;
	text-shadow: #fff 0px 1px 2px;
	background: url('shaded.png');
	border: 0;
}

.demo p, #content p {
	margin-top: 0;
	margin-bottom: 40px;
	padding-left: 10px;
	padding-right: 10px;
	background: #F7F7CA;
	font-size: 0.5em;
	font-family: "Andale Mono", "Monaco", "Courier";
	height: 20px;
	background: url('shaded.png');
	color: #fff;
	text-shadow: #444 0px 1px 0px;
}

.demo p a {
   text-decoration: none;
   color: white;
}

#content {
   text-align: center;
}

#content p {
   margin-top: 30px;
   padding: 20px;
   height: auto;
}



#instructions {
   float: right;
   color: white;
   text-shadow: #444 0px 1px 3px;
   width: 500px;
   font-size: 0.8em;
   text-align: right;
   margin-right: 100px;
}

#form {
   text-align: center;
}


#controls-reveal {
   text-indent: -9999px;
   vertical-align: middle;
   font-size: 0.1px;
   background: url('reveal.png');
   width: 32px;
   height: 32px;
   cursor: pointer;
   border: none;
}

#controls-reveal.hide {
   background: url('hide.png');
}

#input {
   vertical-align: middle;
   width: 80%;
   background: url('shaded.png');
   border: none;
   color: white;
   padding: 10px;
}

#submit {
   line-height: 32px;
   background: none;
   border: none;
   font-size: 1.2em;
   font-weight: bold;
   color: white;
   text-shadow: #444 0px 1px 3px;
   cursor: pointer;
}

#controls {
   display: none;
   position: absolute;
   text-align: left;
   margin-top: -2px;
   margin-left: 48px;
   background: white;
   border: 1px solid #555;
   overflow: auto;   
   font-size: 0.7em;
   max-height: 300px;
   padding-left: 32px;
}

#controls .style {
   padding-left: 20px;
}

#controls .style {
   font-weight: bold;
}

#controls .variants {
   font-weight: normal;
}

#controls .alternatives {
   padding-left: 20px;
   margin-top: -1.65em;
}

#controls input {
   vertical-align: middle;
}

#controls .main-class {
   background: #ddd url('sortable.png') no-repeat 12px;
   cursor: pointer;
   margin-left: -52px;
   padding-left: 52px;
}