﻿body
{
    width: 100%;
}

body * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.contentPanel .articleTitle
{ 
    height: 3.75em;
    width: 100%;
    overflow: hidden;
    margin-top:12px;
}

/*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;
}

/*if in snapped we need to modify the positioning scheme to allow us to insert the contents between existing nav elements*/
article .helpContent
{
    height: 616px;
    overflow: hidden;
    background-color: transparent;
    padding: 0 28px;
    position: absolute;
    left: 0px;
    top: 10em;
}

article .contentPanel
{
    height: 100%;
	width:100%;
	padding:64px 28px;
}

article .contentPanel .panelButtons
{
	left: 28px; /* safe region area on the right side: 480 - 28 - 386 ~ 64px */
	right: 28px;
	width:auto;
	width:344px;
}

.pageButton {
	margin:0;
	width:48%;
	outline: 0; 
}

 .pageButton:hover:not(:focus) {
    outline: 0; 
 }
 
.contentPanel .backLink {
    background: transparent url(left_arrow.png) no-repeat 28px 64px;
    margin: -64px 0 0 -28px;
}

.contentPanel .backLink:focus {
    background: transparent url(left_arrow_hoverFocus.png) no-repeat 28px 64px;
}

.contentPanel li {
	margin:0 -28px;
}


/*in snapped the safe area is on the right so these need to be different than in main.css*/
.helpMenu li a
{
    margin:0;
    padding:0 28px;
}

.helpContent ul li p {
	word-wrap: break-word;
}

.helpContent ul li p a {
	color:rgba(255,255,255,1);
}

.helpContent ul li {
	-webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	-o-column-break-inside:avoid;
	break-inside:avoid;
	
	-webkit-column-break-after:always;
	-moz-column-break-after:always;
	-o-column-break-after:always;
	break-after:always;
}

.contentPanel {
	background-image:url(assets/bg1.jpg);
	background-position:top right;
	background-repeat:no-repeat;
}

#GameControls .contentPanel, #InVehicleControls .contentPanel, #OnFootControls .contentPanel, #HeadsUpDisplay .contentPanel {
	background-image:url(assets/bg2.jpg);
}

#GameFeatures .contentPanel, #CharacterSwitching .contentPanel, #PlayerStats .contentPanel, #SpecialAbilities .contentPanel, #FirstPerson .contentPanel {
	background-image:url(assets/bg3.jpg);
}

#WelcomeToLosSantos .contentPanel, #WorldIntroduction .contentPanel, #Shopping .contentPanel, #Activities .contentPanel, #Entertainment .contentPanel, #LocalServices .contentPanel, #Economy .contentPanel {
	background-image:url(assets/bg4.jpg);
}

#SocialClubFeatures .contentPanel {
	background-image:url(assets/bg5.jpg);
}

#GTAOnline .contentPanel {
	background-image:url(assets/bg6.jpg);
}

#CharacterMigration .contentPanel, #CharacterTransfer .contentPanel, #PlayerExclusives .contentPanel {
	background-image:url(assets/bg7.jpg);
}