html {width:100%; height:100%; margin:0; padding:0; font-family: sans-serif;}
* {margin:0; padding:0; font-size: 100%;}
body {width:100%; background-color: #f6f6f6;}
div.header {background-image: linear-gradient(#fff 50%, #f6f6f6 100%); height: 80px; position: relative;}
div.header div.authorization {float: right; margin-right: 1em; margin-top: 0.5em;}
div.header div.authorization a{font-size: 0.75em; line-height: 1.125em; white-space: nowrap; 
margin-left: 0.75em; margin-top: 0.5em; cursor: pointer;}

#container {margin-left: 11em;}

#logo {width: 176px; height: 160px; float: left; position: absolute; left: 0; top: 0;}
#logo a{display: block; background: url("../images/logo.png") no-repeat; width: 147px; height: 160px; padding-left: 29px;
background-position: center 13px;}

#left-side {width: 9.05em; position: absolute; float: left;margin-left: -9.55em; margin-top: 6em; padding-bottom: 3em;}
#left-side ul li { padding: 0.25em 0; word-wrap: break-word; font-size: 17px; line-height: 1.125em;}
#left-side ul li ul{margin-left: 20px;margin-top: 6px;}
#left-side ul li ul li{font-size: 16px;}

h1, h2{color: black; font-family: Georgia, Times, serif; font-size: 1.8em; 
font-weight: normal; line-height: 1.3; margin-bottom: 20px; overflow: hidden; border-bottom: 1px solid #aaa;}
h1.with-edit, h2.with-edit{margin-bottom: 0px !important; border-bottom: none !important; float: left; !important;}
/*h2 a{font-size: 0.7em}*/
small.edit{font-size: 17px; color: #555; float: left; padding: 5px 0 0 1%;}
h1 + noindex small.edit, small.edit.with-padding{padding-top: 10px !important;}
small.edit a{font-size: 15px;}
div.title-wrapper{border-bottom: 1px solid #aaa; font-size: 1em !important; margin-bottom: 20px; overflow: hidden;}

div.back{margin-bottom: 10px;}

#content {background-color: #fff; padding: 1.25em 1.5em 1.5em; border-color: #a7d7f9;
border-style: solid; border-width: 1px 0 1px 1px; color: #252525;}
#content div{font-size: 0.875em; line-height: 1.6;}

.editable.info{float: left; }
.editable p{font-weight: bold; }
.editable.normal p{font-weight: normal !important;}

form.regular div{width: 100%;}
form.regular {width: 290px; font-family: sans-serif; }
form.regular input, form.regular textarea{border: 1px solid #ccc; border-radius: 2px; padding: 0.4em 0.3em 0.2em 0.6em; width: 100%;  vertical-align: middle;
margin-bottom: 15px; font-size: 15px; font-weight: normal; box-sizing: border-box;}
form.regular textarea{width: 150%}
form.regular input[type='submit']{background: none repeat scroll 0 0 #00af89;border: 1px solid #00af89;  color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.1);
 padding: 0.5em 1em; vertical-align: middle; font-size: 1.3em;}
div.form-errors{background-color: #fae3e3; border-color: #fac5c5; color: #cc0000; width: 290px;
box-sizing: border-box; font-size: 0.9em; margin: 0 0 1em; padding: 0.5em; word-wrap: break-word;}
#save{height: 1em; width: 1em; border: 1px solid #777; margin-bottom: 6px;}
a.forget{display: block; margin-bottom: 5px; margin-top: 7px;}
form.regular input[type='text']:focus, form.regular input[type='password']:focus {border-color: #898989; 
box-shadow: 0.45em 0 0 #347bff inset; outline: 0 none;
 transition: background 0.1s ease-in-out 0s, color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s;}
 
form.regular input::-moz-placeholder, form.regular textarea::-moz-placeholder {font-style: italic; font-weight: normal;}

#search{margin-bottom: 25px;}
#search div.radios{margin-top: 6px; margin-left: 6px;float: left;}
#search-area{width: 70%; border: 3px solid #aaa; position: relative; height: 31px; margin-bottom: 116px;}
#search-area input[type='submit']{position: absolute; right: 0; top: 0; background: url("../images/magnifier.jpg") no-repeat
center center; width: 31px; height: 31px; border: none; cursor: pointer;}
#search-input{border: none; font-size: 17px; padding: 0.4em 0 0.2em 2%; width:98%;} 

div.albums{}
div.albums div.album{float: left; margin: 0 5% 5em 0; width: 460px; height: 150px; overflow: hidden;}
div.albums div.album div.cover{float:left;}
div.albums div.album div.cover img{width: 150px; height: 150px;}
div.albums div.album div.info{float: left; font-size: 1.5em !important; margin-left: 0.5em; width: 300px; color: #252525;}
div.albums p.genre{font-style: italic;}
div.albums div.album div.info p a{font-size: 0.8em;}

div.artists ul{float: left;}
div.artists ul li{float: left; padding: 0 1em 1em 0;}
div.artists-list ul{width: 50%; float: left;}

div.description{}
table.infobox{background-color: #f9f9f9; border: 1px solid #aaa; border-spacing: 3px; clear: right;
color: black; float: right; font-size: 88%; line-height: 1.5em; margin: 0 0 0.5em 1em; padding: 0.2em;
text-align: left; width: 22em;}
table.infobox th.cover{ text-align: center;}
table.infobox td, div.infobox table th{font-size: 1.1em; color: black; 
line-height: 1.5em; border-spacing: 3px;}
table.infobox th{width: 11em;}
table.infobox tr{padding-left: 0.2em;}

div.genres{width: 70%; min-width: 258px;}
div.genres ul{float: left;}
div.genres ul li{float: left; width: 33%; text-align: left; text-align: center;}

tr.links {text-align: center; font-size: 1.7em;}

td.itunes, td.mbazaar, td.amazon, td.google_play, td.arkivmusic {text-align: left; height: 48px;}
/*td.itunes a{background: url("../images/itunes-bg.jpg") repeat-x; color: #fff; padding: 0.5em; border-radius: 11px; 
margin-bottom: 5px; border: 1px solid #425d92; text-decoration: none;}*/
td.itunes a{ padding-left: 45px; background: url("../images/itunes-icon.png") no-repeat left center; 
height: 30px; display: block; padding-top: 6px;}
td.mbazaar a{ padding-left: 45px; background: url("../images/mbazaar-icon.png") no-repeat left center;
height: 30px; display: block; padding-top: 10px;}
td.google_play a{ padding-left: 45px; background: url("../images/google_play-icon.png") no-repeat left center; 
height: 30px; display: block; padding-top: 6px;}
td.amazon a{ padding-left: 45px; background: url("../images/amazon-icon.png") no-repeat left center; 
height: 30px; display: block; padding-top: 6px;}
td.arkivmusic a{ padding-left: 45px; background: url("../images/arkivmusic-icon.png") no-repeat left center; 
height: 30px; display: block; padding-top: 6px;}


table.tracklist{border-collapse: collapse; border-spacing: 0; padding: 4px; margin-bottom: 20px;}
table.tracklist th{}
table.tracklist td{vertical-align: top; padding-right: 10px; text-align: right;}
table.tracklist tr{}
table.tracklist.short{width: 70%;}

table.tracklist input[type='text']{padding: 4px 1%; width: 98%;}
table.tracklist input.length{padding-left: 6%; width: 108%;}

form.edit{overflow: hidden; margin-bottom: 10px;}
form.edit input[type='submit']{background: none repeat scroll 0 0 #00af89;border: 1px solid #00af89; 
 color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; float: right;
 padding: 5px 5px; vertical-align: middle; font-size: 1.3em;}
 
#edit-album_name, #edit-artist_name{max-width: 600px;} 
#edit-album_name input[type='text'], #edit-artist_name input[type='text']{width: 98%; padding: 4px 0 4px 1%; margin-bottom: 5px;}
#edit-album_name p, #edit-artist_name p{font-weight: bold; margin-left: 1%;}
div.redactor_box{margin-bottom: 10px;}

div.genres{margin-bottom: 20px; background-color: #f9f9f9; border: 1px solid #aaa; display: table; padding: 7px;}
.subgenres{float: left; margin-bottom: 20px;}
.subgenres li{float: left; padding: 0 1em 1em 0;}

p.success-change{overflow: hidden; margin-bottom: 20px;}
p.success-change a{background: none repeat scroll 0 0 #00af89;border: 1px solid #00af89; 
 color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.1); text-decoration: none;
 padding: 5px 5px; vertical-align: middle; font-size: 1.3em;}

div.pager{text-align: center; margin: 0 auto;}
div.pager a, div.pager span{font-size: 1.5em; margin-right: 5px;}
div.pager a.active{color: #000;}

div.cover-original img{max-width: 100%;}
div.resolution-info{font-size: smaller;}
div.image-info {font-size: 0.975em !important;}

#footer{padding: 1.25em; margin-left: 11em;}
#footer ul{float: left}
#footer ul li{float: left; line-height: 2em; margin-right: 1em; font-size: 0.7em; padding: 0.5em 0;}

@media screen and (max-width:650px)
{
table.infobox{float: none;}	
}
@media screen and (max-width:1200px)
{
div.albums div.album{margin-right: 1em; width: 353px;}
div.albums div.album div.info{width: 193px;}
}
