/* auto-clearfix */
.submit:after, .row:after, .title:after, .horiz:after, .list:after, .container:after, .section:after, .sub-section:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.submit, .row, .title, .horiz, .list, .container, .section, .sub-section {display:block;}

/* setup */
a, a:hover, a:focus, a:active { outline: 0; color: white; text-decoration: underline;}
.w-ico, .w-ico a { text-decoration: none !important;}
.w-ico .label { text-decoration: underline;}
.button .label { text-decoration: none; color: white;}
a:focus, a:hover, a:active { color: #d8e4ea;}
html { overflow-x: auto; overflow-y: scroll;}
body, .reset, input.text, input.password, textarea, label {
	font-size: 13px; line-height: 1.40em;
	font-family: 'Helvetica', 'Arial', sans-serif;
}
body, .reset { color: white;}
body {
	min-width: 975px; width: 100%; overflow: hidden;
	background: black url(/i/bg/concreete.jpg) repeat-y top center;
	background-image: black url(/i/bg/concreete.jpg) repeat-y top center;
	position: relative;
}
address, .firm-info p, p, h1, h2, h3, h4, h5, h6 { color: inherit; line-height: inherit;}
h1, h2, h3, h4, h5, h6 { font-family: 'DIN Pro', 'Helvetica', 'Arial', sans-serif; font-weight: bold; line-height: 1.35em;}

/* definitions */

table, tr, th, td { border: 0; border-spacing: 0; border-collapse: collapse;}
table caption { caption-side: bottom; padding: 1em 0 0 0; margin-top: 1em; font-size: 0.85em;}
table th, table td { border-bottom: 1px dotted #666; padding: 0.5em 0 0.3em 0;}
table tr:last-child th, table tr:last-child td { border-bottom: 0;}

h1, h2, h3, h4, h5, h6, li { margin: 0.2em 0 0 0;}

h1 { font-size: 48px; text-transform: uppercase; margin: 1em 0 0.5em 0; font-weight: normal;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none !important; color: inherit !important;}
h2 { font-size: 30px;}
h3 { font-size: 21px;}
h4 { font-size: 18px;}
h5 { font-size: 16px;}
h6 { font-size: 14px;}
p { margin: 0 0 0.8em 0;}
h4, h5, h6, p { max-width: 500px;}
small { font-size: 11px; line-height: 100%;}

/* forms */
.row { padding: 0 0 1em 0;}
.flash { display: inline-block; padding: 10px; margin: 0 0 1em 0; background-color: #09F; color: white;}
.flash-error { background-color: red; color: white;}
label { display: block; margin: 0 0 0.2em 0;}
label[for] { text-transform: uppercase;}
textarea { height: 13em;}
input.text, textarea {
	display: inline-block; vertical-align: text-top;
	width: 349px;
	background: #F8F8F8 none no-repeat left top;
	padding: 7px; margin: 0 0 0.2em 0;
	border-radius: 1px;
}
input.text, textarea, input.text:focus, textarea:focus {
	border: 1px solid gray;
	border-color: #808080 #C0C0C0 #F8F8F8 #A0A0A0;
}
input:focus, textarea:focus { background-color: #FCFCFC;}
.error .label { display: none;}
.error + input.text, .error + textarea { background-color: #F8E8E8; border-color: #F88888 #F8C8C8 #F8E8E8 #F8A8A8; border-width: 2px; margin-left: -1px; margin-right: -1px;}
.error + input.text:focus, .error + textarea:focus { background-color: #FFF0F0; border-color: #FFC0C0 #FFE0E0 #FFF8F8 #FFD0D0;}
#captcha > span.error {background-color: red;}
.submit { float: right;}
button, .button {
	display: inline-block; padding: 1ex;
	text-decoration: none;
	font-weight: bold; font-size: 17px;
	text-transform: uppercase;
	color: white;
	cursor: pointer;
	background-color: #C00;
	border: 1px solid #C00; border-color: red #800 #200 #C00;
	text-shadow: black 1px 1px;
}
button:hover, .button:hover {
	background-color: red;
}

input.text, textarea, input.text:focus, textarea:focus { background-color: #222; background-color: rgba(255,255,255,0.13); color: #888; color: rgba(255,255,255,0.53); border-color: #444 #555 #666 #333; border-radius: 3px; font-size: 12px;}
input.text:focus, textarea:focus { background-color: #262626; background-color: rgba(255,255,255,0.15); color: white; border-color: #555 #666 #888 #444;}
.error + input.text, .error + textarea { background-color: #4C0000; background-color: rgba(255,0,0,0.30); border-color: #200 #600 #800 #400; border-width: 2px; color: red;}
.error + input.text:focus, .error + textarea:focus { background-color: #800000; background-color: rgba(255,0,0,0.50); border-color: #300 #900 #C00 #600; color: white;}

/* elements */

ul { margin-left: 0; margin-right: 0;}
ul li { list-style-type: none; display: block;}
ul.horiz { margin: 0; padding: 0;}
ul.horiz li { float: left; margin: 0 1em 0 0;}
ul.bullet { margin: 0 1.5em 1.5em;}
ul.bullet li { list-style-image: none; list-style-type: square; display: list-item;}
ul.bullet-tick > li {
	list-style-type: none;
	list-style-image: url(/i/tick.png);
	padding: 0.5em 0 0.2em 0;
	margin-left: 1em;
}

.col { float: left; width: 170px; margin-right: 25px;}
.col-wider { width: 240px;}
.col-double { width: 365px;}
.st { margin-right: 0 !important;}

.aside { float: right; margin-left: 0; padding-left: 25px;}
.box {
	background-color: black;
	background-color: rgba(0,0,0,0.6);
	margin: 1em 0 1em 1em; padding: 25px;
}
.box-outset {
	padding: 25px; margin: -25px -25px 25px -25px;
	position: relative;
}

.switch .alt-label { display: none;}
.switch:hover .label { display: none;}
.switch:hover .alt-label { display: inline;}

.section { position: relative; z-index: 55;}
.sub-section { position: relative; z-index: 60;}
.article { overflow: hidden;}
.article > :first-child { margin-top: 0;}
.article h5 { margin-top: 1em;}

.slider { background-color: red; width: 755px; height: 300px;}

.firm-info p { margin: 0;}
.firm-info label, .const { display: inline-block; vertical-align: top;}
.firm-info label { width: 15%;}
.firm-info address { display: block; font-style: normal; margin: 0;}
.firm-info strong { font-size: 14px; display: inline !important;}

.tile .icon { float: left; margin-right: 5px;}
.tile div { overflow: hidden;}
.tile strong { display: block;}
a.tile { color: white !important;}
a.tile strong { text-decoration: underline;}
.tile-list .icon { float: left; width: 32px; height: 32px; margin-right: 10px;}
.tile-list li { float: left; width: 170px; margin-right: 25px;}
.tile-list li div { overflow: hidden;}

.tile-list-vertical .icon, .tile-list-vertical div { float: none; display: inline-block; vertical-align: middle;}
.tile-list-vertical li { width: auto; float: none; display: block; margin-bottom: 1em;}

.icon-list li { float: left; margin-right: 10px; text-align: center;}
.icon-list li .icon { margin: 1em 0;}
.icon-list strong { display: block;}

.dom-modal { display: none;}
.fb_iframe_widget { vertical-align: top;}
#social-fans iframe { height: 161px !important; border-bottom: 1px solid gray !important;}
#social-fans { padding: 0em 0em 15em;}

.gallery { padding: 1em 0;}
.gallery a { display: inline-block; margin-right: 10px; opacity: 1;}
.gallery a:hover { opacity: 0.7;}

/* some new stuff */
.button, .gallery a, #access a {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* go specific! */

#grad {
	position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1;
	background: transparent url(/i/grad.png) repeat-x bottom center;
}

#header {
	float: left; width: 145px;
	background-color: black;
	background-color: rgba(0,0,0,0.8);
	padding: 20px; margin-left: -25px;
	position: fixed; z-index: 100;
}
#header a { text-decoration: none;}
#branding a { text-transform: uppercase; color: white; font-size: 18px; line-height: 24px;}
#branding h6 { font-weight: normal; font-size: 11px; position: absolute;}
#access { font-size: 16px; margin-top: 2em;}
#access ul, #access li { margin: 0; padding: 0;}
#access a { text-transform: uppercase; display: block; padding: 5px 20px; margin: 0 -20px; color: inherit;}
#access a:hover {
	backgrond-color: #800040;
	background-color: rgba(255,0,128,0.5);
}
#access a.current {
	position: relative;
	backgrond-color: #C00060;
	background-color: rgba(255,0,128,0.75);
}
#access a.current:before {
	content: '\25BA'; color: white !important;
	display: inline-block;
	position: absolute; left: 5px; font-size: 10px;
}
#contents { float: left; width: 755px; margin-left: 170px; position: relative;}

#title { margin: 0.3em 0 0 0; position: relative; font-size: 36px;}
#splash { height: 500px; position: relative;}
#illustr {
	background: transparent url(/i/marker.png) no-repeat center center;
	width: 830px; height: 491px;
	margin: 0 0 0 -75px;
	position: absolute; z-index: 15;
}
#slogan { position: absolute; right: 2em; bottom: 2em; z-index: 50;}
#slogan ins {
	float: left; clear: left;
	font-weight: bold; text-decoration: none;
	background-color: red;
	background-color: rgba(255,0,0,0.75);
	padding: 3px 5px;
	display: inline-block;
}


#product h3 { border-bottom: 1px solid #666; padding-bottom: 0.2em; margin-bottom: 0.2em;}
#product .tile-list .icon { margin-right: 5px;}
#action { position: relative; }

.title h1 { margin-top: 0;}
.title > * { vertical-align: middle; display: inline-block;}

#refs { float: right; width: 200px; margin-top: -11em;}
#refs h5 { text-align: center;}
.cycl { text-align: center;}
.cycl-item * { display: inline-block; vertical-align: middle;}
#refs .cycl { height: 100px;}
#refs .cycl li { line-height: 100px;}

#print { min-width: 32ex; margin-top: -1em; margin-left: 2ex;}
#kontakt .sub-section { padding: 1em 0;}

/* assets */
.splat, .image, .txt, .icon { background: transparent none no-repeat center center;}
.image, .txt, .icon { display: inline-block; vertical-align: middle;}
.txt .label, .icon .label, .image .label { display: none;}

.logo { background-image: url(/i/paintball-bros.png); width: 140px; height: 80px;}

.icon { width: 32px; height: 32px;}

.play-all-day { background-image: url(/i/ico/features/clock.png);}
.more-balls   { background-image: url(/i/ico/features/balls.png);}
.scenarios    { background-image: url(/i/ico/features/map.png);}
.lunch-break  { background-image: url(/i/ico/features/grill.png);}

.tick         { background-image: url(/i/tick.png); width: 17px; height: 14px;}
.phone        { background-image: url(/i/ico/phone.png); width: 18px; height: 18px;}
.pdf          { background-image: url(/i/ico/pdf.png); width: 24px; height: 24px;}

#get .icon { width: 100px; height: 100px;}
#get li { margin-right: 50px !important;}
.boots        { background-image: url(/i/ico/get/boots.png);}
.good-humour  { background-image: url(/i/ico/get/nice.png);}

/* #have */
#have li { margin-right: 22px !important;}
.drinks       { background-image: url(/i/ico/have/drink.png);}
.food         { background-image: url(/i/ico/have/burger.png);}
.suits        { background-image: url(/i/ico/have/vest.png);}
.hardware     { background-image: url(/i/ico/have/marker.png);}

.invoice      { background-image: url(/i/ico/firm/invoice.png);}
.delayed-payment      { background-image: url(/i/ico/firm/calendar.png);}

#kontakt .icon { width: 32px; height: 32px;}
.contact { background-image: url(/i/ico/contact/phone.png);}
.address { background-image: url(/i/ico/contact/sign-post.png);}
.email { background-image: url(/i/ico/contact/envelope.png);}
.big-phone { background-image: url(/i/ico/contact/phone.png); width: 32px; height: 32px;}
#kontakt .firm-info h4 { font-weight: normal;}

/* splats */
.splat { background-position: top left; position: absolute; z-index: -1; opacity: 0.9; text-align: center;}
.splat {
	background-image: url(/i/splats/blue.png); width: 627px; height: 448px;
	padding: 200px 0 0 350px;
	margin: -200px 0 0 -350px;
	width: 277px; height: 248px;
	/* x=350,y=200 */
}
#one, #boing, #bam {
	background-image: url(/i/splats/green.png); width: 425px; height: 583px;
	padding: 300px 0 0 130px;
	margin: -300px 0 0 -130px;
	width: 295px; height: 283px;
	/* x=130, y=300 */
}
#shot, #floosh, #whoom {
	background-image: url(/i/splats/red.png); width: 607px; height: 482px;
	padding: 200px 0 0 400px;
	margin: -200px 0 0 -400px;
	width: 207px; height: 282px;
	/* x=400, y=200 */
}

#one    { left: -20ex; top: 50%;}
#two    { right: -30ex; top: 40%;}
#shot   { right: 20ex; bottom: -30em;}
#boing  { right: -10em; top: 45%;}
#plat   { left: -35ex; top: 0;}
#floosh { left: -15ex; bottom: 0px;}
#whoom  { right: -20ex; top: 25em;}
#bam { right: -20ex; top: 0;}

#made-by {
	float: none; clear: both;
	font: 12px/18px 'Calibri', 'Helvetica', 'Arial', sans-serif;
	text-decoration: none;
	display: block; padding: 1em 0; text-align: right;
	color: white; opacity: 0.8;
}
#made-by strong { text-decoration: underline;}