﻿.wrapper {
	position: relative;	
}

.block {
	width: 200px;
	height: 150px;
	float: left;
	margin: 20px;
	text-align: center;
	line-height: 100px;
	cursor: pointer;
	padding: 25px 5px 0px 10px;
	/*position: absolute;*/

	-moz-transition-property: top,left,width,height;
	-webkit-transition-property: top,left,width,height;
	-o-transition-property: top,left,width,height;
	transition-property: top,left,width,height;
	-moz-transition-duration: 1s;
	-webkit-transition-duration: 1s;	
	-o-transition-duration: 1s;
	transition-duration: 1s;
}

	.block:nth-child(1) {
		background: #0da98d;
		
	}

		.block:nth-child(1):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(2) {
		background: #ff8666;	
	}

		.block:nth-child(2):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(3) {
		background: #E3A21A;		
	}

		.block:nth-child(3):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(4) {
		background: #9F00A7;		
	}

		.block:nth-child(4):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(5) {
		background: #666666;
	
	}

		.block:nth-child(5):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(6) {
		background: #19acca;
		
		}

		.block:nth-child(6):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
		.block:nth-child(7) {
			background: #1E7145;
		
		}


			.block:nth-child(7):hover {
				box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
				transform: translateY(-0.25em);
			}
		.block:nth-child(8) {
			background: #603CBA;
		
		}

			.block:nth-child(8):hover {
				box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
				transform: translateY(-0.25em);
			}

		.block:nth-child(9) {
			background: brown;
		
		}
			.block:nth-child(9):hover {
				box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
				transform: translateY(-0.25em);
			}

	.block:nth-child(10) {
		background: #99B433;
		
	}

		.block:nth-child(10):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}

	.block:nth-child(11) {
		background: #f11212;
	}

		.block:nth-child(11):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}

	.block:nth-child(12) {
		background: #2B5797;
	}

		.block:nth-child(12):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}


	.block:nth-child(13) {
		background: #4800ff;
	}

		.block:nth-child(13):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}
	.block:nth-child(14) {
		background: #a5a5a5;
	}

		.block:nth-child(14):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}



	.block:nth-child(15) {
		background: #cc6699;
	}

		.block:nth-child(15):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}


	.block:nth-child(16) {
		background: #999966;
	}

		.block:nth-child(16):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}

	.block:nth-child(17) {
		background: #8533ff;
	}

		.block:nth-child(17):hover {
			box-shadow: -7px -7px 15px 0 rgba(255, 255, 255, 0.7), 7px 7px 15px 0 rgba(0, 0, 0, 0.2);
			transform: translateY(-0.25em);
		}

.statbox {
	height: 120px;
	padding: 10px;
	position: relative;
	margin-bottom: 28px;
}
	
	.statbox .number {
		font-size: 40px;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.statbox .title {
		font-size: 16px;
		position: absolute;
		top: 50px;
		right: 10px;
	}

	.statbox .footer {
		background: rgba(0,0,0,.1);
		background-color: #19FFFFF;
		position: absolute;
		bottom: 0px;
		left: 0px;
		padding: 10px;
	}
	
	.statbox .footer:hover {
		background: rgba(0,0,0,.2);
	}
	
	.statbox .footer a {
		color: #fff;
		text-decoration: none;
	}

.widget {
	padding: 10px;
	margin-bottom: 28px;
}

.widget h2 {
	padding: 10px 10px 0px 10px;
	font-size: 18px !important;
	line-height: 18px !important;
	margin-bottom: -5px;
	font-weight: 300;
	text-shadow: 0px 1px 0px #fff;
}

.widget h2 .glyphicons i:before {
	margin-top: -7px;
	font-size: 20px !important;
	line-height: 20px !important;
}

/*.box {
	border: 2px solid #eee;
	background: #fff !important;
	margin-bottom: 28px;	
}

.box-header {
	height: 16px;
	font-size: 16px;
	line-height: 16px;
  	padding: 10px;
  	background: #eee;
	-webkit-box-shadow: none;
     	-moz-box-shadow: none;
          box-shadow: none;
	overflow: hidden;
}

.box-header h2{
	float:left;
	margin-top: 0px;
	font-weight: 300;
}

.box-header h2 i {
	margin: 0px 3px 0px 4px;
	opacity: .8;
	filter: alpha(opacity=80);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.box-header .break{
	border-left: 1px solid #FFF;
	margin: -12px 10px -10px 10px;
	padding: 12px 0px 10px 0px;
	
}

.box-header .box-icon {
	float:right;
	margin-top: 1px;
}

.box-header .box-icon i {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	opacity: .8;
	filter: alpha(opacity=80);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.box-header .box-icon i:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.box-header .box-icon a {
	margin: 0px 5px;
}

.box-content {
	position: relative;
	z-index: 50;
  	margin-top: -1px;
	padding: 10px;
	background: #fff !important;
}*/

/* Quick Buttons
=================================================================== */

.quick-button {
	border: 1px solid #ddd;
	margin-bottom: -1px;
  	padding: 30px 0px 10px 0px;
	font-size: 14px;
  	background-color: #fafafa;
  	-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: block;
    color: #646464;
    text-shadow: 0 1px 0px rgba(255, 255, 255, .6);
    text-align: center;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-image: linear-gradient(to bottom, #fafafa, #efefef);
}

.quick-button:hover {
	text-decoration: none;
	border-color: #a5a5a5;
	color: #444444;
	text-shadow: 0 1px 0px rgba(255, 255, 255, 1);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.25);
       -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.25);
          	box-shadow: 0px 0px 3px rgba(0,0,0,.25);
}
.quick-button:hover .notification {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.6);
       -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.6);
          	box-shadow: 0px 0px 3px rgba(0,0,0,.6);
}

