/*

CSS per Ludica Todo Organizer (WIP)
Luca Asperius 14/04/2015 from New York with love :)

NOTE:
#3a6c9c blu sfondo di prima

*/

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

body { background: #666; margin: 0; padding: 0; font-family: "Source Sans Pro"}

input, textarea { font-family: "Source Sans Pro"; }
/*input[type="text"], textarea { font-family: "Source Sans Pro"; padding: 2px; margin: 0px; border: 2px solid #3a6c9c; border-radius: 4px; }*/

#usernav { background-color: transparent; padding: 10px; color: #ccc; width: 100%; text-shadow: 0px 0px 3px #000; }
#usernav a { color: #fff; text-decoration: none; }
#usernav a:hover { text-decoration: underline; }

#testata { background: transparent; padding: 0px 0px 40px 0px; margin: 0px; }
#testata h1 { margin: 0; padding: 0; text-align: center; text-shadow: 0px 0px 5px #000; color: #fff; font-size: 32px; }
#testata h1 a { color: #fff; text-decoration: none; }

#pagina { margin: 0px; background: #f1f1f1; padding: 10px; overflow: auto; width: 100%; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6); }

#mainsheet { width: 100%; overflow: auto; padding: 0px; background: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); }
#mainsheet h3 { margin: 0px; padding: 3px 5px; font-weight: bold; }
#mainsheet a { color: inherit; text-decoration: none; }

#colonna  { width: 100%; }
#colonna > div { margin-top: 10px; padding: 0px; background: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); }
#colonna > div > h3 { margin: 0px; padding: 3px 5px; font-weight: bold; }
#colonna > div > div { padding: 5px; border: 0px solid #88A6C3; }

#tagsmenu { padding-bottom: 5px !important; }
#tagsmenu > a { background: #aaa; font-weight: 600; color: #fff; display: inline-block; padding: 2px 4px; border-radius: 2px; text-transform: uppercase; margin: 5px 0px 0px 5px; text-decoration: none; transition: background-color 0.2s ease-in-out 0s; }
#tagsmenu > a.sel { background: #666; }
#tagsmenu > a:hover { background: #ccc; }

table#kalendar { border-collapse: collapse; width: 100%; }
table#kalendar tr th { border: 1px solid #bbb; padding: 2px; background: #bbb; }
table#kalendar tr:first-child th { border-bottom: 1px solid #ddd; font-size: 24px; }
table#kalendar tr td { border: 1px solid #bbb; padding: 2px; text-align: center; position: relative; height: 48px; width: 14.28%; font-size: 24px; font-weight: bold; }
table#kalendar tr td sup { display: block; position: absolute; font-size: 12px; top: 0px; left: 0px; color: #999; }
table#kalendar a { color: inherit; text-decoration: none; }
.tdempty { background: #ddd; }
.tdtoday { border: 3px solid #f00 !important; }
table#kalendar tr td > span { display: none; position: absolute; bottom: 20%; right: 80%; width: 200px; text-align: left; min-height: 48px; font-size: 11px; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.3); background: #FFF4BA; border-radius: 3px;}
table#kalendar tr td > span:after { position:absolute; bottom:8px; left:193px; width:10px; height:10px; content:''; background:#FFF4BA; box-shadow: 1px -1px 1px 0 rgba(0,0,0,0.3); transform: rotate( 45deg );}
table#kalendar tr td > span > span { display: block; }
.et-fum { background: #DEE575; display: inline-block; padding: 1px 2px; border-radius: 1px; text-transform: uppercase; vertical-align: 0px; }

#mainsheet > ul, #colonna > div > ul { background: #F7FF82; margin: 0px; padding: 0px; list-style-type: none; }
#mainsheet > ul > li, #colonna > div > ul > li { padding: 5px; border-top: 1px solid #DEE575; }
#mainsheet > ul > li:first-child, #colonna > div > ul > li:first-child { border-top: 0px solid #DEE575; }
#mainsheet > ul > li > a.done { color: #999; text-decoration: line-through; }
#mainsheet > ul > li > span.toolbox, #colonna > div > ul > li > span.toolbox { display: block; float: right; }
#mainsheet > ul > li:hover > span.toolbox, #colonna > div > ul > li:hover > span.toolbox { display: block; }

#formfastinsert { margin: 0px; padding: 5px; background: #F7FF82; border-bottom: 1px solid #DEE575; }
#formfastinsert input[type="text"] {width: 100%;}
#formfastinsert input[type="button"] {width: 49%;}
#formfastinsert input[type="submit"] {width: 49%;}

.et-orario, .et-tag { font-weight: 600; margin-right: 5px; font-size: 10px; display: inline-block; padding: 2px 4px; border-radius: 2px; text-transform: uppercase; vertical-align: 1px; }
.et-orario { background: #DEE575; }
.et-tag { background: #DEE575; }
.delayeddays { font-size: 12px; color: #999; }

/*a.minibutton { display: block; float: right; margin: 0; background: #4b9649; color: #fff !important; border-radius: 5px; padding: 1px 3px; }
a.minibutton:hover { background: #fff; color: #4b9649 !important; text-decoration: none !important; }*/

#footer { background: transparent; padding: 10px; color: #ccc; margin: 0px; text-align: center; text-shadow: 0px 0px 3px #000; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

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

/*#mainsheet { max-width: 748px; margin: 0 auto; }

#colonna { max-width: 748px; margin: 0 auto; }*/
#formfastinsert input[type="text"] {width: 73%;}
#formfastinsert input[type="button"] {width: 13%;}
#formfastinsert input[type="submit"] {width: 13%;}
}
 
@media only screen and (min-width: 1024px){

/*#pagina { width: 990px; margin: 0 auto; padding: 10px 0; }*/

#mainsheet { width: 66%; float: left; }

#colonna  { width: 33%; float: right; }
#colonna > div:first-child { margin-top: 0; }

#mainsheet > ul > li > span.toolbox, #colonna > div > ul > li > span.toolbox { display: none; }

table#kalendar tr td:hover > span { display: block; }

}