mopidy-musicbox-webclient/css/jquery.form.css

/********************************
 * FORM
 * jquery.form.css
 ********************************/


/* normalize */
form{
    margin:0;
    padding:0;
}

    /********************************
     * Normal elements
     ********************************/
		
	form label.required:after{
	    content:" *";
	}


/*********************************
 * error message
 *********************************/
    input.invalid{
    	outline:1px solid gold;
	}

    div.errormsg{
        padding:5px;
        position:absolute;
        display:inline-block;
        color:black;
        font-size:14px;
        margin:0;
        margin-left:10px;
        font-weight:normal;
        background-color:white;
        border:1px solid black;
        border-radius:5px;
        box-shadow:5px 5px 5px rgba(0,0,0,0.5);
        z-index:1;
    }
		div.errormsg:before,div.errormsg:after{
			position:absolute;
			left:-10px;
			bottom:5px;
			content:" ";
			width:0;
			height:0;
			padding:0;
			border:10px solid transparent;
			border-width:8px 10px;
			border-right-color:inherit;
			border-left-width:0;
		}
		div.errormsg:after{
			border-right-color:white;
			left:-8px;
		}

	input.invalid + div.errormsg{

	}

/*************************
 * Placeholder
 *************************/
   	input.placeholder,
   	textarea.placeholder{
   		color:#bbb;
	}

/*************************
 * type.range
 *************************/
	input.range{
		padding-bottom:-20px;
		border:0;
		cursor:pointer;
		color:transparent;	
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+kAAAAeCAYAAABQQl9DAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADscAAA7HATiSL3YAAAO9SURBVHhe7d0xbttAEAVQKmlTBCl8AQcQYMG5i3MTnkQQoKvEN1GhQpFvEANJI5MUQ6pJxXUZzOwTwMrN/DcLGB+iyKbxIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBP4JrGAQIECAAAEC8QT2+33fdd3Hdyb/1bbtl3jpTEyAAAECBOoVUNLr3b3kBAgQIBBYYLvdjt+fnhYTXC6X1x/Pz91U0u8CxzQ6AQIECBCoTuBDdYkFJkCAAAECSQSGYWiWrn76mw8BAgQIECAQT0BJj7czExMgQIAAgZvAXMSXrrm8+xAgQIAAAQLxBJT0eDszMQECBAgQuAkMfb98KelOCQECBAgQCCmgpIdcm6EJECBAgMBU0gu3u1+VdEeEAAECBAiEFFDSQ67N0AQIECBAoFzSh+sVEQECBAgQIBBQQEkPuDQjEyBAgACBWaCfbndfuoaug0SAAAECBAgEFFDSAy7NyAQIECBAYBYoPt3dN+kOCQECBAgQCCmgpIdcm6EJECBAgIDfpDsDBAgQIEAgo4CSnnGrMhEgQIBAFQKlV7B5T3oVR0BIAgQIEEgooKQnXKpIBAgQIFCHQPHp7m53r+MQSEmAAAEC6QRWu91uvPpHnm6xAhEgQIBAfoFvj4+LIS9vb83xeMyPICEBAgQIEEgmsNput+Nms0kWSxwCBAgQIJBb4HA4NJuHh8WQ8+3up9OpWa/XuSGkI0CAAAECyQTmkv57yvQpWS5xCBAgQIBAeoFSAe+mb9J/ns/pDQQkQIAAAQLZBFbZAslDgAABAgRqEJjvhPt6f78Ydfq9+uv55aVr2/auBg8ZCRAgQIBAFgEPjsuySTkIECBAoDqB0oPj5r/5ECBAgAABAvEElPR4OzMxAQIECBC4CZRewTZ4KKxTQoAAAQIEQgoo6SHXZmgCBAgQINA0pW/S+75HRIAAAQIECAQUUNIDLs3IBAgQIEBgFvCedOeAAAECBAjkE1DS8+1UIgIECBCoRGCYvi0vXZUwiEmAAAECBFIJKOmp1ikMAQIECNQk4DfpNW1bVgIECBCoRUBJr2XTchIgQIBAOgFPd0+3UoEIECBAgECjpDsEBAgQIEAgqMD8cLilyyvYgi7V2AQIECBQvYCSXv0RAECAAAECUQU83T3q5sxNgAABAgSWBZR0p4MAAQIECAQVcLt70MUZmwABAgQIFASUdMeDAAECBAjEFPjzzivYPo/jOMSMZmoCBAgQIECAAAECBAgQIECAAAECBAgQIPCfBf4CXCs3jGOIZn4AAAAASUVORK5CYII=) no-repeat center center;
	}


/*************************
 * input.number 
 *************************/
	input.number{
		margin-right:0;
		padding-right: 22px;
	}
	span.number{
		margin-right: 32px;
		margin-left: -20px;
		display:inline-block;
		vertical-align:middle;
	   -moz-user-select: -moz-none;
	   -khtml-user-select: none;
	   -webkit-user-select: none;
	   user-select: none;
   	}
		span.number span{
			border:10px solid transparent;
			border-width:10px 5px;
			display:block;
			width:0;
			height:0;
			margin:2px;
			border-bottom-width:0;
			border-bottom-color:#555555;
			border-top-color:#555555;
		}
		span.number span:hover{
			border-bottom-color:black;
			border-top-color:black;
		}
		span.number :first-child{
			border-bottom-width:10px;
			border-top-width:0;
		}


/*************************
 * Calendar
 *************************/
	div.calendar{
		display:inline-block;
		color:white;
	}
		div.calendar div{
			background:blue;
			position:absolute;
			width:auto;
			box-shadow:0 0 10px black;
			border-radius:5px;
		}
			div.calendar table{
			    border-collapse: collapse;
			    border-spacing: 0;
			    margin-bottom: 20px;
			    width:100%;
				width:auto;
				margin:10px;
			}
				div.calendar table caption{
					background:inherit;
					width:inherit;
					text-align:center;
					margin-bottom:10px;
				}
					div.calendar table caption .current{
						margin:0;
						text-align:center;
						display:inline-block;
						box-sizing:border-box;
						-moz-box-sizing:border-box;
						font-weight:bold;
					}
					div.calendar table caption a{
						float:left;
						text-align:left;
					}
					div.calendar table caption span + a{
						float:right;
						text-align:right;
					}
				div.calendar table th,
				div.calendar table td{
					text-align:center;
					border: 1px solid #99CCFF;
					border: 1px solid rgba(255,255,255,0.3);
					padding:0;
				}
				div.calendar table td{
					padding:0 6px;
				}
				div.calendar td.selected{
					background:#99CCFF;
				}

					div.calendar a{
						color:inherit;
						text-decoration:none;
					}

/*************************
 * Datalist
 *************************/
div.datalist{
	display:none;
	position:absolute;
	background-color:white;
	border:1px solid gray;
}
input.datalist + div.datalist{
	display:block;
}
	div.datalist ul{
		margin:5px;
		padding:0;
	}
		div.datalist ul li{
			list-style:none;
			padding:5px;
		}
		div.datalist ul li:hover, 
		div.datalist ul li.hover{
			text-decoration:underline;
			background-color:#efefef;
		}
datalist select{
	display:none;
}