@font-face {
  font-family: GrandesignNeueSerifBold;
  src: url('../fonts/GrandesignNeueSerifBold.ttf');
  font-weight: bold;
}

body{background:#000 url('../images/bg.png');font-family:"Georgia",Arial,Helvetica,sans-serif;}
.bold{font-weight:bold;}
#container{margin:30px auto 15px auto;padding:6px;width:760px;background:transparent #000;position:relative;z-index:500;}
#wrapper{background:#fff url('../images/clouds.png') center top no-repeat;}
#header{text-align:center;padding:40px 0 10px 0}
#header h1{font:italic normal normal 15px "Georgia",sans-serif;color:#6f889d;margin-top:5px;}
#footer{width:640px;font-size:12px;font-family:Arial;color:#15191c;margin:0 auto 50px auto;text-align:center;font-weight:bold;position:relative;}
#footer a{color:#15191c;text-decoration:none;}
#footer a:hover{text-decoration:underline;}
#main{font-family:Arial;color:#47494a;padding:0 28px 40px 28px;}
.twitter-share-button{position:absolute;right:20px;top:20px;}

#demo{border-top:0;}
#demo form label{font: italic normal normal 12px "Georgia", sans-serif;color:#6f889d;margin:0 0 3px 0}
#demo form p{display:inline-block;background:#e9e9e9;padding:4px 5px;margin:0;}
#demo form input[type="text"]{border:1px solid #ccc;font-size:20px;padding:8px 6px;width:515px;}
#demo form input[type="text"]:focus{background:lightyellow;}
#demo form input[type="submit"]{display:inline-block;border:1px solid #ccc;color:#666666;font-size:18px;font-weight:bold;padding:8px 10px;cursor:pointer;width:150px;}

.cblock{border-bottom:1px solid #e9e9e9;border-top:1px dotted #e9e9e9;margin:2px 0;padding:23px 0;}
.cblock h2{margin:0 0 12px 0;color:#f1592a;font-size:16px;font-family:GrandesignNeueSerifBold, Arial, sans-serif;}
.cblock p, .cblock  label, .cblock ul{font-size:13px;line-height:18px;}
.cblock p, .cblock pre, .cblock label{margin:10px 0 0 0;}
.cblock label{display:block;font-weight:bold;}
.cblock ul{margin:10px 0 0 20px;list-style-type: disc;}
.cblock li{margin:5px 0 10px 0;}
.cblock li:last-child{margin:3px 0 0 0;}
.cblock li span{font-weight:bold;}
.cblock pre{border:1px dotted #DEDEDE;background:#F8F8FF;padding:10px;display:inline-block;text-align:left;}
.cblock a{color:red;}
.ruby_requests{display:block;margin:20px 0 0 0;font-size:13px;}
#top{display:block;height:61px;width:50px;background:transparent url('../images/top.png') no-repeat;position:absolute;right:-30px;top:-31px;z-index:100;}
#top:hover{top:-33px;}

#output{margin:2px 0;padding:0;}
#output label{display:block;background:#f2f2f2;border:1px solid #ccc;border-bottom:1px solid #fff;padding:5px 10px;font-family:Arial, sans-serif;color:#47494A;margin-bottom:0;text-shadow:0 1px 0 #fff;}
div.output{display:block;font-size:11px;line-height:16px;margin-bottom:10px;border:1px solid #ccc;border-top:1px solid #ccc;padding:5px 10px;}
#xml{margin-bottom:0;}

/* CSS3 */
#container{
  background:transparent rgba(0,0,0,0.3);
  -moz-border-radius: 10px; 
  -moz-box-shadow:0 0 10px #000;                                          
  -webkit-border-radius: 10px; 
  -webkit-box-shadow:0 0 10px #000; 
  border-radius: 10px; 
  box-shadow:0 0 10px #000;
}
#wrapper{
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
#footer{
  text-shadow: #5c5d62 0 1px 1px;
}
#demo p, #demo input[type="text"], #demo input[type="submit"]{
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#demo input[type="text"]{
  -moz-box-shadow:inset 1px 1px 3px #ccc;
  -webkit-box-shadow:inset 1px 1px 3px #ccc;
  box-shadow:inset 1px 1px 3px #ccc;
  -webkit-transition: background .4s ease-in-out; 
}
#demo input[type="text"]:focus{
  background:lightyellow; 
}
#demo input[type="submit"]{
  text-shadow: 0 1px 1px #fff;
  background: #fefefe url('../images/alert-overlay.png') repeat-x;
  -webkit-transition: background .2s ease-in-out;
}
#demo input[type="submit"]:hover{
  border:1px solid #bbb;
  background: #dedede url('../images/alert-overlay.png') repeat-x;
}
#demo input[type="submit"]:active{
  border:1px solid #aaa;
  background: #cecece url('../images/alert-overlay.png') repeat-x;
}
#output label{
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -moz-border-radius-topright:5px; 
  -moz-border-radius-topleft:5px; 
  border-top-right-radius:5px; 
  border-top-left-radius:5px;
}
div.output{
  -webkit-border-bottom-left-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  -moz-border-radius-bottomright:5px; 
  -moz-border-radius-bottomleft:5px; 
  border-bottom-right-radius:5px; 
  border-bottom-left-radius:5px;
}