/*
	Styles for www.demigiant.com
	Date: February 2014
	Version: 1.0
	Author: Daniele Giardini
*/

/*  INDEX ::::::
	Imports
	Defaults
	Titles
	Base Changers
	Header
	Footer
	Main
	Section-specific
	Responsive Layout
*/

/* Imports */

@import url("reset.css");
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);


/* Defaults */

* {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
html, body { height: 100%; }
body {
	min-width: 960px;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	color: #fff;
	background: #191919;
}
#container { min-height: 100%; }
#main { background: #191919 url(../../_imgs/bg_tile.png) repeat; padding-bottom: 60px; }

p, dl { margin-bottom: 8px; line-height: 1.4; }
dt { color: #ffaf00; margin-bottom: -3px; }
dd { margin-bottom: 10px; }

strong { color: #ffaf00; font-size: 130%; line-height: 1; font-weight: normal; }
a { color: #b352c7; font-weight: normal; text-decoration: none; }
a, a span {
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}
a:hover { color: #0098f4; }
a.bt {
	display: inline-block;
	padding: 10px 16px; margin: 10px 10px 10px;
	background-color: #9a38ae;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
a.bt:hover { background-color: #0078c1; color: #fff; }

form { margin-bottom: 10px; }
input { padding: 4px; font-family: 'Open Sans', sans-serif; color: #000; font-size: inherit; }
input[type=submit] {
	padding: 6px 10px;
	background-color: #9a38ae;
	color: #fff;
	text-transform: uppercase;
	border: none;
}
input[type=submit]:hover { background-color: #0078c1; }

/* Titles */

h3 { line-height: 1.4; font-size: 200%; color: #ffaf00; font-weight: normal; margin-bottom: 8px; }

/* Base Changers */

hr { display: block; min-height: 18px; border: none; background: none; margin: 0; padding: 0; }
hr.sml { min-height: 9px; }
hr.huge { min-height: 50px; }
h2 + hr { min-height: 58px; }

/* Header */

header { background: #191919 url(../../_imgs/bg.jpg) no-repeat top; }
#headerCont { width: 960px; margin: auto; text-align: center; }
header .video { width: 960px; height: 540px; }

nav { min-height: 46px; }
nav ul { position: relative; left: 194px; }
nav li { float: left; }
nav a {
	display: block;
	margin-right: 10px;
	padding: 22px 18px 24px;
	background-color: #9a38ae;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 26px;
	font-weight: normal;
	color: #fff;
	text-transform: uppercase;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
nav li:last-of-type a { margin-right: 0; }
nav a:hover { background-color: #0078c1; color: #fff; }

/* Footer */

footer {
	background-color: #191919;
	padding: 20px 0 40px;
	font-family: 'Open Sans Condensed', sans-serif;
	text-align: center;
}

/* Main */

#pageWrap {
	width: 960px;
	margin: auto;
}

section {
	position: relative;
	background: #191919 url(../../_imgs/bg.jpg) no-repeat top;
	padding: 30px 40px 46px;
	text-align: center;
}
.section-bottom span { display: inline-block; width: 860px; min-height: 60px; background-color: #ffaf00; }

section h2 {
	position: absolute;
	top: -62px; left: 350px;
	width: 260px; min-height: 122px;
	margin: auto;
	background: #191919 url(../../_imgs/bg_title.png) repeat-x;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 40px;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
}
section h2 span { position: relative; top: 88px; }

section#sMedia { padding-left: 24px; padding-right: 24px; }
#screenshots { font-size: 0; }
#screenshots img { opacity: 0.6; }
#screenshots a:hover img { opacity: 1; }

#sReviews dt { font-size: 140%; text-transform: uppercase; }
#sReviews dt span { text-transform: none; }

/* Responsive Layout */

@media only screen and (max-width: 980px),
only screen and (min-device-pixel-ratio:1.5) and (orientation:portrait),
only screen and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait)
{
	body { min-width: 640px; }
	header .video { width: 640px; height: 360px; }
	#headerCont { width: 640px; }
	#pageWrap {	width: 640px; }
	nav ul { left: 58px; }
	.section-bottom span { width: 540px; }
	section h2 { left: 190px; }
	.newsletter-header-img { width: 640px; }
}