﻿h1 {
	font: 52px "cooper-black-std", 'Segoe UI', Arial, Tahoma, san-serif;
}

h2 {
	font: 48px "cooper-black-std", 'Segoe UI', Arial, Tahoma, san-serif;
}

h3 {
	font: 33px "cooper-black-std", 'Segoe UI', Arial, Tahoma, san-serif;
}

h3 {
	font: 26px "cooper-black-std", 'Segoe UI', Arial, Tahoma, san-serif;
}

html {
    background-color: #004691       ;
    margin: auto;
    min-width: 532px;
	width: 100%;
}

body {
	color: #2d2d2d;
	font: 15px 'Segoe UI', Arial, Tahoma;
	height: 100%;
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

strike {
    font-size: 20px;
}

.frame {
	background-color: #edf6ff;
	border-top-left-radius: 150px;
	border-top-right-radius: 150px;
	margin: 0 auto;
	margin-top: 1em;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}

main > header {
	height: 56px;
    display: block;
    position: relative;
    margin: 0 auto;
    z-index: 100;
}

/* #region menu */
nav.navigationContainer {
	display: block;
    min-width: 532px;
	margin: 0 auto;
}

	nav.navigationContainer span {
		display: none;
	}

	nav.navigationContainer ul {
		display: inline-block;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	nav.navigationContainer > ul > li {
		background: url('/images/2016/TPM_nav2.png') no-repeat;
		background-position-y: top;
		color: #fff;
		display: inline-block;
        float: left;
		vertical-align: top;
	}

	nav.navigationContainer > ul > li > a > span {
		color: transparent;
		display: none;
	}

		nav.navigationContainer > ul > li > a {
			color: transparent;
			display: inline-block;
			height: 100%;
			width: 100%;
		}

		nav.navigationContainer > ul > li.forum {
			background-position: left top;
			height: 56px;
			width: 176px;
		}

			nav.navigationContainer > ul > li.forum:hover,
			nav.navigationContainer > ul > li.forum.active {
				background-position: left -56px;
			}

		nav.navigationContainer > ul > li.news {
			background-position: -176px top;
			height: 56px;
			width: 140px;
		}

			nav.navigationContainer > ul > li.news:hover,
			nav.navigationContainer > ul > li.news.active {
				background-position: -176px -56px;
			}

        nav.navigationContainer > ul > li.exitpolls {
			background-position: -316px top;
			height: 56px;
			width: 216px;
		}

			nav.navigationContainer > ul > li.exitpolls:hover,
			nav.navigationContainer > ul > li.exitpolls.active {
				background-position: -316px -56px;
			}
/* #endregion */

/* #region Footer */

	footer {
		padding-top: 1em;
		position: relative;
		margin-top: 20px;
		height: 128px;
		width: 100%;
	}

	footer img {
		display: inline-block;
		margin-right: 15px;
		vertical-align: middle;
	}

	footer > div {
		border-left: #ffffff solid 1px;
		color: #fff;
		display: inline-block; 
        max-width: 500px;
		text-align: center;
		vertical-align: middle;
        width: 45%;
	}
	footer > div > p {
		color: #fff;
		display: block;
		font-size: 0.694em;
		line-height: 1.75em;
		margin-left: 25px;
		text-align: left;
	}
    footer > div > p > a {
		color: #fff;
        text-decoration: none;
	}
    footer > div > p > a:hover {
        text-decoration: underline;
	}
    footer > div > p > span.separator {
        display: inline-block;
        margin: 0 8px;
	}

    footer > div > div.icons {
        background: url("/Images/2016/connectedIcons.png") no-repeat;
        display: inline-block;
		height: 25px;
        margin: 0 auto;
		margin-left: 25px;
		margin-top: 1em;
        width: 204px;
	}

    footer > div > div.icons .innerIcons {
		cursor: pointer;
        display: inline-block;
        float: left;
        height: 100%;
		margin: 0;
		margin-right: 5px;
		width: 24px;
	}
/* #endregion */

/* TPM 2016 */
section.logo {
	display:block;
	margin: 0 auto;
	max-width: 1920px;
	overflow: hidden;
	top: 0;
	width: 100%;
	z-index: 1;
}
section.anchor {
	display:block;
	margin: 0 auto;
	max-width: 1920px;
	overflow: hidden;
	width: 100%;
	z-index: 1;
}
div.oldversion {
	bottom: 20px;
	display:block;
	position: absolute;
	z-index: 100;
}

	section.TPM2016 > div {
		display:block;
		margin: 0 auto;
		width: 100%;
		z-index: 100;
	}
	section.TPM2016 > div > section.top {
		display:block;
		margin: 0 auto;
		max-width: 1251px;
		z-index: 100;
	}
		section.TPM2016 > div > section.top > aside.availability {
			display: inline-block;
			margin: 0 1.5em 1em;
			vertical-align: middle;
		}
			section.TPM2016 > div > section.top > aside.availability > img.ea {
				display: block;
				margin: 0 auto;
			}
			section.TPM2016 > div > section.top > aside.availability > p.ea > a {
				color: #0262c8;
				display: block;
				margin: 0 auto;
				margin-top: 0.25em;
				text-decoration: none;
			}
			section.TPM2016 > div > section.top > aside.availability > p.ea > a:hover {
				text-decoration: underline;
			}
			section.TPM2016 > div > section.top > aside.availability > img.blueline {
				display: block;
				margin: 0.5em auto;
			}
			section.TPM2016 > div > section.top > aside.availability > p.price {
				color: #0262c8;
				display: block;
				font: 30px 'Segoe UI', Arial, Tahoma;
				font-weight: bold;
				margin: 0 auto;
			}
			section.TPM2016 > div > section.top > aside.availability > div.single {
				display: block;
				margin: 0 auto;
				margin-top: 0.5em;
				position: relative;
			}
			section.TPM2016 > div > section.top > aside.availability > div.single > div,
			section.TPM2016 > div > section.top > aside.availability > div.options > div {
				display: inline-block;
				margin: 0 1em;
				position: relative;
				vertical-align: top;
				width: 158px;
			}
			section.TPM2016 > div > section.top > aside.availability > div.single > div > select {
				background: url(/images/2016/br_down2.png) no-repeat right #0262c8;
				background-position-x: 134px;
				border: none;
				border-radius: 5px;
				color: #FFFFFF;
				font-family: Cambria, Georgia, serif;
				font-size: 13px;
				height: 34px;
				padding: 5px;
				-webkit-appearance: none;
				width: 158px;
			}
			section.TPM2016 > div > section.top > aside.availability > div.options {
				display: block;
				margin: 0 auto;
				position: relative;
			}
			section.TPM2016 > div > section.top > aside.availability > div.options > div > p.price {
				color: #2b2b2b;
				font: 15px 'Segoe UI', Arial, Tahoma;
				display: block;
				margin: 0 auto;
				margin-bottom: 0.5em;
				position: relative;
			}
			section.TPM2016 > div > section.top > aside.availability > div.options > div > p.price > span {
				color: #2b2b2b;
				font: 17px 'Segoe UI', Arial, Tahoma;
				font-weight: bold;
			}
			section.TPM2016 > div > section.top > aside.availability > div.options > div > a.button {
				display: block;
				margin: 0 auto;
				position: relative;
			}
		/*section.TPM2016 > div > section.top > a.trailer {
			display: inline-block;
			margin: 0 1em 1em;
			vertical-align: middle;
		}
			section.TPM2016 > div > section.top > a.trailer > img {
				border: none;
				color: transparent;
				display: block;
			}*/

		section.TPM2016 > div > section.top > a.trailer {
			display: inline-block;
			margin: 0 1em 1em;
			vertical-align: middle;
		}

		section.TPM2016 > div > section.top > a.trailer > div.overlay {
			background: url('/images/2016/flash/vid_overlay.png') no-repeat;
			display: block;
			height: 264px;
			margin-left: -10px;
			position: absolute;
			margin-top: -259px;
			width: 462px;
		}

	section.TPM2016 > div > section.features {
		display:block;
		margin: 0 auto;
		margin-top: 1.5em;
		z-index: 100;
	}
		section.TPM2016 > div > section.features > h2 {
			color: #ffffff;
			display: block;
			margin-bottom: 1em;
		}
		section.TPM2016 > div > section.features > p.description {
			display: block;
			font: 18px 'Segoe UI', Arial, Tahoma;
			margin: 1em auto 0.5em;
			max-width: 705px;
			padding: 0 2em;
		}

        section.TPM2016 > div > section.features > p.subhead {
		    color: #2d2d2d;
            font: 16px 'Segoe UI', Arial, Tahoma;
            font-weight: bold;
            margin: 0.25em auto 0;
	    }

        section.TPM2016 > div > section.features > p.subhead a.expand_btn {
		    color: #2d2d2d;
            font: 16px 'Segoe UI', Arial, Tahoma;
            margin: 0 auto;
            text-decoration: none;
	    }

        section.TPM2016 > div > section.features > p.subhead a.expand_btn:hover {
		    text-decoration: underline;
	    }

        .details
        {
	        display: none;
        }

        section.TPM2016 > div > section.features > div.details > ul.list {
            list-style-type: none;
            padding: 0 2em;
        }

        section.TPM2016 > div > section.features >div.details > ul.list > li > span {
            font-weight:bold;
        }

		section.TPM2016 > div > section.features > div.points {
			display: block;
            margin-top: 1em;
		}
			section.TPM2016 > div > section.features > div.points > ul {
				display: inline-block;
				list-style-type: none;
				margin: 0 auto;
				max-width: 440px;
				padding: 0px 2.5em;
				position: relative;
				text-align: left;
				vertical-align: top;
			}
				section.TPM2016 > div > section.features > div.points > ul > li {
					background: url('/images/2016/star_bullet.png') no-repeat left top;
					    line-height: 23px;
						margin-bottom: 12px;
						padding-left: 28px;
				}

				section.TPM2016 > div > section.features > div.points > ul > li > span {
					font-weight: bold;
				}

	section.TPM2016 > div > section.screenshots {
		display: block;
		margin: auto;
		max-width: 1251px;
		z-index: 100;
	}
	section.TPM2016 > div > section.screenshots > img.stripes {
			margin: 1em auto;
			overflow: hidden;
			width: 100%;
		}
		section.TPM2016 > div > section.screenshots > div.title {
			display:block;
		}
			section.TPM2016 > div > section.screenshots > div.title > img.stars {
				display: inline-block;
				margin: 0;
			}
			section.TPM2016 > div > section.screenshots > div.title > h2 {
				color: #0262c8;
				display: inline-block;
				margin: 0 1em;
			}
		section.TPM2016 > div > section.screenshots > div.images {
			display: block;
			margin: auto;
		}
			section.TPM2016 > div > section.screenshots > div.images > div.ss {
				display: inline-block;
				margin: auto;
				padding: 1em;
			}
			section.TPM2016 > div > section.screenshots > div.images > div.ss > a.screenshot {
				
			}
				section.TPM2016 > div > section.screenshots > div.images > div.ss > a.screenshot > img.screen {

				}
				section.TPM2016 > div > section.screenshots > div.images > div.ss > p {
					background-color: #b1cee6;
					height: 32px;
					line-height:32px;
					width: 301px;
				}

	section.TPM2016 > div > section.bottom {
		display: block;
		margin: auto;
		max-width: 1251px;
		z-index: 100;
	}
		section.TPM2016 > div > section.bottom > figure.news {
			display: inline-block;
			height: auto;
			margin-bottom: 1em;
			max-width: 479px;
			vertical-align: top;
		}
			section.TPM2016 > div > section.bottom > figure.news > div.fixedratio {
				background: url('/images/2016/latestnews_background.png') no-repeat top center;
				height: 420px;
				position: relative;
				width: 456px;
			}
				section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content {
					padding: 4.5em 2em 2em;
					text-align: left;
				}
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content .title {
						color: #004691;
						font-weight: bold;
					}
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content p,
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content a.readmore,
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content .date,
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content .username {
						color: #2d2d2d;
						font: 13px 'Segoe UI', Arial, Tahoma;
					}
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content div.viewmore {
						text-align: right;
					}
					section.TPM2016 > div > section.bottom > figure.news > div.fixedratio > div.content div.viewmore a {
						color: #004691;
						font: 13px 'Segoe UI', Arial, Tahoma;
					}
		section.TPM2016 > div > section.bottom > figure.sysreq {
			display: inline-block;
			margin-bottom: 1em;
		}
			section.TPM2016 > div > section.bottom > figure.sysreq > h3 {
				color: #0262c8;
			}
			section.TPM2016 > div > section.bottom > figure.sysreq > div {
				display: inline-block;
				max-width: 600px;
			}

				section.TPM2016 > div > section.bottom > figure.sysreq > div > div.req {
					display: inline-block;
					margin: 1em 1em 0;
					vertical-align: top;
				}
					section.TPM2016 > div > section.bottom > figure.sysreq > div > div.req > div.redbox {
						background-color: #a30000;
						border: #ffffff solid 1px;
						color: #ffffff;
						font: 18px "cooper-black-std", 'Segoe UI', Arial, Tahoma, san-serif;
						height: 58px;
						line-height: 27px;
						width: 138px;
					}
					section.TPM2016 > div > section.bottom > figure.sysreq > div > div.req > div.one {
						line-height: 58px;
					}
					section.TPM2016 > div > section.bottom > figure.sysreq > div > div.req > p {
						font-size: 13px;
						margin-top: 0.5em;
					}
                    section.TPM2016 > div > section.bottom > figure.sysreq > div a.wiki {
			            display: inline-block;
			            margin: 0.5em 1em 0;
                        position:relative
		            }
                    section.TPM2016 > div > section.bottom > figure.sysreq > div a.wiki img {
			                width: 312px;
		            }
/* #endregion */
@media (max-width: 710px) {
	section.TPM2016 > div > section.screenshots > div.title > img.stars {
		display: none;
	}
}
@media (max-width: 800px) {
	section.TPM2016 > div > section.screenshots > div.title > img.stars {
		vertical-align: super;
		width: 20%;
	}
}
@media (max-width: 1279px) {
	div.oldversion {
		display: none;
	}
	section.TPM2016 > div > section.bottom > figure.sysreq > div.oldversion2 {
		display: block;
		margin: 1em auto;
		position:relative;
	}
}
@media (min-width: 1280px) {
	section.TPM2016 > div > section.bottom > figure.sysreq > div.oldversion2 {
		display: none;
	}
}
@media (max-width: 1349px) {
	section.logo {
		display: none;
	}
	section.logo2 {
	 	display:block;
		margin: 0 auto;
		max-width: 1251px;
		position: relative;
		top: 0;
		width: 100%;
		z-index: 1;
	}
	section.logo2 > img {
		display: block;
		margin-top: -56px;
		width: 100%;
	}
	section.TPM2016 {
		background-color: #edf6ff;
		display:block;
		margin: 0 auto;
		max-width: 1251px;
		position: relative;
		width: 100%;
		z-index: 1;
	}
	section.TPM2016 > div {
		background-color: #edf6ff;
		position: relative;
	}
	section.TPM2016 > div > section.top > a.salebannerA {
		border: none;
		display: block;
		height: 100%;
		margin: 0 auto 1.5em;
		max-width: 873px;
		position: relative;
		text-decoration: none;
		width: 100%;
		z-index: 100;
	}
	section.TPM2016 > div > section.top > a.salebannerA > img.banner {
		height: 100%;
		width: 100%;
	}
	section.TPM2016 > div > section.top > a.salebannerB {
		display: none;
	}
	section.anchor {
		display: none;
	}
	div.oldversion {
		right: 0;
	}
	body > form > footer {
		display: block;
		margin: 0 auto;
		margin-left: 20px;
		position: relative;
		text-align: footer;
		max-width: 1251px;
		z-index: 100;
	}
	section.TPM2016 > div > section.features > h2 {
		background-color: #a30000;
		padding: 0.125em 0;
	}
}
@media (min-width: 1350px) {
	section.logo {
		background: url(/images/2016/sectioned/frame_top_nobanner2.jpg) no-repeat top center;
		height: 1200px;
		margin-top: -56px;
	}
	section.logo2 {
		display: none;
	}
	section.anchor {
		background: url(/images/2016/sectioned/frame_bottom.jpg) no-repeat top center;
		height: 797px;
	}
	section.TPM2016 {
		background: url(/images/2016/sectioned/frame_middle.jpg) repeat-y top center;
		display:block;
		height: 1120px;
		margin: 0 auto;
		max-width: 1920px;
		overflow: hidden;
		width: 100%;
		z-index: 1;
	}
	section.TPM2016 > div {
		position: absolute;
	}
	section.TPM2016 > div > section.top > a.salebannerB {
		border: none;
		display: inline-block;
		height: 249px;
		margin: 0 auto;
		position: relative;
		text-decoration: none;
		vertical-align: top;
		width: 193px;
		z-index: 100;
	}
	section.TPM2016 > div > section.top > a.salebannerB > img.banner {
		height: 100%;
		width: 100%;
	}
	section.TPM2016 > div > section.top > a.salebannerA {
		display: none;
	}
	section.TPM2016 > div > section.features > h2 {
		background: url(/images/2016/redbanner.png) no-repeat top center;
		height: 105px;
		margin: 0 auto;
		padding: 0.6em 0 0;
		width: 1375px;
	}
	div.oldversion {
		left: 870px;
	}div.oldversion2 {
		display: none;
	}
	section.TPM2016 > div {
		margin-top: -40em;
	}
	body > form > footer {
		display: block;
		position: relative;
		margin: 0 auto;
		margin-top: -130px;
		text-align: center;
		width: 1251px;
		z-index: 100;
	}
}
@media (min-width: 1450px) {
	div.oldversion {
		left: 920px;
	}
}
@media (min-width: 1550px) {
	div.oldversion {
		left: 970px;
	}
}
@media (min-width: 1650px) {
	div.oldversion {
		left: 1020px;
	}
}
@media (min-width: 1750px) {
	div.oldversion {
		left: 1070px;
	}
}
@media (min-width: 1850px) {
	div.oldversion {
		left: 1120px;
	}
}
