body { line-height: 145%; font-size: 12pt; padding: 0; margin: 0; background: url(/static/img/bg.png) left repeat-y;}
p { margin-bottom: 1em;}
strong { font-weight: bold;}
h1 { color: #333; margin: 1em 0; line-height: 110%; font-weight: bold; font-size: 36pt; text-align: center; font-family: "Trebuchet MS", sans-serif;}
h2 { color: #333; margin: 1em 0 0.5em 0; font-weight: bold; font-size: 18pt; text-align: left; border-bottom: dotted 1px #ddd; font-family: "Trebuchet MS", sans-serif; line-height: 140%;}
h3 { color: #333; margin: 1em 0 0.5em 0; font-weight: bold; font-size: 15pt; text-align: left; font-family: "Trebuchet MS", sans-serif; line-height: 140%;}
h4 { color: #333; margin: 1em 0 0.5em 0; font-weight: bold; font-size: 12pt; text-align: left; font-family: "Trebuchet MS", sans-serif; line-height: 140%;}
ul {list-style-type: disc; list-style-position: outside; padding-left: 2em; margin-bottom: 1em;}
ul ul {list-style-type: circle; margin-top: 0.5em; margin-bottom: 0.5em;}
em { font-style: italic;}
pre { font-family: monospace; background: #f0f0f0; padding: 0.5em; margin-bottom: 1em;}
ol {list-style-type: decimal; list-style-position: outside; padding-left: 2em; margin-bottom: 1em;}
ol ul { margin-top: 0.5em; margin-bottom: 0.5em; list-style-type: circle;}

dt { font-weight: bold;}
dd { padding-left: 1em; margin-bottom: 1em;}

/*
body { margin: 0; padding: 0; background: #fff; }
strong {font-weight: bold;}
ul { list-style-type: disc; list-style-position: outside; padding-left: 2em;}
*/

#page { font-size: 12pt; line-height: 140%;}

#logo { margin: auto; text-align: center; padding-top: 1em;}

#menu { font-size: 100%; text-align: left; color: #222; font-family: "Trebuchet MS", sans-serif; position: absolute; top: 0; left: 0; width: 250px;}
#menu ul { display: inline; list-style-type: none; padding: 0; margin: 0;}
#menu li { border-bottom: dotted 1px #ddd; padding: 0.5em 0.7em; margin: 0;}
#menu li.last { border-bottom: none;}
#menu a { color: #222; text-decoration: none;}
#menu a:hover { text-decoration: underline;}
#menu a:visited { color: #222;}

.screenshot img { border: dotted 1px #ddd; padding: 4px;}

#menu h1 { color: #444; font-size: 200%; margin: 0; border-bottom: solid 1px #ddd; padding-bottom: 0.5em;}
#footer { text-align: center; color: #777; padding: 1em; margin: 3em 0 0 0; border-top: dotted 1px #ddd;}

#front-page-content h2 { font-size: 100%; line-height: 140%; text-transform: uppercase; text-align: center; color: #777; font-family: "Trebuchet MS", sans-serif; font-weight: normal; margin: 0 0 0.6em 0; padding: 0; border: 0;}

#front-page-content .section-content { width: 900px; margin: 0 auto; padding: 0;}

#front-page-content #header-section {background: /*#519600*/ #386900 url(/static/img/header-bg-1980-400.jpg) no-repeat center center; color: #fff;  height: 480px;}
#front-page-content #header {font-size: 18pt; line-height: 130%; font-family: sans-serif; background: url(/static/img/www.mytrees.cz-header-transparent.png) no-repeat left 50px; height: 400px;}
#front-page-content #header-text { margin-left: 500px; margin-top: 0px; padding: 0; text-shadow: 3px 4px 10px #444; font-family: "Trebuchet MS", sans-serif; text-shadow: 3px 3px 3px #333;}
#front-page-content #header-text h1 { margin: 0; padding: 150px 0 0 0; font-size: 64pt; line-height: 140%; font-weight: bold; text-shadow: 3px 3px 3px #333; color: #fff;}

#front-page-content #intro-section { padding: 1.5em 0; background-color: /*#86b451 #bfff75*/ #d2ff9e; }
#front-page-content p.intro { font-size: 140%; line-height: 150%; color: #222; margin-bottom: 0; }

#front-page-content #features-section { margin-top: 1em; font-size: 120%; line-height: 150%; border-bottom: dotted 1px #ddd; padding: 0 0 0.5em 0;}

#front-page-content #info-section { margin-top: 1em; font-size: 120%; line-height: 150%; color: #222;}


#content { position: absolute; left: 300px; top: 0; width: 800px; font-size: 12pt;}
#content p{ margin: 0 0 1em 0;}
/*
#content h1 { font-size: 200%; text-align: center; color: #777; font-family: "Trebuchet MS", sans-serif; font-weight: bold; margin: 0 0 2em; padding: 0;}
##content h2{ font-size: 150%; color: #333; margin: 1em 0 1em 0; font-weight: bold; font-family: "Trebuchet MS", sans-serif; border-bottom: solid 1px #ddd; padding: 0 0 0.3em 0;}
*/

#content .warning { background: #fafafa; padding: 1em; border-left: solid 5px #ff9700;}

#content .screenshot, #content .screenshots { margin: 0.5m 0 10em 0; font-style: italic; text-align: center; color: #444; font-size: 90%; padding: 0 0 1em 0;}
#content .screenshots p { margin-top: 0.3em;}
#content .w600 { width: 600px;}
#content .h400 { height: 400px;}

.row-table { width: 100%; border-top: dotted 1px #ddd;}
.row-table td { border-bottom: dotted 1px #ddd; padding: 0.3em;}

ul.procedure { list-style-type: none; margin: 0 0 1em 0; padding: 0; border-top: dotted 1px #ddd;}
ul.procedure ul { margin: 0 0 0 2em;}
ul.procedure > li { color: #000; border-bottom: dotted 1px #ddd; padding: 0.3em 0.5em 0.3em 36px; background: url(/static/img/procedure-step-todo.png) left 0.4em no-repeat;}
ul.procedure > li.procedure-step-done { color: #ddd; background: url(/static/img/procedure-step-done.png) left 0.4em no-repeat;}
ul.procedure > li.procedure-step-done a { color: #ddd; }
ul.procedure > li.procedure-step-done a:visited { color: #ddd; }

.screenshot-guide-closed img { height: 120px; border: solid 1px #ddd; cursor: pointer;}
.screenshot-guide-open img { display: block; max-width: 90%; border: solid 1px #ddd; margin-bottom: 1em; cursor: pointer;}
.screenshot-guide-help-note { font-style: italic; color: #777; font-size: 80%;}