.quick-button i {
	font-size: 32px;
}

/* Quick Buttons Metro Style
=================================================================== */

.quick-button.metro {
	position: relative;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
	filter: none;
	padding: 30px 10px 0px 10px;
	-webkit-border-radius: 0px;
       -moz-border-radius: 0px;
          	border-radius: 0px;
}

.quick-button.metro p {
	text-align: left;
	margin-top: 20px;
}

.quick-button.metro:hover {
	color: rgba(255,255,255,.9);
	text-shadow: none;
}

.quick-button.metro i {
	font-size: 64px;
	text-align: center !important;
}

.quick-button.metro .badge {
	text-align: center !important;
	position: absolute;
	top: 50%;
	left: 70%;
	background: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}


/* Quick Buttons Small
=================================================================== */

.quick-button-small {
	border: 1px solid #ddd;
  	padding: 15px 0px 0px 0px;
	font-size: 10px;
  	background-color: #fafafa;
  	-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    box-shadow: 0 1px 0px rgba(255, 255, 255, .8);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: block;
    color: #646464;
    text-shadow: 0 1px 0px rgba(255, 255, 255, .6);
    text-align: center;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-image: linear-gradient(to bottom, #fafafa, #efefef);
}

.quick-button-small:hover {
	text-decoration: none;
	border-color: #a5a5a5;
	color: #444444;
	text-shadow: 0 1px 0px rgba(255, 255, 255, 1);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
  	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.25);
       -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.25);
          	box-shadow: 0px 0px 3px rgba(0,0,0,.25);
}

.quick-button-small:hover .notification {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.6);
       -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.6);
          	box-shadow: 0px 0px 3px rgba(0,0,0,.6);
}

.quick-button-small i {
	font-size: 20px;
}

/* Main Colors
=================================================================== */

.black,
.black [class="box-header"],
.black.box,
.slider.black .ui-slider-range, 
.progress.black .ui-progressbar-value
.sliderVertical.black .ui-slider-range,
.progressSlim.black .ui-progressbar-value {
	background: #222 !important;
	border-color: #222 !important;
	color: #fff;
}

.black .box-header h2 i,
.black .box-header .box-icon i,
.black .box-header .box-icon i:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.green,
.green [class="box-header"],
.green.box,
.slider.green .ui-slider-range, 
.progress.green .ui-progressbar-value,
.sliderVertical.green .ui-slider-range,
.progressSlim.green .ui-progressbar-value,
.label-success,
.badge-success {
	background: #00A300 !important;
	border-color: #00A300 !important;
	color: #fff;
}

.greenDark,
.greenDark [class="box-header"],
.greenDark.box,
.slider.greenDark .ui-slider-range, 
.progress.greenDark .ui-progressbar-value,
.sliderVertical.greenDark .ui-slider-range,
.progressSlim.greenDark .ui-progressbar-value {
	background: #1E7145 !important;
	border-color: #1E7145 !important;
	color: #fff;
}

.greenLight,
.greenLight [class="box-header"],
.greenLight.box,
.slider.greenLight .ui-slider-range, 
.progress.greenLight .ui-progressbar-value,
.sliderVertical.greenLight .ui-slider-range,
.progressSlim.greenLight .ui-progressbar-value {
	background: #99B433 !important;
	border-color: #99B433 !important;
	color: #fff;
}

.pink,
.pink [class="box-header"],
.pink.box,
.slider.pink .ui-slider-range, 
.progress.pink .ui-progressbar-value,
.sliderVertical.pink .ui-slider-range,
.progressSlim.pink .ui-progressbar-value {
	background: #9F00A7 !important;
	border-color: #9F00A7 !important;
	color: #fff;
}

.pinkDark,
.pinkDark [class="box-header"],
.pinkDark.box,
.slider.pinkDark .ui-slider-range, 
.progress.pinkDark .ui-progressbar-value,
.sliderVertical.pinkDark .ui-slider-range,
.progressSlim.pinkDark .ui-progressbar-value {
	background: #7E3878 !important;
	border-color: #7E3878 !important;
	color: #fff;
}

.yellow,
.yellow [class="box-header"],
.yellow.box,
.slider.yellow .ui-slider-range, 
.progress.yellow .ui-progressbar-value,
.sliderVertical.yellow .ui-slider-range,
.progressSlim.yellow .ui-progressbar-value,
.label-warning,
.badge-warning {
	background: #FFC40D !important;
	border-color: #FFC40D !important;
	color: #fff;
}

