/* ************************************************************************** */
/* Stylesheet für www.teamsport-philipp.de                                    */
/*                                                                            */
/* Version 1.0 - 28.11.2009                                                   */
/*                                                                            */
/* (c) Copyright 2009 by Impression Media Dorsten - www.impressionmedia.de    */
/* ========================================================================== */
/* Versionshistorie                                                           */
/* (N = Neu; F = Fix; V = Verbesserung)                                       */
/* -------------------------------------------------------------------------- */
/* 1.0 - 28.11.2009: erste Fassung                                            */
/* ========================================================================== */
/* Outline                                                                    */
/* -------------------------------------------------------------------------- */
/* 01 | RESET | Basisstyles                                                   */
/* 02 | verwendete Farben                                                     */
/* 03 | Layout                                                                */
/* 04 | Typographie                                                           */
/* ************************************************************************** */



/* ************************************************************************** */
/* 01 | Reset & Basisstyles                                                   */
/* ************************************************************************** */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
	}

:focus {
	outline: 0;
	}

body {
	line-height: 1;
	color: black;
	background: white;
	}

ol, ul {
	list-style: none;
	}

table {
	border-collapse: separate;
	border-spacing: 0;
	}

caption, th, td {
	text-align: left;
	font-weight: normal;
	}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	}

blockquote, q {
	quotes: "" "";
	}

html {
	font-size: 100.01%; /* alle Schriftgrößen auf Standard (16 Pixel) zurücksetzen */
	height: 101%;
	}

body {
	background: #0E0E0E url(../img/bg-body.jpg) center center;
	color: #fff;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 81.25%;
	line-height: 1.5em;
	text-align: center;
	}

#page-wrapper {
	margin: 0 auto;
	text-align: left;
	width: 940px;
	}

/* ************************************************************************** */
/* 02 | Farben                                                                */
/* ************************************************************************** */


#header {
	background: transparent;
	border-top: #000 2px solid;
	border-bottom: #000 2px solid;
	height: 109px;
	position: relative;
	}

#header img#logo {
	left: 6px;
	position: absolute;
	top: 20px;
	}

#header img#claim {
	left: 196px;
	position: absolute;
	top: 57px;
	}

#header img#masthead {
	left: 416px;
	position: absolute;
	top: 0;
	}

#menu-container {
	border-top: #fff 1px solid;
	background: transparent;
	overflow: hidden;
	padding: 0;
	}

#menu-container span {
	background: #000;
	display: block;
	float: left;
	line-height: 30px;
	margin-right: 1px;
	padding: 0 10px 0 6px
	}

ul#main-menu {
	border-right: 40em #000 solid;
	float: left;
	font-size: 90%;
	margin-right: -40em;
	}

u\l#main-menu li {
	background: #666;
	filter: alpha(opacity=35);
	float: left;
	line-height: 30px;
	margin-right: 1px;
	text-align: center;
	width: 118px;
	width: 10.2em;
	}

html>body ul#main-menu li {
	background: rgba( 102, 102, 102, 0.35 );
	float: left;
	line-height: 30px;
	margin-right: 1px;
	}

ul#main-menu li a {
	background: transparent;
	color: #fff;
	display: block;
	padding: 0;
	text-decoration: none;
	}

u\l#main-menu li a {
	filter: alpha(opacity=100);
	padding-top: 8px;
	margin-top: -8px;
	position: relative;
	}

ul#main-menu li a:hover,
#bochum ul#main-menu li#tab-bochum a, 
#essen ul#main-menu li#tab-essen a, 
#gladbeck ul#main-menu li#tab-gladbeck a, 
#hagen ul#main-menu li#tab-hagen a, 
#lembeck ul#main-menu li#tab-lembeck a, 
#recklinghausen ul#main-menu li#tab-recklinghausen a,
#oldenburg ul#main-menu li#tab-oldenburg a {
	background: #54B711 url(../img/bg-nav-hover.gif) top left repeat-x;
	}

#main-content-wrapper {
	border-top: #fff 1px solid;
	clear: both;
	padding: 4px 4px 0 4px;
	}

* html #main-content-wrapper {
	padding-top: 8px;
	}

#main-content {
	height: 425px;
	position: relative;
	}

