@font-face {
	font-family: slackey;
	font-style: normal;
	font-weight: normal;
	src: url(Slackey.ttf);
}

@font-face {
	font-family: "IM Fell";
	font-style: normal;
	font-weight: normal;
	src: url(IMFePIrm28P.ttf);
}

/* MAP */

#map-button {
	position: absolute;
	right: 2em;
	top: 5em;
	font-size: 100%;
	font-weight: bold;
}

#map {
	position: absolute;
	right: 2em;
	top: 8em;
	font-size: 100%;
	width: 400px;
	height: 300px;
	-moz-box-shadow: 0px 0px 15px 5px black;
	-webkit-box-shadow: 0px 0px 15px 5px black;
	box-shadow: 0px 0px 15px 5px black;
}

/* CLOCK */

#clock, #svg {
	position: absolute;
	right: 1em;
}

#clock #button {
	opacity: 0.5;
	stroke-width: 0.2;
	stroke: black;
	cursor: pointer;
}

#clock #background {
	fill: #aaa;
	stroke: black;
	stroke-width: 1;
}

#clock #button:hover { 
	opacity: 1; 
}

#clock text {
	font-family: slackey;
	font-size: 3px;
	text-anchor: middle;
	stroke-width: 0.1;
	stroke: black;
}

#clock .on {
	fill: #f00;
}

#clock .off {
	fill: #0f0;
}

#clock .active {
	stroke: yellow;
}

#clock .line {
	stroke: black;
	stroke-linecap: round;
}

#clock #line1 {
	stroke-width: 0.8;
}

#clock #line2 {
	stroke-width: 0.5;
}

/* SVG */

#svg {
	top: 2em;
	width: 300px;
	height: 300px;
}

#svg circle {
    fill: yellow;
    stroke: red;
}
#svg rect {
    fill: none;
    stroke: black;
    stroke-width: 0.2;
}
#svg text {
    text-anchor: middle;
    font-size: 1px;
}

/* CSS TRANSFORMS  */

#transform {
	padding: 5px;
	background-color: #eee;
	text-align: center;
	position: absolute;
	right: 2em;
	top: 5em;
	border: 1px solid gray;

	border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
	box-shadow: 5px 5px 15px black; -moz-box-shadow: 5px 5px 15px black; -webkit-box-shadow: 5px 5px 15px black;
	transform: rotate(45deg) skew(20deg); -moz-transform: rotate(45deg) skew(20deg); -webkit-transform: rotate(45deg) skew(20deg); -ms-transform: rotate(45deg) skew(20deg);
}

.slide-hidden #transform {
	display: none;
}

/* CSS FONT FACE */

.font-face {
	font-family: "IM Fell";
}

/* CSS EFFECTS */

#css-effects {
	text-shadow: 2px 2px 5px red;
	opacity: 0.75;

	box-shadow: 0px 0px 15px 5px blue; -moz-box-shadow: 0px 0px 15px 5px blue; -webkit-box-shadow: 0px 0px 15px 5px blue;
	border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffee88", endColorstr="#88ff88");
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffee88), to(#88ff88)); 
	background-image: -moz-linear-gradient(top, #ffee88, #88ff88);
	background-image: linear-gradient(#ffee88, #88ff88);
}

.stripe {
	background-image: url(img/stripe.png);
	padding-bottom: 1em;
}

/* CSS FLEXIBLE BOX */

#box-container {
	width: 400px;
	margin: auto;
	overflow: hidden; 
	border: 2px solid black;
}
	
#box-parent {
	display: -moz-box;
	display: -webkit-box;
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-moz-box-align: center;
	-webkit-box-align: center;
	height: 100px;
	width: 100%;
}
#box-parent div {
	padding: 1em;
	font-weight: bold;
}
#box1 {
	-moz-box-ordinal-group: 2;
	-webkit-box-ordinal-group: 2;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	background-color: #fcc;
}
#box2 {
	-moz-box-ordinal-group: 1;
	-webkit-box-ordinal-group: 1;
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	background-color: #cfc;
}
#box3 {
	-moz-box-ordinal-group: 2;
	-webkit-box-ordinal-group: 2;
	background-color: #ccf;
}	

/* CSS BUTTON */
#button {
	float: right;
	margin-right: 2em;
}

#button button::-moz-focus-inner {
	border: none;
}

#button button {
	cursor: pointer;
	font-size: 200%;
	border: 1px solid #666;
	padding: 0.1em 0.2em;
	
	text-shadow: 0em 0.03em 0.06em white;


	border-radius: 0.35em; 
	-moz-border-radius: 0.35em; 
	-webkit-border-radius: 0.35em;
	
	background-color: #bbb;
	outline: none;

	background-image: -moz-linear-gradient(top, #eee, #999);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#999999"); 
}

#button button:hover {
	background-image: -moz-linear-gradient(top, #ddd, #888);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#888)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dddddd", endColorstr="#888888");
}

#button button:active {
	box-shadow: 0px 0.1em 0.2em 0.1em #666 inset;
	-moz-box-shadow: 0px 0.1em 0.2em 0.1em #666 inset;
	-webkit-box-shadow: 0px 0.1em 0.2em 0.1em #666 inset;
}

/* CANVAS SUN */

.example-canvas .number {
	cursor: pointer;
}