/*
Theme Name: Temporary Status Symbols
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*	STATUS	*/

#timeline {margin:18px; text-align:center;}
#timeline a {color:#000; text-align:center;}

.status-text, .status-icon, status-datetime{ /*float:left; */display:block; margin-right:6px; font-size:11px; line-height:14px;}
 
.status-icon {display:inline-block; width:18px; height:18px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px;}
.status-text {font-weight:bold;}

.status-icon {background:url(images/icons-18x18.png) no-repeat;}
.available .status-icon {background-position:0 0;}
.away .status-icon { background-position:-36px 0!important;}
.offline .status-icon {background-position:-54px 0!important;}
.busy .status-icon {background-position:-18px 0!important;}

.status-wrap {font-size:12px; line-height:18px; display:block; margin-bottom:6px; min-height:18px; line-height:18px;  text-align:center; }

.compact {width:100%; margin:auto; padding-top:0;}
.compact .status-wrap {line-height:32px; display:inline-block; margin-bottom:16px; height:32px; width:32px; }

.compact .status-icon {cursor:pointer; display:block; width:100%; height:100% }
.compact .status-text, .compact .status-datetime {/*display:none;*/}


.compact #container { position:absolute; left:0; top:0; width: 100%; height: 100%; display: table; }
.compact #position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }	
.compact #canvas-wrapper {margin:auto;}

#homepage-title, #homepage-title * {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

#homepage-title {
position: fixed;
width:100%;
top: 40%;

text-align: center;

}


#inner-title {width:285px; margin:auto;background: white; background: rgba(255, 255, 255, .9);
padding:18px;}

.scrolled-view #homepage-title {/*width:100%;*/top: 0;}
/*.scrolled-view #homepage-title #inner-title {width:100%; margin:auto;background: white; background: rgba(255, 255, 255, .9);border: none; padding:6px;}*/


#homepage-title h1{
text-transform: uppercase;
line-height: 28px;
font-size: 24px;
margin-bottom:6px
}

#homepage-title h1 strong {font-weight:bold;}

#timeline-nav {position: fixed; bottom:0; left:0; right:0; padding:9px; text-align:center; background:#fff; border:2px solid #eee; text-transform:uppercase;}
#timeline-nav a {text-decoration:none; color:#333;}


.compact #canvas-wrapper,.compact-16 #canvas-wrapper { width:100%;}
.compact-32 #canvas-wrapper { width:100%;}
.compact-64 #canvas-wrapper { width:100%;}
.compact-128 #canvas-wrapper { width:100%;}

.compact .status-icon, .compact-16 .status-icon {background:url(images/icons-18x18.png) no-repeat; width:18px;}
.compact-32 .status-icon {background:url(images/icons-32x32.png) no-repeat; width:32px;}
.compact-64 .status-icon {background:url(images/icons-64x64.png) no-repeat; width:64px;}
.compact-128 .status-icon {background:url(images/icons-128x128.png) no-repeat; width:128px;}


.compact .status-wrap, .compact-16 .status-wrap {margin-right:9px; width:60px; height:18px; text-align:center;}
.compact-32 .status-wrap {margin-right:16px; width:32px; height:32px;}
.compact-64 .status-wrap {margin-right:32px; width:64px; height:64px;}
.compact-128 .status-wrap {margin-right:64px; width:128px; height:128px;}

.compact .available .status-icon, .compact-16 .available .status-icon {background-position:0 0;}
.compact .away .status-icon, .compact-16 .away .status-icon { background-position:-36px 0!important;}
.compact .offline .status-icon, .compact-16 .offline .status-icon {background-position:-54px 0!important;}
.compact .busy .status-icon, .compact-16 .busy .status-icon {background-position:-18px 0!important;}

.compact-32 .available .status-icon {background-position:0 0;}
.compact-32 .away .status-icon { background-position:-64px 0!important;}
.compact-32 .offline .status-icon {background-position:-96px 0!important;}
.compact-32 .busy .status-icon {background-position:-32px 0!important;}

.compact-64 .available .status-icon {background-position:0 0;}
.compact-64 .away .status-icon { background-position:-128px 0!important;}
.compact-64 .offline .status-icon {background-position:-192px 0!important;}
.compact-64 .busy .status-icon {background-position:-64px 0!important;}

.compact-128 .available .status-icon {background-position:0 0;}
.compact-128 .away .status-icon { background-position:-256px 0!important;}
.compact-128 .offline .status-icon {background-position:-384px 0!important;}
.compact-128 .busy .status-icon {background-position:-128px 0!important;}


/* SINGLE */

	body.single-post, .page-template-current-php { /*font-family:Arial, Helvetica, sans-serif;*/}
	
	.single-post #container, .page-template-current-php #container { position:absolute; left:0; top:0; width: 100%; height: 100%; display: table; }
	.single-post #position, .page-template-current-php #position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }	
	
	.single-post #status, .page-template-current-php #status {width:500px; padding-top:500px; background:url(images/icons.png) no-repeat; margin:auto; text-align:center; font-size:24px;}
	#status #the_author {color:#333;}
	#status #date_status {color:#888;}
	
	.single-post #timeline-link,.page-template-current-php #timeline-link {margin-top:9px;}
	.single-post #timeline-link a, .page-template-current-php #timeline-link a {color:#333;}
	.single-post #timeline-link a:hover, .page-template-current-php #timeline-link a:hover {color:#000;}
	 
	.single-post .available, .page-template-current-php .available {background-position:0 0!important;}
	.single-post .away, .page-template-current-php .away {background-position:-1000px 0!important;}
	.single-post .busy, .page-template-current-php .busy {background-position:-500px 0!important;}
	.single-post .offline, .page-template-current-php .offline {background-position:-1500px 0!important;}	

#preloader {
	background:#fff url(/wp-content/uploads/2012/12/ajax-loader.gif) center no-repeat fixed;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	
	position:fixed; 
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10000;
	display:none;
	text-align:center;

}

#preloader span { display:inline-block; background:#F30; margin:18px; margin-top:100px; padding:6px; font-size:14px; color:#fff; text-shadow:1px 1px #900;}

.loading #preloader {
	display:block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	
}