#row1_col1,
#row1_col2,
#row1_col3,
#row1_col4,
#row2_col1,
#row2_col2,
#row2_col3,
#row2_col4,
#row3_col1,
#row3_col2,
#row3_col3 {
	background: #000;
	color: #fff;
	height: 123px;
	position: absolute;
	top: 0;
	width: 230px;
	}

#row2_col1,
#row2_col2,
#row2_col3,
#row2_col4 {
	height: 164px;
	top: 127px;
	}

#row3_col1,
#row3_col2,
#row3_col3 {
	top: 295px;
	}

#row1_col1,
#row2_col1,
#row3_col1 {
	left: 0;
	}

#row1_col2,
#row2_col2 {
	left: 234px;
	}

#row1_col3,
#row2_col3 {
	left: 468px;
	}

#row1_col4,
#row2_col4 {
	left: 702px;
	}

#row3_col1,
#row3_col3 {
	width: 350px;
	}

#row3_col2 {
	left: 354px;
	width: 224px;
	}

#row3_col3 {
	left: 582px;
	}

p {
	padding: 36px 24px 24px 24px;
	}

ul#marken {
	/*position: absolute;
	top: 459px;*/
	margin: 0 4px 0 4px;
	}

ul#marken li {
	float: left;
	/*line-height: 35px;*/
	margin-left: 2px;
	}

ul#marken li.first {
	margin-left: 0;
	}

#f\ooter {
	background: #000;
	filter: alpha(opacity=50);
	clear: both;
	color: #989898;
	font-weight: bold;
	height: 45px;
	overflow: hidden;
	}

html>body #footer {
	background: rgba( 0, 0, 0, 0.5 );
	clear: both;
	color: #989898;
	font-weight: bold;
	height: 45px;
	overflow: hidden;
	}

#footer ul {
	float: left;
	margin: 8px 0 0 12px;
	}

#footer ul li {
	float: left;
	margin-left: 46px;
	}

#footer ul li.first {
	margin-left: 0;
	}

#footer ul li a {
	color: #989898;
	text-decoration: none;
	}

#f\ooter ul li a {
	filter: alpha(opacity=100);
	position: relative;
	}

#footer ul li a:hover,
#ueber-teamsport-philipp #footer ul li#fm-ueber-teamsport-philipp a, 
#impressum #footer ul li#fm-impressum a,
#unsere-filialen #footer ul li#fm-kontakt a,
#jobs-und-karriere #footer ul li#fm-jobs-und-karriere a {
	color: #51B60E;
	}

#inner-container {
	background: rgba( 0, 0, 0, 0.5 );
	height: 418px;
	position: absolute;
	top: 0;
	width: 932px;
	}

#gutter {
	padding: 12px 34px 0 34px;
	}

#gutter p {
	margin-top: 14px;
	padding: 0;
	}

#gutter h1,
#gutter h2,
#gutter h3 {
	font-size: 100%;
	}

#gutter h3 {
	font-size: 153.846%;
	font-style: italic;
	font-weight: bold;
	line-height: 1.2em;
	margin-top: 18px;
	}

#gutter h2 span,
#gutter h3 span {
	font-weight:normal;
	}


#gutter h2 {
	font-weight: bold;
	}

#ueber-teamsport-philipp #gutter {
	width: 400px;
	}

#gutter h2.ueber-teamsport-philipp {
	background: transparent url(../img/headline-ueber-teamsport-philipp.gif) top left no-repeat;
	height: 31px;
	text-indent: -999em;
	width: 217px;
	}

#gutter h2.impressum {
	background: transparent url(../img/headline-impressum.gif) top left no-repeat;
	height: 31px;
	text-indent: -999em;
	width: 217px;
	}

#gutter h2.unsere-filialen {
	background: transparent url(../img/headline-filialen.gif) top left no-repeat;
	height: 31px;
	text-indent: -999em;
	width: 345px;
	}

#gutter h2.kontakt {
	background: transparent url(../img/headline-kontakt.gif) top left no-repeat;
	height: 31px;
	text-indent: -999em;
	width: 345px;
	}

#gutter h2.jobs-und-karriere {
	background: transparent url(../img/headline-jobs-und-karriere.gif) top left no-repeat;
	height: 31px;
	text-indent: -999em;
	width: 217px;
	}

