/* templates */


/* !Global Styles */
* {
margin: 0;
padding: 0;
}
@font-face {
    font-family: 'DharmaGothic';
    src: url('../fonts/DharmaGothicE_Bold_R-webfont.eot');
    src: url('../fonts/DharmaGothicE_Bold_R-webfont.eot?iefix') format('eot'),
         url('../fonts/DharmaGothicE_Bold_R-webfont.woff') format('woff'),
         url('../fonts/DharmaGothicE_Bold_R-webfont.ttf') format('truetype'),
         url('../fonts/DharmaGothicE_Bold_R-webfont.svg#webfontJywh78ok') format('svg');
    font-weight: normal;
    font-style: normal;
	text-transform: uppercase;
}

/* devices (portrait and landscape) ----------- */


body{
	background: #2a2a2a;
	
}
 

	
	#clockposterwrapper{
		position: absolute;
		width: 100%;
		height: 900px;
		background: #fff;
	}
	#clockposter{
		position: relative;
		width: 100%;
		height: 900px;
		margin: 0 auto;
		background: #fff;
		z-index: 0;
	}
	#outerwrapper{
		position: absolute;
		width: 100%;
		height: 800px;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	#clockwrapper{
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: 0px;
		left: 0px;
		width: 600px;
		height: 900px;
		margin: 0 auto;
		z-index: 2;
	}
	#wallpaper{
		position: static;
		width: 100%;
		height: 900px;
		overflow: hidden;
		z-index: -1;
	}
	#darkwallpaper{
		position: absolute;
		top: 0;
		width: auto;
		height: auto;
		display: block;
		background: #0f1519;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
		clear: both;
		z-index: 0;
	}
	.mycanvas{
		position:absolute;
		width:550px;
		height:550px;
		margin-left:auto;
		margin-right:auto;
		clear:both;
		top: 0px;
		z-index:5;
	}
	h1{
		color: #5c7888;
		z-index: 1;
		height: 70px;
		text-transform: uppercase;
		letter-spacing: 6px;
		font: 70pt 'DharmaGothic', "Helvetica Neue Light","Helvetica Neue", sans-serif;
	}
	h2{
		color: #6c6c6c;
		letter-spacing: 1pt;
		font: 16px 'abel', sans-serif;
		padding: 10px 0px 0px 0px;
		text-transform: uppercase;
	}
	h3{
		color: #de4d3e;
		letter-spacing: 1pt;
		font: 13px 'Times', sans-serif ;
		font-weight: bold;
		padding:0px 0px 0px 0px;
		text-transform: uppercase;
		z-index: 3;
	}
	p{
		font: 13px 'times', serif;
		font-weight: bold;
		text-align: center;
		color: #5c7888;
		line-height: 20px;
		word-spacing: 0pt;
		letter-spacing: .1em;
	}
	a{
		color: #de4d3e;
		font: 11px 'Georgia', serif;
		text-align: center;
		font-style: italic;
		line-height: 18px;
		word-spacing: 1pt;
		letter-spacing: .1em;
	}
	
	
	/* !Landing Page Styles */
	
	#header{
		width:100%;
		text-align: center;
		padding-bottom: 40px;
	}
	#divider{
		width: 100%;
		height: 20px;
		background: url("../images/divider.png") center no-repeat;
	}
	#titleswrapper{
		margin-left:auto;
		margin-right:auto;
		width: 1200px;
	}
	#citytitles{
		position: relative;
		font: 30pt 'DharmaGothic';
		letter-spacing: 2pt;
		text-transform: uppercase;
		color: #644564;
		width: 400px;
		text-align: center;
		float: left;
	}
	#cityclock{
		position: relative;
		float: left;
		width: 400px;
		height: 400px;
		text-align: center;
		margin-top: 60px;
	}
	#overviewclocks{
		width: 1200px;
		border-top: 1px dashed #797979;
		margin-left:auto;
		margin-right:auto;
		margin-top: 160px;
	}
	#footer{
		
	}
	
	
	/* !Single Clock Styles */
	
	#seattletitle{
		position: relative;
		width: 450px;
		height: 85px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -40px;
		padding-bottom: 8px;
		background: url("../images/seattleTitle.png")no-repeat;
	}
	#stockholmtitle{
		position: relative;
		width: 450px;
		height: 85px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -40px;
		padding-bottom: 8px;
		background: url("../images/stockholmTitle.png")no-repeat;
	}
	#clockwrapper{
		position: relative;
		width: 550px;
		height: 550px;
		clear: both;
		
	}
	#clockmarkings{
		position: relative;
		width: 550px;
		height: 550px;
		margin-left: auto;
		margin-right: auto;
		filter:alpha(opacity=1);
		-moz-opacity:1.0;
		opacity:1.0;
		background: #ffffff;
		background: url("../images/lightMarkings.png");
		clear: both;
	
	}
	#dropshadow{
		position: relative;
		top: -550px;
		width: 550px;
		height: 550px;
		margin-left: auto;
		margin-right: auto;
		filter:alpha(opacity=100);
		-moz-opacity:1.0;
		opacity:1.0;
		background: #ffffff;
		background: url("../images/dropshadow.png");
	}
	#key{
		position: relative;
		width: 450px;
		height: 40px;
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		border-top: 1px solid rgba(88,100,104,.50);
		background: url("../images/key.png") no-repeat;
	}
	#description{
		position: relative;
		width: 450px;
		border-top: 1px solid rgba(88,100,104,.50);
		padding: 20px 0px 20px 0px;
		margin-left: auto;
		margin-right: auto;
	}
	#footerline{
		position: relative;
		width: 450px;
		height: 12px;
		top: -6px;
		display: block;
		background: url("../images/footerLine.png");
		margin-left: auto;
		margin-right: auto;
	}
	#tabs{
		width: 700px;
		height: 300px;
		top: 0px;
		position: relative;
		z-index: 0;
	}
	.tabgroups{
		position: relative;
		height: 35px;
	}
	#closetoggle{
		position: relative;
		float: left;
		background: #fff url("../images/closeToggle.png") center center no-repeat;
	}
	#closeinfo{
		position: relative;
		top: 0px;
		width: 200px;
		height: 19px;
		float: left;
		z-index: 1;
		color: #de4d3e;
		letter-spacing: 1pt;
		font: 12pt 'DharmaGothic', sans-serif;
		padding: 8px;
		text-transform: uppercase;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
	}
	#colortoggle{
		position: relative;
		float: left;
		background: #fff url("../images/colorToggle.png") center center no-repeat;
	}
	#colorinfo{
		position: relative;
		top: 0px;
		width: 200px;
		height: 19px;
		float: left;
		z-index: 1;
		color: #de4d3e;
		letter-spacing: 1pt;
		font: 12pt 'DharmaGothic', sans-serif;
		padding: 8px;
		text-transform: uppercase;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
	}
	#marktoggle{
		position: relative;
		float: left;
		background: #fff url("../images/markToggle.png") center center no-repeat;
	}
	#markinfo{
		position: relative;
		top: 0px;
		width: 200px;
		height: 19px;
		float: left;
		color: #de4d3e;
		letter-spacing: 1pt;
		font: 12pt 'DharmaGothic', sans-serif;
		padding: 8px;
		text-transform: uppercase;
		z-index: 1;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
	}
	#infotoggle{
		position: relative;
		float: left;
		background: #fff url("../images/infoToggle.png") center center no-repeat;
	}
	#infoinfo{
		position: relative;
		top: 0px;
		width: 200px;
		height: 19px;
		float: left;
		color: #de4d3e;
		letter-spacing: 1pt;
		font: 12pt 'DharmaGothic', sans-serif;
		vertical-align: middle;
		text-transform: uppercase;
		padding: 8px;
		z-index: 1;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
	}
	.tab{
		position: relative;
		cursor: pointer;
		width: 35px;
		height: 35px;
		padding-right: 10px;
	}
	
	#info{
		position: relative;
		clear: both;
		margin: 0 auto;
		top: -300px;
		text-align: center;
		background: rgba(0,0,0,0.80);
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
		width: 700px;
		height: 1100px;
		-moz-box-shadow: 0 0 1em gold;
		-webkit-box-shadow: 0 0 1em gold;
		box-shadow: 0 0 3em #999;
		z-index:6;
		visibility: hidden;
	}
	#info.p{
		font-family: Helvetica;
	}
	#close{
		position: relative;
		cursor: pointer;
		width: 25px;
		height: 25px;
		color: #333;
		padding: 5px;
		padding-right: 14px;
		background: #fff url("../images/closeToggle.png") center center no-repeat;
	}
	#numpad{
		position: relative;
		top: -1250px;
		margin: 0 auto;
		display: block;
		width: 300px;
		height: 184px;
		z-index:6;
		filter:alpha(opacity=0);
		-moz-opacity:0.0;
		opacity:0.0;
		visibility: hidden;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-image: linear-gradient(bottom, rgb(51,75,87) 0%, rgb(101,125,137) 100%);
		background-image: -o-linear-gradient(bottom, rgb(51,75,87) 0%, rgb(101,125,137) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(51,75,87) 0%, rgb(101,125,137) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(51,75,87) 0%, rgb(101,125,137) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(51,75,87) 0%, rgb(101,125,137) 100%);
		
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, rgb(51,75,87)),
			color-stop(1, rgb(101,125,137))
		);
		-moz-box-shadow:    0px 3px 0px #1d2e36,
				0px -1px 10px rgba(256,256,256,0.5),
				 0px 14px 10px rgba(0,0,0,0.15),
				 0px 24px 2px rgba(0,0,0,0.1),
				 0px 34px 50px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0px 3px 0px #1d2e36,
				0px -1px 10px rgba(256,256,256,0.5),
				 0px 14px 10px rgba(0,0,0,0.15),
				 0px 24px 2px rgba(0,0,0,0.1),
				 0px 34px 50px rgba(0,0,0,0.5);
		 box-shadow:         0px 3px 0px #1d2e36,
				0px -1px 10px rgba(256,256,256,0.5),
				 0px 14px 10px rgba(0,0,0,0.15),
				 0px 24px 2px rgba(0,0,0,0.1),
				 0px 34px 50px rgba(0,0,0,0.5);
	}
	.number{
		position: relative;
		float: left;
		width: 58px;
		padding:26px 0px 13px 0px;
		height: 52px;
		color: #e5ecee;
		text-align: center;
		letter-spacing: 1pt;
		font: 25pt 'DharmaGothic', sans-serif;
		text-transform: uppercase;
	}
	.number:hover{
		background: rgba(51,66,74,1.0);
	}
	.number:active{
		background: rgba(231,61,47,1.0);
	}
	#num1{
		border-right: solid 1px #4d636e;
		border-bottom: solid 1px #6d818a;
	}
	#num1:hover{
		background: rgba(51,66,74,1.0);
	}
	#num1:active{
		background: rgba(231,61,47,1.0);
	}
	#num2{
		border-right: solid 1px #4d636e;
		border-left: solid 1px #6d818a;
		border-bottom: solid 1px #6d818a;
	}
	#num3{
		border-right: solid 1px #6d818a;
		border-left: solid 1px #6d818a;
		border-bottom: solid 1px #6d818a;
	}
	#num4{
		border-right: solid 1px #6d818a;
		border-left: solid 1px #4d636e;
		border-bottom: solid 1px #6d818a;
	}
	#num5{
		border-left: solid 1px #4d636e;
		border-bottom: solid 1px #6d818a;
	}
	#num6{
		border-right: solid 1px #4d636e;
		border-top: solid 1px #4d636e;
	}
	#num7{
		border-right: solid 1px #4d636e;
		border-left: solid 1px #6d818a;
		border-top: solid 1px #4d636e;
	}
	#num8{
		border-right: solid 1px #6d818a;
		border-left: solid 1px #6d818a;
		border-top: solid 1px #4d636e;
	}
	#num9{
		border-right: solid 1px #6d818a;
		border-left: solid 1px #4d636e;
		border-top: solid 1px #4d636e;
	}
	#num0{
		border-left: solid 1px #4d636e;
		border-top: solid 1px #4d636e;
	}