/* CSS Document: */

/**
 * Project:		TARNKAPPE.AT TEASER
 * Purpose:		Global Styles
 *
 * @author:		<tk@tarnkappe.at>
 * @version:	2.0
 * @date:		12/2011
 */


/* TABLE OF CONTENTS:
---------------------------------------------------------------------------------------

	0:	CSS RESET & HELPERS (CLEAN UP & DELETE IRRELEVANT DECLARATIONS AFTERWARDS!!!):

		0.1:	CSS NORMALIZE:
				- BASE STYLES:
				- EMBEDDED CONTENT:
				- IMAGE-REPLACEMENT:


	1:	TYPOGRAPHY & LINK STYLING:

		1.1:	COLOURS:
		1.2:	TYPO & FONT-SIZES:
		1.3:	LINKS:


	2:	STRUCTURE & LAYOUT:


	3:	CONTENT:



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

/**
 * Credit is left where credit is due.
 *
 * Much inspiration was taken from these projects:
 *
 * - html5boilerplate.com
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 * - html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * - v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * - html5doctor.com/html-5-reset-stylesheet/
 * - Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team
 */




/*		>> 0: CSS RESET & HELPERS:
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */

/*		>> 0.1: CSS NORMALIZE:
--------------------------------------------------------------------------------------- */

/* BASE STYLES:
--------------------------------------- */
html, body { padding: 0; margin: 0; }

html { font-size: 100%; /* overflow-y: scroll; */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* Remember to define focus styles! */
:focus { outline: 0; }



/* EMBEDDED CONTENT:
--------------------------------------- */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }



/*	IMAGE-REPLACEMENT:
--------------------------------------- */
.ir {
	display: block;
	border: 0;
	text-indent: -999em;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: left;
	direction: ltr;
}
.ir br { display: none; }



/*		>> 1: TYPOGRAPHY & LINK STYLING:
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */

/*		>> 1.1: COLOURS:
--------------------------------------------------------------------------------------- */

/* These selection declarations have to be separate */
::-moz-selection { background: #3399FF; color:#FFF; text-shadow: none; }
::selection { background: #3399FF; color:#FFF; text-shadow: none; }


body { color: #FFF; }



/*		>> 1.2: TYPO & FONT-SIZES:
--------------------------------------------------------------------------------------- */
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }


/* SAFETY: BREAK LONG STRINGS IN SMALL CONTAINERS */
.safe-wordbreak { word-wrap: break-word /* ; white-space:-moz-pre-wrap; white-space: normal */; }


.sub-title,
.release-number { font-size: 12px; line-height: 14px; text-transform: uppercase; }




/*		>> 1.3: LINKS:
--------------------------------------------------------------------------------------- */
a:link,
a:visited	{ text-decoration: underline; }
a:hover		{ text-decoration: none; }


a:link,
a:visited 	{ color: #666; }
a:hover		{ color: #000; }



/*		>> 2: STRUCTURE & LAYOUT:
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
html, body { background-color: #BD4200; height: 100%; }




/*		>> 3: CONTENT:
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
#content {
	position: relative;
	width: 720px;
	height: 100%;
	min-height: 320px;
	margin: 0 auto;
}

/* Portrait */
/*
@media screen and (orientation:portrait) {

    #content {
        min-height: 640px;
    }
}
*/


#branding {
	position: relative;
	width: 429px;
	height: 145px;
	margin: 0 0 0 140px;
	top: 33%;
}

.logo { position: relative; margin: 0; }

.sub-title,
.release-number {
	position: absolute;
	display: block;
	border: 0;
	height: 14px;
	overflow: hidden;
	margin: 0;
	text-indent: -999em;
	text-align: left;
	direction: ltr;
	background: url("../img/branding_text.png") no-repeat 0 0;
}

.sub-title {
	left: 432px;
	top: 82px;
	width: 105px;
	background-position: 0 0;
}

.release-number {
	left: -102px;
	top: 22px;
	width: 100px;
	background-position: -2px -50px;
}