/* This file is intended to contain rules that will allow "skinning" of your manual by changeing the colors, fonts and background images. You should not place any rules here
that modify positioning or size or other layout properties*/


body
{
  /*these are the standard fallbacks that are design approved for the majority of the supported devices.*/
  font-family:Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;

  color:#ebebeb; /*xboxwhite*/
  background:#000 url("images/backgrounds/Background_main_tablet.jpg") fixed no-repeat;
}

.contentPanel .articleTopic
{
    font-size:1em;
    margin-left:0px;
}

article .contentPanel
{
    background-color:transparent;
}

div.subHeader {
	top: 0px;
	margin:0px;
	padding: 10px 2px 2px 0px;
	border-width: 2px;
	border-bottom-width:2px;
	border-bottom-color:White;
	border-bottom-style: solid;
	color: white;
	text-shadow:
	-1px -1px 0 #000,
	1px -1px 0 #000,
	-1px 1px 0 #000,
	1px 1px 0 #000;
	width: 100%;
}

.helpContent ul:not(.breadcrumb)
{
    margin-left:20px;
}

    a.tooltip strong {line-height:30px;}
    a.tooltip > span 
    {
	    width:200px;
	    padding: 10px 20px;
	    margin-top: 43px;
	    margin-left: -100px;
	    opacity: 0;
	    visibility: hidden;
	    z-index: 10;	   
	    position: absolute;

	    font-family: Arial;
	    font-size: 12px;
	    font-style: normal;  
        	    
	    -webkit-border-radius: 2px;
	    -moz-border-radius: 2px;
	    -o-border-radius: 2px;
	    border-radius: 2px;
	    
	    
        -webkit-box-shadow: 2px 2px 2px #050505;
	    -moz-box-shadow: 2px 2px 2px #050505;		
	    box-shadow: 3px 3px 8px #050505;	    
	    
	    -webkit-transition-property:opacity, margin-top, visibility, margin-left;
	    -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -moz-transition-property:opacity, margin-top, visibility, margin-left;
	    -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    -o-transition-property:opacity, margin-top, visibility, margin-left;
	    -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	
	    transition-property:opacity, margin-top, visibility, margin-left;
	    transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
	    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    }
    
	a.tooltip:hover > span
	{
		opacity: 1;
		text-decoration:none;
		visibility: visible;
		overflow: visible;
		display: inline;
	}

	a.tooltip span b {
    
		width: 15px;
		height: 15px;
		margin-left: 20px;
		margin-top: -19px;
			
		display: block;
		position: absolute;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);

			
		display: none\0/;
		*display: none;
	}
    
a.tooltip > span {
	color: #FFF; 

	background: #460000;
	background: -moz-linear-gradient(top, #460000 15%, #550000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#460000', endColorstr='#550000',GradientType=0 );
	    
	border: 1px solid #A24556;	     
}    
	  
a.tooltip span b {
	background: #460000;
	border-top: 1px solid #A24556;
	border-right: 1px solid #A24556;
}    

.helpMenu ul:hover:not(.breadcrumb) a:hover:not(.breadcrumb){
    /*background-color:rgba(250,250,230,0.1);*/
    outline:none;
}

.breadcrumb {
	margin-left: 30px;
}
.breadcrumb li { 
	float: left;	
}
.breadcrumb li a {
	position: relative; 
	display: block;
	float: left;
	height:16px;
}

.breadcrumb li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2;
	
}

.breadcrumb li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 2px;
	left: 100%;
	z-index: 1;
}

.breadcrumb li:first-child a {
	margin-left: 10px;
}

/* ADJUSTING IMGCONTAINERGRID SIZE - SNAP MODE ONLY*/
@media only screen and (orientation:portrait) and (min-width: 336px) and (max-width: 480px) and (min-height: 901px) and (max-height: 1080px)
{
    .imgContainerGrid {  
        transform: scale(0.44,0.44);
    	-ms-transform: scale(0.44,0.44); /* IE 9 */
	   -webkit-transform: scale(0.44,0.44); /* Safari and Chrome */
    }
}

/* ADJUSTING IMGCONTAINERGRID SIZE - PHONE MODE ONLY*/
@media only screen and (orientation:portrait)  and (max-height: 900px),
(orientation:portrait) and (min-height: 1081px),
(orientation:portrait) and (max-width: 335px) and (min-height: 901px) and (max-height: 1080px),
(orientation:portrait) and (min-width: 481px) and (min-height: 901px)
{
    .imgContainerGrid {  
        transform: scale(0.38,0.38);
    	-ms-transform: scale(0.38,0.38); /* IE 9 */
	   -webkit-transform: scale(0.38,0.38); /* Safari and Chrome */
    }

    .imgContainerGrid div#txtItem { /* USE ID="linkImg" FOR CLICKABLE IMAGES */
        font-size:1.7em;
        padding-top:10px;
    }

}

