/* Safari 4.0 - 8.0 */
@-webkit-keyframes backgroundColorChange {
    0%   {background-color:#9c7ec1;}
    50%  {background-color:#c17e7e;}
    100%  {background-color:#9c7ec1;}
}

/* Standard syntax */
@keyframes backgroundColorChange {
    0%   {background-color:#9c7ec1;}
    50%  {background-color:#c17e7e;}
    100%   {background-color:#9c7ec1;}
}

@-webkit-keyframes backgroundColorChange_2 {
    0%   {background-color:#5b8ba6;}
    50%  {background-color:#7b5ba6;}
    100%  {background-color:#5b8ba6;}
}

/* Standard syntax */
@keyframes backgroundColorChange_2 {
    0%   {background-color:#5b8ba6;}
    50%  {background-color:#7b5ba6;}
    100%   {background-color:#5b8ba6;}
}

body {
	/*font-family: "Raleway", sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px 0px;
    
    background-image: url("content/MainMenuBackground.jpg");
    background-color: #410000;
  /*height: 500px; /* You must set a specified height */*/
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

img {
	max-width: 100% ;
	width: auto ;
	height: auto ;
}

div#outer_container {
    float: none ;
    width: 100% ;
    background-image: url(content/background_shadow_outline.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-attachment: fixed;
}


div#main_body {
    max-width: 1024px ;
    margin: auto;
    width: 100% ; 
    color: black ; 
    padding: 10px  0px;
    background-image: url("content/background_pattern_3.png"); 
    background-size: 50%;
    
}
@media only screen and (max-width: 629px) {
	div#main_body {
        padding: 10px 0px;
		float: none ;
		width: 100%;
	}
}

/*------------------------------- Tag Line -----------------------------*/


div#one_line_sell {
    text-align: center;
    font-size: 80%;
    margin: auto;
    width: 80%;
    padding: 5px;
	background-color: #eeee ;
    border-radius: 10px;
    margin-top: 5px;
}
@media only screen and (max-width: 629px) {
	div#one_line_sell {
        text-align: center;
        margin: auto;
        width: 90%;
        padding: 5px;
        background-color: #fff ;
        border-radius: 10px;
        margin-top: 5px;
	}
}

/*------------------------------- Deluxe Store Links -----------------------------*/

div#game_logo_artwork
{
    width: 80%;
    margin: auto;
    text-align: center;
}

div#store_links_deluxe
{
    text-align: center;
    margin: auto;
    width: 80%;
}
div#store_links_deluxe ul {
	padding: 0px;
    text-align: center;
}
div#store_links_deluxe li {
    padding: 5px;
    display: inline-block;
    width: 45%;
}
div#store_links_deluxe li a {
    text-decoration: none ;
    display: inline ;
}

@media only screen and (max-width: 629px)
{
    div#store_links_deluxe
    {
        text-align: center;
        margin: auto;
        width: 80%;
    }
    div#store_links_deluxe ul {
        padding: 0px;
        text-align: center;
    }
    div#store_links_deluxe li {
        padding: 4px;
        display: inline-block;
        width: 45%;
    }
    div#store_links_deluxe li a {
        text-decoration: none ;
        display: inline ;
    }
}

@media only screen and (max-width: 320px)
{
    div#store_links_deluxe
    {
        text-align: center;
        margin: auto;
        width: 80%;
    }
    div#store_links_deluxe ul {
        padding: 0px;
        text-align: center;
    }
    div#store_links_deluxe li {
        padding: 3px;
        display: inline-block;
        width: 75%;
    }
    div#store_links_deluxe li a {
        text-decoration: none ;
        display: inline ;
    }
}

/*------------------------------- Mobile App Store Links -----------------------------*/

div#store_links
{
    text-align: center;
    margin: auto;
    width: 80%;
}
div#store_links ul {
	padding: 0px;
    text-align: center;
}
div#store_links li {
    padding: 5px;
    display: inline-block;
    width: 22%;
}
div#store_links li a {
    text-decoration: none ;
    display: inline ;
}

