html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; } 

:focus::-webkit-input-placeholder { opacity:0; } 
:focus::-moz-placeholder { opacity:0; } 
:focus:-moz-placeholder { opacity:0; } 
:focus:-ms-input-placeholder { opacity:0; } 
::-webkit-input-placeholder { color:#A4A2A0; opacity:1; } 
::-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-ms-input-placeholder { color:#A4A2A0; opacity:1; } 

body { background: #fff; color:#444; font-family: Open Sans, Arial, Verdana, Tahoma; font-size: 100%;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} 
h1 { font-size: 200%; margin: 0 0 2% 0 ; color: #000; line-height: 1.5;}
h2 { font-size: 175%; margin: 4% 0 2% 0 ; color: #000; line-height: 1.5;}
h3 { font-size: 150%; margin: 4% 0 2% 0 ; color: #000; line-height: 1.5;}

a { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } 
a:hover { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } 
p { font-size: 110%; line-height: 1.5; margin: 2% 0 0 0; overflow: hidden; display: block; }
ol {font-size: 110%; color: #111;  padding: 0 4%; overflow: hidden; display: block; background: #fafafa; margin: 2% 0 0 0;}
ul {font-size: 110%; color: #111; padding: 0 4%; overflow: hidden; display: block; background: #fafafa; margin: 2% 0 0 0;}
li {margin: 2% 0 2% 2%; line-height: 1.5; font-style: italic;}
b,strong { font-weight: bold;} 
img {margin: 0 auto 4% auto; overflow: hidden; display: block; width: auto; height: auto;}

main {width: 740px; margin: 0 auto; padding: 25px 30px; }

table {width:100%; border-collapse: collapse; color: #333; background: #fafafa; overflow: hidden; margin: 2% 0; word-break: break-all;}
th, td { padding: 2% 3%; text-align: left;}
th { background-color: #ddd; font-weight: bold; color: #555; }
table tr:nth-child(even) { background-color: #f0f0f0;}
table td { border-bottom: 1px solid #ddd; }

.link {text-decoration: underline; font-weight: bold; color: #2C80AF ; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;}
.link:hover {color: #000; cursor: pointer; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;}
.code {padding: 2% 4%; background: #fafafa; font-size: 18px; color: #004F07; font-weight: bold;}

footer {padding: 5% 0 0 0;}
footer p {font-size: 80%; color: #777; text-align: center; margin: 0; line-height: 1.5;}

@media only screen and (max-width: 800px) { 

main {width: 92%; padding: 4%;}

h1 {font-size: 150%; margin: 0 0 3% 0 ;}
h2 {font-size: 135%; margin: 4% 0 3% 0 ;}
h3 {font-size: 120%; margin: 4% 0 3% 0 ;}

table {font-size: 90%; width:108%; margin: 2% -4%;}
th, td { padding: 2% 4%; text-align: left;}

p {font-size: 100%; margin: 2% 0 0 0;}
ol {font-size: 100%; padding: 0 4% 0 7%; margin: 2% -4% 0 -4%; }
ul {font-size: 100%; padding: 0 4% 0 7%; margin: 2% -4% 0 -4%; }
.code {font-size: 17px; margin: 2% -4%;}
img {width: 100%; }
 }