body {background-color: #326885; font-family: arial; font-size: 14px; color:#434343;width:98%;}
.container_12{ margin:10px 0; background:none; width:100%;}

h1, h2, h3, h4 { margin: 0 0 0 0; padding: 0 0 5px 0; }
h1 { clear: left;color: #fff;background:url(/img/title_bg.png) repeat-x; margin-bottom: 0; padding: 10px 5px 5px 10px;font-size: 30px; height:55px;border-top: solid 5px #FFFFFF;position:relative;}

h3 { margin-top:1px;}
body, ul, li { padding: 0; margin: 0 auto;}
img{ border:none;}
p { margin: 0 0 10px 0;}
ul {margin-left: 20px;}


a { color: #2093CA; font-weight:bold;}
a:active{outline: none;}
a:hover { color: #ffffff; background-color:#2093CA;}
a.nohover:hover{background-color:transparent;}

.alignright{float:right;}
.noHover:hover{background:none;text-underline:none;}


.header { background:url(/img/header_bg.png) repeat-x;height:91px;position: relative;}
#header_left{width:17px; height:60px;  background:url(/img/header_left.png) no-repeat;position:absolute;left:0;top:0;}
#header_right{position:absolute; top:0px; right:0px; width:17px; height:60px; background:url(/img/header_right.png) no-repeat;}

.btn a{display:block; border-right:solid 1px #15719d; border-left:solid 1px #15719d; height:18px; padding:8px 14px 8px 14px; text-decoration:none; background: url(/img/btn_bg.png) repeat-x; color:#ffffff;}
.btn a:hover{color:#ffffff; background: url(/img/btn_bg_hover.png) repeat-x;}

a.devbtn{display:block; width: 326px;height:38px;background: url(/img/developer-sign-up-button.png);background-repeat:no-repeat;text-indent:-10000px;}
.signupvideo{width:100%;text-align:center;}
div.home{padding-top:10px;}
div.home a.devbtn{width:177px;height:56px;background:url(/img/home-developer-sign-up-button.png) no-repeat 0 0;float:left;margin:0 20px 0 0;}
div.home .video{margin: 0 auto;width:90%;}
div.home .video .text{margin-top:5px;}
div.home .video a{float:left;}
div.home .homepagesignup{float:left;}
a.devbtn:hover {background-position: 0 -38px;}
div.home a.devbtn:hover{background-position:0 -56px;}
                               
#logo { width: 185px; padding: 15px 0 10px 20px;float: left;height: 64px;}

.box {/*padding:10px;*/ background:none; font-family:verdana;}
.orange .box .title{background:#fbfbfb url(/img/content_title_bg.png) repeat-x 0 0;border-bottom:3px solid #CECECE;height:40px;}
.orange .box, .grey .box{background:#fdfdfd url(/img/content_title_bg_page.png) repeat-x left bottom;margin:20px 0 10px 0;}
.grey .box .title{background:#fbfbfb url(/img/content_title_bg_grey.png) repeat-x 0 0;border-bottom:3px solid #CECECE;height:40px;}
.box .info {padding:10px;}



.container_12 .grid_4.homePageSection{}

#wappleLogo {float: right; padding:10px 15px 0px 0px;}
#links { position: absolute; right: 0; bottom: 0; padding: 0 0px 0 0;}
#links a { display: block;float: left; outline:none;  height: 29px;padding: 0;margin-right: 10px;line-height: 30px; color: #ffffff; font-weight: bold;font-size:16px; text-decoration:none;background-color: #f1b039; cursor:pointer;}
#links a:hover { color: #1d4f6a; outline:none;}
#links a.selected, #links a.selected:hover {color: #1d4f6a; outline:none;}

#links a img{float: left;}
#links a span.text { display: block; height: 29px;float: left;padding: 0 5px 0 5px;}
#links a.selected span.text{background-color: #ffffff;}
#links .divider { float: left; margin: 0 5px;}


#content { background-color: #fff;border-bottom: solid 5px #bcdae5;}
#content #inner { margin: 20px;}

#pageContent { padding: 0; background-color: #fff;position:relative;}
#text { padding: 0;position: relative;}
#text.wide { width: 100%;}
#text h1 { height: 50px;}
#text .inner { /*padding: 10px 0 20px 10px;*/width: 68%;float: left; background-color: #fff;font-family: verdana;position: relative; z-index: 10;margin-bottom:25px;}
#text .inner .innerPadding {margin: 10px 5px 20px 10px;}
#text .inner.wide { width: 100%;}
#text .inner h2,#text .inner h3, #text .inner h4 { margin-top: 20px;color: #275873;}
#text .inner h3,#text .inner h4{margin-top:0px;}
#text .inner h2{ background:url(/img/content_title_bg.png) repeat-x; font-size:22px; font-family:helvetica neue, lucida grande, helvetica, arial; height:40px; padding: 5px;color: #FFF;clear: both;margin-right: 5px;}
#text .inner ul { margin-top: 10px;}


#text p, #contents p { padding: 0 10px 10px;}
#text textarea, #text input, #text select { margin: 0 10px 10px;}
#text span.saved { background-color: #669900; color: #2c4200;font-size: 20px;margin-left: 20px;}
#text textarea{border:solid 2px #999999;}

#text #navigation { margin: 20px 0;padding: 10px;clear: both;}
#text #navigation #previous { float: left;}
#text #navigation #next { float: right;}

#text img { float: left; margin: 0 10px 10px 0;}
#contents { padding-right: 10px;  background: #e4e4e4 url(/img/contents_bg.png) repeat-y; ;height: 100%;margin-left:68%;position: relative; z-index: 5;}
#contents h3 { color: #1D4F6A;width: 100%;background-color:#bcbcbc;}
#contents #contentsList { margin-left: 0; padding-left:5px;}
*+html #contents #contentsList { position: relative; left: -2px; }
#text .inner.wide  { border:none;}
#changeLog ul li, #googleGroup ul li { list-style-image: url(/img/menu_bullet_arrow.png);}

ul.comment{margin-left:0;}
ul.comment li {list-style:none;background:url(/img/comment.png) no-repeat 0px 4px;border:solid 1px transparent;padding-left:22px;}

#contents ul li{list-style:none;}
#contents ul li a{ background: url(/img/menu_bullet_arrow.png) no-repeat 5px 5px;}
#contents ul li.parent .currentLink{ background: #1d4f6a url(/img/menu_bullet_down.png) no-repeat 5px 5px;}

#contents #contentsList ul { border: none;}
#contents #contentsList .topLevel { display:none;}
#contents #contentsList .topLevel.current { display:block;}



#text.wide h1 { padding-right: 0;padding-left: 12px;width: auto;}
#text h1 a { font-size: 15px; color: #000;}
#contents h3, #contents h3 a { padding: 10px 5px 5px 5px;font-size: 25px;margin-bottom: 0;margin-top:-10px;}


#contents ul { margin: 0 0 0 20px;padding: 20px 0 20px 0;}
#contents ul ul { padding: 3px 0;}
#contents ul li { margin-left: 5px;}
#contents ul li:hover{}
#contents ul li a{color:#1d4f6a;display:block;padding: 0 3px 0 25px;text-decoration:none;margin-top:3px;}
#contents ul li a:hover{color:#1d4f6a;background-color:#fff;}
#contents ul li .currentLink{color:#fff;padding:0 3px 0 25px;}

.contact_username { display:none;}
#contactPage label { width: 100px;display: block;float: left;}
#contactPage .submit input { margin-left: 0;}
span.required { color: #f16f12;font-weight: bold;}
div.error-message { color: #f16f12;}
.code { margin: 20px 20px 0px 5px; border: 2px solid #cbc9c9; font-size: 0.85em; background-color:#cbc9c9;  font-family: courier; }
.snippedCode { margin: 10px 20px 20px 5px; border: 2px dashed #999;font-size: 0.85em; background-color:#cbc9c9;  font-family: courier;}


.codeDownload {  margin: 5px 25px 15px 20px;text-align:center;float: right; width: 95%;position: relative;}
.codeDownload span.listing { float: right;text-align: right; margin-right: 10px;margin-top: 5px;}
.codeDownload a {float: right; color: #fff;text-transform: lowercase; display: block; background-color: #c7c7c7;padding: 5px 10px;font-weight: bold; text-decoration:none;background: url(/img/btn_bg.png) repeat-x 0 0;}
.codeDownload a:hover { background:url(/img/btn_bg_hover.png) repeat-x 0 0;}

.code, .figure, .snippedCode { width: 95%;}


#text .inner .figure {margin: 20px 20px 0px; padding:20px; background-color:#f3f3f3;border: 1px solid #999;}

.figureLabel {  margin: 0px 20px ;  text-align:right; font-style:italic;font-family:times;}

#validatorCodeLabel { margin: 0 0 10px 10px;}
#ValidatorCode { width: 80%;height: 300px;}

#text p.error { background-color: #e32e32; padding: 10px;}
#text p.ok { background-color: green; padding: 10px;}

/* Home page */
#introText { float: left; width: 50%;}
#introText a { color: #f16f12;}

.signup {text-align:center;position:absolute;top:14px;right:7px;}
.signup img {}

.flow-diagram { text-align:center; position:relative; }
.flow-diagram img { float:none; }
#overview-remote img, #overview-deployed img{float:none;}
#overview-remote, #overview-deployed{text-align:center}
.overview-list {line-height:1.5em;}
.tutorial-image{width:100%;}

#descriptionLine { width: 100%;clear:both; text-align: center;}
.descriptionItem { float: left;text-align: left;width:100%;}
#text .inner .descriptionItem h2 { background-color: #6ac6dd; border:none; color: #fff;margin-top: 5px;}
.descriptionItem strong { color: #4096de;}
.caseStudyLogo { clear: left;}
.caseStudyLogo img, #caseStudiesPage img { border: dashed 2px #f16f12;}
.caseStudyLogo a{float:left;display:block;margin:0 5px 10px 0;}

#caseStudiesPage h3 { width: 75%;float: left;}
.caseStudyBody { }
#text p.caseStudyUrl { clear:left; padding-left: 0;}

#text .inner #news h3 { margin-top: 0;border-bottom: none;}
.newsIndexBody { padding-bottom: 10px;}
.date{padding:0 10px 10px 10px;font-weight:bold;}

#content #text p.newsBody { padding-left: 0;padding-top: 20px;}

.issue, .insideText{padding-left:10px;}

#tweet h2{background:url(/img/twitter_icon.png) no-repeat right 1px;width:95%;}
#tweet p {margin-bottom:0;}
#tweet .twitDate, .niceDate{color:#a4a4a4;font-size:0.8em;margin-bottom:10px;text-align:right;}

.footer{background: #ffffff url(/img/footer_bg_left.png) no-repeat left bottom;position:relative;border-top:solid 3px #b1b1b1;padding-top:5px;height:40px;}
.footer #apiRequests{float:left;width:40%;padding:6px 0 5px 30px;}
.footer #copyright{float:left;padding:6px 0}
.footer #contactUs{padding:6px 0 5px 0;float:right;margin-right:30px;}
.footer #rightImage{background:url(/img/footer_bg_right.png) no-repeat right bottom;width:25px;position:absolute;right:0;bottom:0; }


pre { margin: 0;}
pre br { display:none;}

table#activation { border: solid 1px #6AC6DD; width: 95%;}
table#activation th, td {text-align:left; padding: 4px;vertical-align: top;}
table#activation th { background-color: #EDF8FA;}
table#activation td { border-bottom: dashed 1px #6AC6DD}

div.input input, div.select select, div.input textarea { width: 400px;}
div.input textarea { height: 200px;}

/* CSS Float Cleaners */
div.cleaner {clear: both;background: transparent;margin: 0;padding: 0;font-size: 0.8em; margin: 20px 20px 0px 20px; padding:20px;}
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}





/* Code Highlights */
ol.hl-main {font-size:1.1em;letter-spacing:0.07em;margin: 0 0 0 35px; background-color: #cbc9c9;}
ol.hl-main li {border-left: 1px solid #cbc9c9; padding: 3px 0; background-color: #f2f2f2;}
.hl-highlight {}
.hl-lowlight {color:#aaa;}
.hl-main {color: #000;font-family: Courier New, Arial;}
.hl-prepro {color: #006400;font-weight: bold;}
.hl-inlinetags {color: #AA0000;font-weight: bold;}
.hl-identifier {color: #000;}
.hl-brackets {color: #330099;font-weight: bold;}
.hl-types {color: #0000FF;font-weight: bold;}
.hl-var {color: #cc0000;}
.hl-reserved {color: #990000;font-weight: bold;}
.hl-code {color: #000;}
.hl-quotes {color: #AA0000;font-weight: bold;}
.hl-string {color: #3333ff;}
.hl-number {color: #0000FF;}
.hl-comment {color: #999;font-style: italic;}
.hl-mlcomment {color: #FFA500;}
.hl-builtin {color: #2E7808;}
.hl-snip {color: #d40c0c; display: block; margin: 3px 0;}        

pre{
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}