@media only screen and (max-width: 629px)
{
    div#store_links
    {
        text-align: center;
        margin: auto;
        width: 80%;
    }
    div#store_links ul {
        padding: 0px;
        text-align: center;
    }
    div#store_links li {
        padding: 4px;
        display: inline-block;
        width: 45%;
    }
    div#store_links li a {
        text-decoration: none ;
        display: inline ;
    }
}

@media only screen and (max-width: 320px)
{
    div#store_links
    {
        text-align: center;
        margin: auto;
        width: 80%;
    }
    div#store_links ul {
        padding: 0px;
        text-align: center;
    }
    div#store_links li {
        padding: 3px;
        display: inline-block;
        width: 75%;
    }
    div#store_links li a {
        text-decoration: none ;
        display: inline ;
    }
}

/*-------------------------------Video -----------------------------*/

div#video_wrapper_2 {
	margin: auto;
    float: none ;
    text-align: center;
	max-width: 80% ;
}
div#video_wrapper {
	position: relative;
	padding-bottom: 50%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*----------------------------Features-----------------------------*/


div#content_border {
	margin: auto;
	width: 80% ;
	color: #000 ;
    padding: 0px;
	background-color: #fff ;
    border-radius: 15px;
    margin-bottom: 10px;
}
div#content {
	width: 95% ;
	margin: auto;
    padding: 10px 10px;
}

div#game_features {
    font-style: normal;
    font-weight: 200;
    margin: 0;
    font-size: 1.15em;
    line-height: 1.2em;
}


/*----------------------Screenshots-----------------------------------*/

div.landscape_screenshot_container_outer {
	padding: 0px;
    text-align: center;
    float: none ;
	display: inline-block;
}
div.landscape_screenshot_container_inner {
	padding: 0px;
    text-align: center;
    float: none ;
	display: inline-block;
    width: 95%;
}
div.landscape_screenshot_container {
    float: left;
    width: 50%;
}
div.landscape_screenshot{
    margin: 10px;
}
div.landscape_screenshot img {
    width: 100%;
    height: auto;
}

div.portrait_screenshot_container_outer {
	padding: 0px;
    text-align: center;
    float: none ;
	display: inline-block;
}
div.portrait_screenshot_container_inner {
	padding: 0px;
    text-align: center;
    float: none ;
	display: inline-block;
    width: 95%;
}
div.portrait_screenshot_container {
    float: left;
    width: 25%;
}
div.portrait_screenshot{
    margin: 10px;
}
div.portrait_screenshot img {
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 629px) {
	div.portrait_screenshot_container {
        width: 50%;
	}
    div.landscape_screenshot_container {
        float: left;
        width: 100%;
    }
}



/*------------------------------- Nav Menu -----------------------------*/

div#nav_menu ul {
	padding: 0 ;
    text-align: center;
}
div#nav_menu li {
	display: inline-block;
}
div#nav_menu li a {
    font-size: 150%;
	color: #000 ;
	background-color: #fffc ;
	border: 1px outset #000 ;
	padding: 10px ;
	text-decoration: none ;
	display: inline ;
}
div#nav_menu li a:hover {
	color: #000 ;
	background-color: #c0c0c0 ;
}

@media only screen and (max-width: 320px) {
    div#nav_menu ul {
        list-style-type: none;
        margin: auto;
        padding: 5px;
        width: 200px;
        border: 1px solid #000 ;
    }
    div#nav_menu li {
        text-align: center;
        display: block;
        padding: 8px;
        border-bottom: 1px solid #000 ;
    }
    div#nav_menu li a {
        color: #000 ;
        background-color: #fff ;
        border: none ;
        padding: 8px ;
        text-decoration: none ;
        display: inline ;
    }
    div#nav_menu li a:hover {
        color: #000 ;
        background-color: #c0c0c0 ;
    }
    div#nav_menu li:last-child {
        border-bottom: none;
    }
}


/*----------------------------------------------------------------------*/