@charset 'utf-8';

/**************************************************

    project:  tinyMapEditor
    author:   Nicola Hibbert
    url:      http://nicolahibbert.com

/**************************************** Layout */
body, header, menu, section, canvas, ul, li, div, h1, h2, p { margin: 0; padding: 0 }
body { font: 12px/16px Helvetica, Verdana, 'san-serif'; min-width: 570px }

/*************************************** Header */
header { text-align: center; padding: 15px 250px; background: #eee; border-bottom: 1px solid #999; }
header h1 { font-size: 16px; margin-bottom: 5px }
header h2 { font-size: 14px; font-weight: normal; margin-bottom: 3px }

/*************************************** Map List */

#mapList .thumbnail { display: block; width: 128px; margin: auto; opacity: 0.5 }
#mapList p:has([type=radio]:checked) { background: #cccccc }

/*************************************** Editor */
section { margin: 80px auto; text-align: center; padding-left: 250px, padding-right: 250px }
canvas { cursor: pointer; position: relative }
canvas.zoomable { image-rendering: pixelated }
#tileEditor { background: url('bg.png') left top repeat }

/*************************************** Tools  */
menu { position: absolute; right: 0; top: 0; margin: 0; width: 250px; min-height: 100% }
nav { position: absolute; left: 0; top: 0; margin: 0; width: 250px; min-height: 100% }
.tool { border-left: 1px solid #999; border-right: 1px solid #999; background: #eee; z-index: 10 }
.tool ul { list-style-type: none; text-align: center }
.tool li { padding-bottom: 10px }
.tool p { margin-bottom: 10px }
.tool > ul > li > label { display: block; padding: 5px 0; margin-bottom: 10px; border-top: 1px solid white; border-bottom: 1px solid #bbb;
    background: #eeeeee; background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: linear-gradient(top, #eeeeee 0%,#cccccc 100%) }
/*div { background: white; margin: 5px; border: 1px solid #bbb }*/
#options input[type=text] { width: 30px }

#options p label { display: inline-block; width: 80px; text-align: left }
#options p span { display: inline-block; width: 20px; padding-left: 5px; text-align: left }

#tiles .scrollable { margin-bottom: 10px }
#tiles input { display: inline-block }

#layers li { text-align: left }
#layers li p { margin: 5px; padding: 5px; border: 1px solid #bbb }

.card { border: 1px solid gray; border-radius: 4px; margin: 1em; padding: 0.3em; }


/*************************************** Output */
output { display: block; margin: 0 auto; padding-right: 250px; text-align: center; z-index: 1 }
textarea { width: 400px; height: 200px; margin: 0; font-family: monospace }

.scrollable { overflow: auto }