/**************************************************
* File: 			screen.css
* Site: 			Shiftees
* Author: 			Pete Ryan
* Email: 			pete@shiftees.com
* Description: 		Standard site CSS
**************************************************/

@charset "utf-8";

/*_______________________________________________
**									COMMON STYLES
*/

*									{ padding:0; margin:0; font-family: 'Open Sans', sans-serif; }
html								{ width:100%; height:100%; }
body								{ width:100%; height:100%; overflow:hidden; }
.clear								{ clear:both; }
.mirror								{ -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.container							{ width:100%; height:100%; position: relative; }

/*______________________________________________
**									HOME CONTENT
*/
#logo 								{ display:block; margin:0 auto; height:100%; border: none; }

/*____________________________________________
**									MOUSE INFO
*/
#mouse								{ position: absolute; top: 12px; right:12px; color:#fff; display: block; visibility: visible; }
#mouse img							{ width:36px; height:36px; position: absolute; top:0; right: 0; }
#mouse p 							{ position: absolute; top:6px; right:-300px; width: 300px; text-align: right; }
#mouse img:last-child 				{ animation:fader 3s; -moz-animation:fader 3s; -webkit-animation:fader 3s; -o-animation:fader 3s; animation:fader 3s infinite; }
#mouse:hover p						{ right:40px; animation:fly-in .3s; -moz-animation:fly-in .3s; -webkit-animation:fly-in .3s; -o-animation:fly-in .3s; animation:fly-in .3s; font-size: 18px; }

@media only screen and (max-width: 1000px) {
	#mouse							{ display: none; visibility: hidden; }
}

/*______________________________________________
**									CONTEXT MENU
*/

#context-menu						{ display:block; top:0; left:0; position: fixed; z-index: 1000; width:240px; background-color:#fff; border:1px solid #ddd; border-radius: 3px; }
#context-menu ul					{ list-style: none; margin: 0; padding: 6px 0 6px 0; box-shadow:0 2px 4px rgba(0, 0, 0, 0.2); }
#context-menu ul li 				{ margin: 0; width:100%; position: relative; }
#context-menu ul li a 				{ padding: 6px 12px 6px 12px; height:32px; display: block; width: 100%; text-decoration: none; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#context-menu ul li a:hover 		{ background-color: #eee; }
#context-menu ul li:last-child a 	{ border-bottom: none; }
#context-menu ul li a img 			{ display: inline-block; position:absolute; top:8px; width:16px; height:16px; }
#context-menu ul li a span 			{ display: inline-block; position:absolute; left:40px; top:8px; font-size: 12px; }

#context-menu ul li a.break			{ border-bottom:1px solid #ddd; padding-bottom:32px; margin-bottom:6px; }

#context-menu ul li > img			{ width:9px; height:8px; position: absolute; right: 6px; top: 12px; }

#context-menu ul li ul				{ position: absolute; left:240px; top:-7px; float:left; width:240px; background-color:#fff; border:1px solid #ddd; border-radius: 3px; visibility: hidden; }
#context-menu ul li:hover ul		{ visibility: visible; }

#context-menu ul li a.disabled		{ cursor: default; color:#aaa; }
#context-menu ul li a.disabled img	{ opacity:.5; }
#context-menu ul li a.disabled:hover{ background-color:#fff; }

.send-right							{ left:-240px !important; }
.send-up							{ bottom:0; top:auto !important; }

/*____________________________________________
**									ANIMATIONS
*/
@keyframes fly-in 					{ 0% { right:-300px; } 100% { right:40px; } }
@-moz-keyframes fly-in 				{ 0% { right:-300px; } 100% { right:40px; } }
@-webkit-keyframes fly-in 			{ 0% { right:-300px; } 100% { right:40px; } }
@-o-keyframes fly-in 				{ 0% { right:-300px; } 100% { right:40px; } }

@keyframes fader 					{ 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }
@-moz-keyframes fader 				{ 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }
@-webkit-keyframes fader 			{ 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }
@-o-keyframes fader 				{ 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }