/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

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

body {
   font: 0.75em Verdana, Arial, Helvetica, sans-serif;
   background: #f2edda url("images/bg-gradient.jpg") repeat-x;
}

.to-left {
   float: left;
}

.to-right {
   float: right;
}

strong {
   font-weight: bold;
}

a {
   -webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
   -o-transition: all 0.2s ease;
   transition: all 0.2s ease;
}

img {
   max-width: 100%;
   height: auto;
}

#wrapper {
   margin: 5px auto;
   min-width: 320px;
   max-width: 1050px;
   background: #ebdbc1 url(images/bg-wrapper.png);
   padding: 4px 3px;
}

#front, #left {
   background: #fff;
}
#front, #topmenu {
   width: 100%;
}
#front {
   margin: 0 auto;
}
#front, #left img, #left table, #left select, .ramka {
   border: 1px solid #d8cfb2;
}

#left img.no-border {
   border: 0;
}

#front {
   text-align: left;
}
#topmenu, #left select, #left #contentLoading, #menu {
   background: #fdf7e9;
}
#topmenu {
   width: 100%;
   overflow: hidden;
}
#topmenu li {
   list-style-type: none;
   float: left;
}

#topmenu a {
   width: 100%;
   background: #928668;
   border-right: 1px solid #fdf7e9;
   padding: 9px;
}
#topmenu a, #header a {
   text-decoration: none;
}
#topmenu a, #left {
   float: left;
}
#topmenu a, #right h2 {
   color: #fff;
}
#topmenu a, #left a, .chord {
   font-weight: bold;
}
#left table td {
   padding: 7px;
}
#topmenu a:focus, #topmenu a.active, #topmenu a:hover, #right h2 {
   background: #701500 url(images/bg-menu.gif) repeat-x;
}
#header, #footer, .ramka, .tabul, .short-tabul, .chord , h2, h3{
   clear: both;
}
a, #header, #header a, #left h2, #left h3, #left a, #left a:visited, #right a:visited, #right a {
   color: #8f2d0e;
}
#header {
   width: 100%;
   height: 190px;
   background: #fff url("images/top01.png") no-repeat;
   background-size: cover;
   position: relative;
}
#header, #left h2, #menu, #right h2 {
   border-bottom: 1px solid #d8cfb2;
}

#header, #footer {
   border-top: 1px solid #d8cfb2;
}

#header h1 {
   font: normal 54px Georgia, Verdana, sans-serif;
   position: absolute;
   right: 25px;
   top: 20px;
   text-shadow: 0 0 4px #fdf7e9;
}

#header h1, #header p {
   text-align: right;
}
#header span {
   color: #565656;
   font-size: 0.6em;
}
#header p, #footer, #footer a {
   color: #928668;
}
#header p {
   font: 22px Georgia, Verdana, sans-serif;
   position: absolute;
   right: 25px;
   top: 90px;
}
#left {
   text-align: justify;
   float: right;
   width: 100%;
}

#right {
   float: right;
   width: 264px;
   margin-right: -100%;
   padding-bottom: 30px;
}

#menu  {
   border-left: 1px solid #d8cfb2;
   padding-bottom: 30px;
}

#box {
   padding: 5px 7px 30px;
}

.stick {
   position:fixed;
   top:0px;
}

#content {
   margin-right: 264px;
}

#left, #right {
   height: auto;
}
#content {
   padding: 0 3% 65px;
}

.search {
   width: 100%;
}

#left a {
   display: inline-block;
}

#left p {
   font-size: 1.0em;
}
#left p, ol, #left ul, #left table {
   line-height: 200%}
#left p, #left table, .chord, .tabul, .short-tabul, .ramka {
   margin-bottom: 1.0em;
}
#left h2 {
   margin: 1.3em 0 1.0em 0;
   font: normal 1.67em Georgia, Verdana, sans-serif;
}
#left h3 {
   font: bold 1.33em Georgia, Verdana, sans-serif;
   margin: 1.2em 0 0.8em 0;
   border-bottom: 1px dashed #d8cfb2;
}
#left img {
   margin: 10px;
   background: url(images/loading.gif) no-repeat center center;
   max-width: calc(100% - 20px);
   vertical-align: middle;
}
ol, #left ul {
   margin-left: 10%}
ol, #left ul, #left select {
   margin-bottom: 10px;
}
#left li {
   list-style-image: url(images/nutka.gif);
   padding-left: 0.3em;
   margin-top: 0.5em;
}
#left select {
   font: bold 20px monospace;
}
#left #contentLoading, #vote {
   z-index: 100;
   position: absolute;
}
#left #contentLoading {
   left: 33%;
   border: 2px solid #d8cfb2;
   display:  none;
}
#left #contentLoading, .ramka {
   margin:  1.0em auto;
   padding: 8px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}