/*this would for example override the white background and text color on active links*/
.pageButton:hover, .contentPanel a:hover
{
    /*background-color: #ee4036;
    color:#222;*/
}

/*and this would modify the focus outline*/
a:focus, a:hover, button:focus, button:hover
{
   /*outline:thick double #ee4036;*/
}


article a.articleTitle, article a.articleTitle:visited 
{
    color:#6b6b6b;
}


/* BEGIN UNUSED CODE */
div.bloodSplatter
{
    position:fixed;
    width:100%;
    height:100%;
    animation-name: kfFade;
    -webkit-animation-name: kfFade;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
    animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-direction: alternate;
	-webkit-animation-direction: alternate;
    pointer-events:none; 
}

.kinectSpeech {
	color: #66CC66;
}

@keyframes kfFade{
0% {
opacity:0;
}
20% {
opacity:0.3;
}
40% {
opacity:0.5;
}
60% {
opacity:0;
}
80% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes kfFade2{
0% {
opacity:0;
}
20% {
opacity:0;
}
40% {
opacity:0.3;
}
60% {
opacity:0.5;
}
80% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes kfFade3{
0% {
opacity:0;
}
20% {
opacity:0;
}
40% {
opacity:0;
}
60% {
opacity:0.3;
}
80% {
opacity:0.5;
}
100% {
opacity:0;
}
}

@keyframes kfFade4{
0% {
opacity:0.5;
}
20% {
opacity:0;
}
40% {
opacity:0;
}
60% {
opacity:0;
}
80% {
opacity:0.3;
}
100% {
opacity:0.5;
}
}

@-webkit-keyframes kfFade{ /* Safari and Chrome */
0% {
opacity:0;
}
20% {
opacity:0.3;
}
40% {
opacity:0.5;
}
60% {
opacity:0;
}
80% {
opacity:0;
}
100% {
opacity:0;
}
}

@-webkit-keyframes kfFade2{ /* Safari and Chrome */
0% {
opacity:0;
}
20% {
opacity:0;
}
40% {
opacity:0.3;
}
60% {
opacity:0.5;
}
80% {
opacity:0;
}
100% {
opacity:0;
}
}

@-webkit-keyframes kfFade3{ /* Safari and Chrome */
0% {
opacity:0;
}
20% {
opacity:0;
}
40% {
opacity:0;
}
60% {
opacity:0.3;
}
80% {
opacity:0.5;
}
100% {
opacity:0;
}
}

@-webkit-keyframes kfFade4{ /* Safari and Chrome */
0% {
opacity:0.5;
}
20% {
opacity:0;
}
40% {
opacity:0;
}
60% {
opacity:0;
}
80% {
opacity:0.3;
}
100% {
opacity:0.5;
}
}

.navLinks .bloodBand{
    width:512px;
    height:64px;
    background: url("images/texture/blood_menu_band.png") no-repeat;
    background-size: 100%;
    background-position:-230px -5px;
    opacity: 0.1;
    transition:background-position  2s, opacity 3s;
    -webkit-transition:background-position  1s, opacity 1s;
}

.navLinks .bloodBand:hover{
    background-position:-170px -5px;
    opacity: 0.6;
}

/*Simple image container for grid-based layouts*/
.imgContainerGrid {

    float:left;
    position: relative;
    /*border: 5px solid red;*/
    
    transform: scale(0.5,0.5);
	-ms-transform: scale(0.5,0.5); /* IE 9 */
	-webkit-transform: scale(0.5,0.5); /* Safari and Chrome */
}

.imgContainerGrid div {
    position: absolute;
    background: #ccc;
    /*outline: 5px dashed #FFF*/
}

.imgContainerGrid div a{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration:none; /* Makes sure the link   doesn't get underlined */
    z-index:10; /* raises anchor tag above everything else in div */ 
    background-color:white; /*workaround to make clickable in IE */ 
    opacity: 0; /*workaround to make clickable in IE */ 
    filter: alpha(opacity=1); /*workaround to make clickable in IE */
}

.imgContainerGrid div#txtItem { /* USE ID="txtItem" FOR TEXTS */
    background:transparent;
    text-align:center;
    font-size:1.4em;
}

.imgContainerGrid div.linkImg { /* USE ID="linkImg" FOR CLICKABLE IMAGES */
    opacity: 0.5;
    filter: alpha(opacity=0.7);
}

.imgContainerGrid div.linkImg:hover {
    opacity: 1; /*workaround to make clickable in IE */ 
    filter: alpha(opacity=1); /*workaround to make clickable in IE 8 AND EARLIER */
}
/* END UNUSED CODE */