#impressum #gutter,
#jobs-und-karriere #gutter {
	position: relative;
	}

#impressum #gutter #col-left,
#jobs-und-karriere #col-left {
	/*left: 34px;*/
	position: absolute;
	top: 42px;
	width: 250px;
	}

#impressum #gutter #col-right,
#jobs-und-karriere #col-right {
	left: 334px;
	position: absolute;
	top: 42px;
	width: 550px;
	}

#jobs-und-karriere #col-right {
	left: 300px;
	width: 580px;
	}

#gutter p.gestaltung-programmierung {
	left: 0;
	position: absolute;
	top: 270px;
	}

#gutter a {
	color: #fff;
	text-decoration: none;
	}

#gutter a:hover {
	color: #51B60E;
	}

#jobs-und-karriere #main-content {
	height: 628px;
	}

#jobs-und-karriere #inner-container {
	height: 620px;
	}

#jobs-und-karriere p.smaller {
	font-size: 92.307%;
	line-height: 1.4em;
	margin-bottom: 0.4em;
	}

a.unsere-filialen {
	background: transparent;
	display: block;
	height: 20px;
	position: absolute;
	top: 21px;
	width: 140px;
	}

a.kontaktformular {
	background: transparent;
	display: block;
	height: 20px;
	left: 198px;
	position: absolute;
	top: 21px;
	width: 170px;
	}


#gutter ul.filialen h3 {
	font-size: 138.461%;
	line-height: 1.5em;
	margin:18px 0 4px 0;
	}

ul.filialen {}

ul.filialen li {
	float: left;
	font-size: 92.307%;
	line-height: 1.5em;
	width: 24.9%;
	}

span.e-mail {
	color: #51B60E;
	font-size: 95.833%;
	}

#gutter span.e-mail a {
	color: #51B60E;
	}

#gutter span.e-mail a:hover {
	text-decoration: underline;
	}

span.tab {
	display: block;
	float: left;
	width: 3.5em;
	}


#unsere-filialen #gutter {
	padding-right: 0;
	}


form#kontaktformular {
	margin-top: 18px;
	}

form#kontaktformular h3 {
	font-size: 123.076%;
	float: left;
	line-height: 1.5em;
	margin-bottom: 4px;
	}

form#kontaktformular select {
	border: none;
	float: left;
	margin: 21px 0 4px 6px;
	}

form#kontaktformular #wrapper {
	clear: left;
	}

form#kontaktformular #message {
	border: #66CC00 3px solid;
	float: left;
	height: 180px;
	width: 394px;
	}

form#kontaktformular #fields {
	background: #000;
	float: left;
	height: 186px;
	position: relative;
	width: 458px;
	}

form#kontaktformular textarea {
	border: none;
	height: 180px;
	margin: 0;
	padding: 0;
	width: 100%;
	}

form#kontaktformular input {
	background: #000;
	border: #666 1px solid;
	color: #fff;
	}

form#kontaktformular div.vorname,
form#kontaktformular div.name,
form#kontaktformular div.e-mail,
form#kontaktformular div.vorwahl,
form#kontaktformular div.telefon {
	color: #666;
	left: 24px;
	position: absolute;
	top: 12px;
	}

form#kontaktformular div.name {
	left: 232px;
	}

form#kontaktformular div.e-mail {
	top: 60px;
	}

form#kontaktformular div.vorwahl,
form#kontaktformular div.telefon {
	top: 130px;
	}

form#kontaktformular div.telefon {
	left: 94px;
	}

form#kontaktformular div.vorname input,
form#kontaktformular div.name input,
form#kontaktformular div.e-mail input {
	width: 194px;
	}

form#kontaktformular div.vorwahl input {
	text-align: right;
	width: 60px;
	}

form#kontaktformular div.telefon input {
	text-align: right;
	width: 124px;
	}

form#kontaktformular div.button {
	height: 31px;
	left: 314px;
	position: absolute;
	top: 130px;
	width: 112px;
	}

form#kontaktformular div.button input {
	border: none;
	outline: 0;
	}

form#kontaktformular input[type="image"] {
	/*background: transparent url(../img/button-send.jpg) top left no-repeat;*/
	border: none;
	height: 31px;
	width: 112px;
	}

form#kontaktformular input[type="image"]:focus {
	outline: 0;
	}