.chord, .tabul, .short-tabul {
   font: 12px monospace;
}

tt b {
   font-weight: bold;
}

tt.small-screen {
   display: none;
}

.chord em {
   color: red;
   font-style: normal;
}
#links, #fb-like {
   margin-top: 1.2em;
   line-height: 3.0em;
}

#right h2 {
   font: bold 1.33em Georgia, Verdana, Helvetica, sans-serif;
   padding: 10px 15px 10px 15px;
}
#right p {
   font-size: 15px;
   font-weight: normal;
   color: #000;
   margin: 2px 0;
}

#right a {
   text-decoration: none;
   display: inline-block;
   padding: 5px 15px 5px 17px;
   line-height: 20px;
}

#right a:hover {
   text-decoration: underline;
}

#right p.active a {
   font-weight: bold;
}

#footer, .ramka {
   background: #fdf7eb;
}
#footer {
   text-align: center;
   width: 100%;
   height: 60px;
   padding: 10px;
   line-height: 40px;
}
.ramka {
   width: 90%;
}
#vote {
   top: 0;
   right: 0;
}
#vote img {
   border: 0;
}
blockquote {
   margin-left: 20px;
   border-left: 5px solid #d8cfb2;
   padding-left: 10px;
}
object {
   margin: 10px;
}
h4 {
   font-size:  1.2em;
   margin: 2.0em 0 0.5em 0.5em;
}
a.external {
   background: transparent url(images/external.png) no-repeat scroll right center;
   padding-right: 13px;
}
li img  {
   vertical-align:  middle;
}
#cse-search-box  {
   float:  right;
   position:  absolute;
   top:  145px;
   right:  25px;
}
#bottombox  {
   display:  none;
   position:  fixed;
   bottom:  15px;
   left:  15px;
   width:  250px;
   background:  #fff;
   border:  1px solid #ccc;
   line-height:  1.66;
   font-size:  1.0em;
   box-shadow:  5px 5px 20px #182019;
}
#bottombox img,  #bottombox p  {
   margin:  10px;
}
#bottombox a  {
   font-weight:  bold;
   color:  #8F2D0E;
}

input[type="submit"], input[type="button"], input[type="reset"], button {
   padding: 3px;
}

#left img.pdf-icon {
   border: 0;
   vertical-align: middle;
}

#elastic {
   margin-top: 15px;
   clear: both;
}


#box-right {
   background: #fdf7e9;
   margin-top: 130px;
   padding: 10px;
   max-width: 264px;
   border: 1px solid #d8cfb2;
   border-right: none;
   border-radius: 10px 0 0 10px;
}

#box-right p {
   line-height: 1.8;
}

#box-right a {
   padding: 0;
}

#box-right img {
   margin-right: 10px;
}

@media all and (max-width: 800px) {
   #wrapper {
      margin: 0 auto;
   }
   #topmenu li {
      width: 33.333333%;
      text-align: center;
   }
   #topmenu a {
      border-bottom: 1px solid #fdf7e9;
      height: 3em;
      transition: none;
   }
}

#topbox {
   border-top: 1px solid #d8cfb2;
   border-left: 1px solid #d8cfb2;
   border-bottom: 1px solid #d8cfb2;
   padding: 10px;
   margin-bottom: 10px;
   margin-top: 10px;
   background: #fdf7e9;
   text-align: center;
   max-height: 480px;
}

#topbox a {
	padding: 0;
}

#topbox a span {
	display: block;
	width: 100%;
	font-size: 14px;
}

@media all and (max-width: 768px) {
   #content {
      margin: 0;
   }
   #right {
      width: 100%;
      float: none;
      clear: both;
      padding-bottom: 70px;
      text-align: center;
   }

   #right p {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
   }

   #right a {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
   }

   .stick {
      position: relative;
   }
}

@media all and (max-width: 600px) {
   #topmenu a {
      height: 4em;
   }

   #header span {
      display: block;
      color: #fff;
      text-shadow: 1px 1px 2px #333;
   }

   #header p {
      display: none;
   }

   #left p {
      clear: both;
   }

   #right a {
      border-radius: 5px;
      background-color: #f7f1e4;
   }

   #right a:hover {
      background-color: #f2eddf;
   }

   tt.small-screen {
      display: block;
   }

   .large-screen {
      display: none;
   }
   .tabul.compressed {
      font-size: 10px;
   }
   .chord.compressed {
      font-size: 10px;
   }
}

@media all and (max-width: 480px) {
   #topmenu a {
      font-size: 0.8em;
   }
   .tabul.compressed {
      font-size: 9px;
   }
   .chord.compressed {
      font-size: 8px;
   }
}