.purple,
.purple [class="box-header"],
.purple.box,
.slider.purple .ui-slider-range, 
.progress.purple .ui-progressbar-value,
.sliderVertical.purple .ui-slider-range,
.progressSlim.purple .ui-progressbar-value {
	background: #603CBA !important;
	border-color: #603CBA !important;
	color: #fff;
}

.blue,
.blue [class="box-header"],
.blue.box,
.slider.blue .ui-slider-range, 
.progress.blue .ui-progressbar-value,
.sliderVertical.blue .ui-slider-range,
.progressSlim.blue .ui-progressbar-value,
.label-info,
.badge-info {
	background: #30BBDC !important;
	border-color: #30BBDC !important;
	color: #fff;
}

.blueDark,
.blueDark [class="box-header"],
.blueDark.box,
.slider.blueDark .ui-slider-range, 
.progress.blueDark .ui-progressbar-value,
.sliderVertical.blueDark .ui-slider-range,
.progressSlim.blueDark .ui-progressbar-value {
	background: #2B5797 !important;
	border-color: #2B5797 !important;
	color: #fff;
}

.blueLight,
.blueLight [class="box-header"],
.blueLight.box,
.slider.blueLight .ui-slider-range, 
.progress.blueLight .ui-progressbar-value,
.sliderVertical.blueLight .ui-slider-range,
.progressSlim.blueLight .ui-progressbar-value {
	background: #EFF4FF !important;
	border-color: #EFF4FF !important;
	color: #fff;
}

.orange,
.orange [class="box-header"],
.orange.box,
.slider.orange .ui-slider-range, 
.progress.orange .ui-progressbar-value,
.sliderVertical.orange .ui-slider-range,
.progressSlim.orange .ui-progressbar-value {
	background: #E3A21A !important;
	border-color: #E3A21A !important;
	color: #fff;
}

.orangeDark,
.orangeDark [class="box-header"],
.orangeDark.box,
.slider.orangeDark .ui-slider-range, 
.progress.oragneDark .ui-progressbar-value,
.sliderVertical.orangeDark .ui-slider-range,
.progressSlim.orangeDark .ui-progressbar-value {
	background: #DA532C !important;
	border-color: #DA532C !important;
	color: #fff;
}

.red,
.red [class="box-header"],
.red.box,
.slider.red .ui-slider-range, 
.progress.red .ui-progressbar-value,
.sliderVertical.red .ui-slider-range,
.progressSlim.red .ui-progressbar-value,
.label-important,
.badge-important {
	background: #EB3C00 !important;
	border-color: #EB3C00 !important;
	color: #fff;
}

.verde_vapo,
.verde_vapo [class="box-header"],
.verde_vapo.box,
.slider.verde_vapo .ui-slider-range, 
.progress.verde_vapo .ui-progressbar-value,
.sliderVertical.verde_vapo .ui-slider-range,
.progressSlim.verde_vapo .ui-progressbar-value,
.label-important,
.badge-important {
	background: #0da98d !important;
	border-color: #0da98d !important;
	color: #fff;
}

.rosso_vapo,
.rosso_vapo [class="box-header"],
.rosso_vapo.box,
.slider.rosso_vapo .ui-slider-range, 
.progress.rosso_vapo .ui-progressbar-value,
.sliderVertical.rosso_vapo .ui-slider-range,
.progressSlim.rosso_vapo .ui-progressbar-value,
.label-important,
.badge-important {
	background: #ff8666 !important;
	border-color: #ff8666 !important;
	color: #fff;
}

.blu-dw,
.blu-dw [class="box-header"],
.blu-dw.box,
.slider.blu-dw .ui-slider-range, 
.progress.blu-dw .ui-progressbar-value,
.sliderVertical.blu-dw .ui-slider-range,
.progressSlim.blu-dw .ui-progressbar-value,
.label-important,
.badge-important {
	background: #19acca !important;
	border-color: #19acca !important;
	color: #fff;
}

.blu-dwNW,
.blu-dwNW [class="box-header"],
.blu-dwNW.box,
.slider.blu-dwNW .ui-slider-range, 
.progress.blu-dwNW .ui-progressbar-value,
.sliderVertical.blu-dwNW .ui-slider-range,
.progressSlim.blu-dwNW .ui-progressbar-value,
.label-important,
.badge-important {
	background: #666666 !important;
	border-color: #666666 !important;
	color: #fff;
}

.widget.green h2 .glyphicons i:before,
.widget.greenDark h2 .glyphicons i:before,
.widget.greenLight h2 .glyphicons i:before,
.widget.pink h2 .glyphicons i:before,
.widget.pinkDark h2 .glyphicons i:before,
.widget.yellow h2 .glyphicons i:before,
.widget.purple h2 .glyphicons i:before,
.widget.blue h2 .glyphicons i:before,
.widget.blueDark h2 .glyphicons i:before,
.widget.blueLight h2 .glyphicons i:before,
.widget.orange h2 .glyphicons i:before,
.widget.orangeDark h2 .glyphicons i:before,
.widget.red h2 .glyphicons i:before {
	color: #fff;
}
