p,
pre {
    margin: 0 0 1em;
}

.align_center {
   margin: 0 auto;
   display: block;
   text-align: center;
}


body {
   background: #fff;
   font-family: 'Lora', serif;
}

#wrapper {
/*   background: #222;*/
   width: 60em; /* 960px | standard 1024px wide */
   margin: 0 auto;
   position: relative;
}

a {
   text-decoration: none;
   color: #7b9a70;
   color: #405b30;
   color: #506689;
}
a:hover {
   color: #315489;
   color: #4170b7;
//   color: red;
}
.sel a {
   /*text-decoration: underline;*/
}

header h1 {
   color: #444;
   font-style: italic;
   font-weight: normal;
   padding: 1em 1em 0;
   margin: 0;
}
header h1 span {
   font-size: .75em;

}

.clear {
   clear: both;
}

header, nav, content, footer {

width: 100%;
overflow: hidden;
clear: both;
}

content {
float: left;
/*margin-bottom: 2em;*/
}

.main-nav {
   height: 3.875em;
   top: -3.875em;
   top: 7em;
   position: absolute;
   overflow: visible;
}

.main-nav ul {
   float: right;
   margin-left: 12em;
}
.main-nav li {
   display: block;
   float: left;
   font-weight: bold;
   height: 1.875em;
   text-transform: uppercase;
   margin-bottom: 1em;
}

.main-item {
   border-left: solid 2px #315489;
}

.main-nav a {
   color: #aaa;
   padding: 1em;
}
.main-nav a:hover {
/*   background: #444;*/
   color: #ddd;
}
#banner {
   width: 100%;
   display: block;
   height: 18em;
   /*background: #fff;*/
   /*background: #444 url("/ui_music/img/gfdhgfhf.jpg") no-repeat top left;*/
   overflow: hidden;
   margin: auto;
   text-align: center;
   margin-bottom: 2em;
}

#banner img {
   margin: auto;
/*   width: 100%;
   margin-top: -10%;*/
}

/* v1
.box-nav li {
   width: 16em;
   height: 12em;
   margin: 1em;
   background: #888;
   float: left;
}

.box-nav li div {
   margin: 2em;
   margin-top: 8em;
   background: rgba(68,68,68,.75);
   color: #aaa;
   padding: .5em 2em;
   font-weight: bold;
}
*/
/* v2 */
.box-nav {
   border: 0px solid #444;
   float: left;
   margin: 0;
   padding: 0;
}

.box-nav li {
   width: 17em;
   height: 12em;
   margin: 0em 0 0 4.5em;
   background: #888;
   float: left;
}

.box-nav .first {
   margin-left: 0;
}

.box-nav li div {
/*   margin: 2em;*/ 
   margin-top: 8em;
   background: rgba(68,68,68,.75);/*#444;*/
   color: #aaa;
   padding: .5em 2em;
   font-weight: bold;
/*   text-align: center;*/
}
.box-nav li div:hover {
   background: rgba(102,102,102,.75);/*#444;*/
   color: #ddd;
}

/*
.box-nav li.news {
   background: #888; /* url("/ui_art/img/gallery/Webs/200x200/webs5.jpg") no-repeat top left;* /
   background-size: cover;
}
.box-nav li.about {
   background: #888; /* url("/ui_art/img/SAM_1240.JPG") no-repeat bottom left;* /
   background-size: cover;
}
.box-nav li.gallery {
   background: #888; /* url("/ui_art/img/SAM_1280.JPG") no-repeat top left;* /
   background-size: cover;
}
*/

article {
   margin-bottom: 2em;
}

article h3 {
   margin-top: 0;
}

article .textcontent {
//   float: left;
//   width: 66%;
}

.imgdescription {
   font-size: 0.8em;
   font-style: italic;
   text-align: center;
   display: block;
   margin-top: 0;
   color: #777;
}

.sidebar .imgdescription {
   float: right;
}

.mainbar .imgdescription {
 /* only appears if there is a sidebar */
}

.mainbar
{
   width: 66%;
   float: left;
   margin-bottom: 1em;
}
article .mainbar>* {
   margin-left: 2rem;
}

.headline {
   text-align: center;
}
.mainbar .headline {
   text-align: left;
   margin-top: 0;
}

.sidebar {
   width: 33%;
   float: left;
   margin-bottom: 1em;
}

.sidebar img {
   width: 100%;
}

.left { float: left;}
.right { float: right;}
.center { text-align: center;}

footer {
   font-size: 0.75em;
   padding: 0.5em 0;
}
footer a {
   font-style: italic;
}

#edit {
   position: absolute;
   top: 0;
   left: 0;
}

.breadcrumb-nav {
float: left;
margin-top: 0;
}

.breadcrumb-nav li {
float: left;
margin-right: 0.5em;
}

.sub-nav ul {
margin: 0;
}


header {
   color: #ddd;
   height: 10.875em;
   overflow: visible;
   float: left;
}

header img {
   padding-top: 1em;
   float: left;
}


img {
   max-width: 100%;
}


.file-list article {
margin-bottom: 0.125em;
}

@media only screen and (min-width: 480px) {

body header, body #wrapper {
/*   background: darkblue;*/
}

.align_left {
   float: left;
}

.align_right {
   float: right;
}

}








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

#wrapper {
   width: auto;
}

body header {
/*   background: darkred;*/
   height: auto;
   margin: 0;
   padding: 0;
}

header {
}

ul>li {
   width: 100%;
}

.main-nav {
   position: relative;
   height: auto;
   margin: 0;
   padding: 0;
   top: 0;
}

footer .left, footer .right, footer .center {
   width: 100%;
   margin-bottom: 1em;
   display: block;
   float: none;
   text-align: center;
}

.main-nav ul {
   margin: 0 auto;
   display: block;
   text-align: center;
}
.main-nav li {
   margin-bottom: 0;
}

#banner {
   height: auto;
}

.box-nav {
   float: none;
   width: 100%;
   display: block;
   position: relative;
}

.box-nav li, .box-nav li.first {
   margin: 0.5em auto;
    display: block;
   float: none;
}


.sidebar, .mainbar {
   width: 100%;
margin: 0 auto;
/*
margin: 0 auto;
text-align: right;
*/      
}
.sidebar img {
width: auto;
display: block;
position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto ;
/*
max-width: 100%;
text-align: right;
*/
}

.sidebar .imgdescription {
text-align: center;
float: none;
}

article .mainbar > *, p {
    margin-left: .5rem;
    margin-right: .5rem;
}

.icon {
margin-top: 0.5em;
}

}