* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, body, div, h1, h2, h3 { margin: 0; padding: 0; }
/* html,body { background: white; } */
body, table p, table li {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;
  line-height: 18px; color: #333;
}
table { font: inherit }
section { display: block; margin: 0; padding: 0 }

h1,h2,h3,dt,.main-link { font-family: acme, tahoma, arial; }
h1 { font-size: 48px; padding: 5px; }
h2 { font-size: 36px; margin: 40px 0 15px 0; color: #2B4791; text-shadow: 2px 2px 2px #eee; line-height: 30px }
h3, dt, .main-link { font-size: 24px; margin: 15px 0; line-height: 28px; }
.main-link { display: inline-block; margin: 10px; margin-bottom: 0 }

p { margin-top: 10px; margin-bottom: 10px; }
p, li, dd { font-size: 16px; line-height: 22px; font-family: tahoma, arial;}

dt { margin-bottom: 5px; }
dd { margin: 0 0 30px 20px; }

a { color: #08C; text-decoration: none; }
a:hover { color: #146892; text-decoration: none; }
a img { border: none }

#main { margin: 30px; }

.page-header, a.button {
   border: solid #849cbd; border-width: 5px 0; margin: 0; padding: 15px;
   background-color: #2B4791; 
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B4791), to(#142248));
   background-image: -webkit-linear-gradient(top, #2B4791, #142248); 
   background-image: -moz-linear-gradient(top, #2B4791, #142248);
   background-image: -ms-linear-gradient(top, #2B4791, #142248);
   background-image: -o-linear-gradient(top, #2B4791, #142248);
}
.page-header a, .page-header h1 { line-height: 1; color: white; text-decoration: none; }
.page-header a { margin-right: 10px; float: left }

div.section { width: 50%; float: left; padding: 10px 25px; }
div.section + div.section + div.section { clear: left }
div.section + div.section + div.section + div.section { clear: none }

.unit { white-space: nowrap }
.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.corner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.info { padding: 5px 2px; color: #9B4D39; background: #FCE9E3; border: solid 1px #FBE1D5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.softer { font-weight: normal }
div.info { margin: 10px 0 }
.info p { margin: 5px }
.well { border: 1px solid #ddd; background: #efe; padding: 10px; }
.warn { background: red; color: white }

.badge { 
    color: #CC3D48; font-weight: bold; display: inline-block; line-height: 18px; font-weight: normal;
    font-size: 50px; width: 16px; height: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.button, button.primary { 
    padding: 15px; border: 1px solid #B3D3E4; display: inline-block;
    background-color: #E6E6E6; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#E6E6E6));
    background-image: -webkit-linear-gradient(top, #ffffff, #E6E6E6); 
    background-image: -moz-linear-gradient(top, #ffffff, #E6E6E6);
    background-image: -ms-linear-gradient(top, #ffffff, #E6E6E6);
    background-image: -o-linear-gradient(top, #ffffff, #E6E6E6);
    -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} 
a.button:hover, button.primary:hover { background: #ddd; border-color: #aaa }
button.primary { font-size: 24px; font-family: acme, tahoma, arial; border-color: #ccc; cursor: pointer }

/* tables */
table { background: #eee; border-spacing: 1px; border-collapse: separate; margin-bottom: 10px; border-bottom: 4px solid #dAE6F5; }
th { background: #DAE6F5; padding: 8px 10px; white-space: nowrap; }
td { padding: 5px 7px; background: white; vertical-align: top }
tr > td:first-child { border-left: 4px solid #DAE6F5 }
tr > td:last-child { border-right: 4px solid #DAE6F5 }
tbody tr th { text-align: left; vertical-align: top; font-weight: normal }
th[colspan] { text-align: left; }

/* code snippets */
pre, code {
  color: #032A49; padding: 0 3px 2px;
  font-size: 12px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
}
code { padding: 2px 4px; background-color: #f7f7f9; xxcolor: #d14; border: 1px solid #e1e1e8; }
pre {
  background-color: #f5f5f5; display: block; padding: 8.5px; margin: 5px 0;
  font-size: 12.025px; line-height: 18px;
  overflow: auto; white-space: pre; border: 1px solid #ccc;
}
pre code { padding: 0; color: inherit; background-color: transparent; border: 0; }
pre .special { color: #0367FD; background: #FFFF8C; display: inline-block; padding: 1px;}

.google-ad { clear:both; margin:0 auto 20px auto; width:728px; }
.footer-ad { padding-top: 20px; }
.header-ad { margin: 20px auto 0 auto }

/* media queries */
@media only screen and (max-width: 700px) {
    #main { margin: 10px; margin-bottom: 30px; }
    #logo { width: 28px; height: 28px }
    h1, h2 { font-size: 28px; }
    .page-header { padding: 5px }
    div.section { width: 100%; float: none; padding: 10px }
}

@media only screen and (max-width: 500px) {
    pre { word-break: break-all;  word-wrap: break-word;  white-space: pre;  white-space: pre-wrap; }

    .google-ad { clear:both; margin:10px 0; width:320px; }

    div.section { width: 100%; float: none; padding: 0 }
}