﻿body
{
    width: 480px;
}

.contentPanel .articleTitle
{ 
    height: 3.5em;

    width: 100%;
    overflow: hidden;
    margin-top:8px;
}


/*if the element is a main menu or a sub menu hide the placeholder element to the right*/
.helpMenu .helpContent
{
    display: none;
}

nav.contentPanel
{
    /*padding: 64px 64px 64px 28px;*/
	padding: 40px 64px 48px 28px;
}

/*if in snapped we need to modify the positioning scheme to allow us to insert the contents between existing nav elements*/
article .helpContent
{
    height: 700px;
    overflow: hidden;
    background-color: transparent;
    padding: 0 0 0 28px;
    position: absolute;

    left: 0px;
    /*top: 10em;*/
	top: 8em;
    /*column-width: 424px;*/
    column-width:384px;
}



article .contentPanel
{
    height: 100%;
}

article .contentPanel .panelButtons
{
   left: 28px; /* safe region area on the right side: 480 - 28 - 386 ~ 64px */
}

/*in snapped the safe area is on the right so these need to be different than in main.css*/
.helpMenu li a
{
    margin:0px -26px 0 -26px;
    padding:9px 60px 8px 26px;
	width: 100%;
}

.contentPanel a:focus
{
	
}

.helpContent  .title
{
	display:block;
	margin: 14px 0 5px 0;
	
}

.helpContent .subtitle
{
	/*display:block;*/
	font-size: 1.1em;
	margin: 14px 0 5px 0;
}

.helpContent .subtitle02
{
	/*display:block;*/
	font-size: 1.1em;
	margin: 14px 0 5px 0;
}

.helpContent .stats
{
	display:block;
	margin: 4px 0 16px 0;
}

.helpContent ul
{
	margin: 5px 0 10px 0;
}
.helpContent li
{
	list-style-type:none;
	margin-left: 25px;
}



.helpContent .icon img
{
	vertical-align: middle;
	display:inline;
	padding-right:0.5em;
	/*height: 20%;*/
	/*width: 25%;*/
	
}

.helpContent .icon
{
	
	display:block;
}




article .contentPanel .articleTitle .articleTopic
{
	font-size: 0.8em;
	height:1.5em;
	width: 100%;
	background-image: url("textures/shape_top_line.png");
	background-repeat: no-repeat;	
	background-position: 50% 1.2em;
}

.helpContent .bigicon
{
	margin: 20px 0 0 0;
}

.helpContent .solo
{
	display:block;
}
#TOC .fp_logo
{
	display:block;
	height:100%;
	width:100%;
	background-image: url("textures/shape_logo.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 75%;
}

#TOC .articleTitle 
{
	
	padding:.75em 0 1.2em 0;
	text-align:center;
}

li a:hover 
{
	color:#ff751a;
	background-image: url("textures/bg_selection_xs.png");
	background-repeat: no-repeat;
}

.contentPanel a:focus
{
	color:#ff751a;
	background-image: url("textures/bg_selection_xs.png");
	background-repeat: no-repeat;
}

article
{
	background-image: url("textures/bg.png");
	/* background-image: url("textures/bg_top_left.png"),url("textures/bg_top_right.png"),url("textures/bg_bottom_left.png"), url("textures/bg_bottom_right.png"); */
	background-position: left top, right top, left bottom, right bottom;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
}	