/*
	Theme Name: PageOne
	Description: PageOne for themeforest
	Author: Innovatics GmbH
	Author URI: http://www.innovatics.de/
	Version: 1.0
*/

/* Reset */
*,html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,em,font,img,small,strong,ol,ul,li,fieldset,form,table,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline}
:focus { outline: 0 }
html, body { height: 100%; width: 100% }
ol, ul { list-style: none }
table { border-collapse: separate; border-spacing: 0 }
caption, th, td { text-align: left; font-weight: normal }
a { text-decoration: none; }

/* Basics */
em { font-style: italic }
.bold, strong { font-weight: bold }
.underline { text-decoration: underline }
small { font-size: 10px }
.normal-size { font-size: 100% !important }

.center { text-align: center }
.left { text-align: left }
.right { text-align: right }
.justify { text-align: justify }

.floatLeft { float: left !important; }
.floatRight { float: right !important; }
.floatNone { float: none !important; }

.clear { clear: both}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }

.relative { position: relative !important }
.absolute { position: absolute }

.inline { display: inline; }

.cursor { cursor: pointer }

/* Widths & Heights */
.w78 { width: 78px;}

/* Margins & Paddings */
.mr30 { margin-right: 30px; }
.mb20 { margin-bottom: 20px; }
.mb35 { margin-bottom: 35px; }
.mb50 { margin-bottom: 50px; }

/* Fonts */
.f20 { font-size: 20px !important; }
.f35 { font-size: 35px !important; }

/* Colors */
.gray { color: #acacac !important; }

/* Formelements */
input, textarea, label.overlay { font-size: 14px; font-family: Arial; font-style: italic; color: #888888; }

p.input-text { position: relative; width: 533px; height: 30px; padding: 0 !important; margin-bottom: 20px; background: url(../images/forms/bg-input-text.png) no-repeat; }
p.input-text input { width: 510px; height: 18px; padding: 6px 0 0 12px; border: 0; background: none; }

p.textarea { position: relative; width: 533px; height: 278px; padding: 0 !important; margin-bottom: 20px; background: url(../images/forms/bg-textarea.png) no-repeat; }
p.textarea textarea { width: 510px; height: 260px; margin: 7px 0 0 12px; border: 0; background: none; }

label.overlay { position: absolute; top: 5px; left: 12px; z-index: 5; cursor: text; }
label.error { position: absolute; bottom: -18px; left: 11px; display: block; color: red; font-size: 10px; overflow: hidden; }

/* Color-Switcher */
#color-switcher { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 0px; background: #fff; border-bottom: 1px solid #d7d7d7; overflow: hidden; }
#color-switcher .color-box { float: left; margin: 10px 15px 0 10px; }
#color-switcher .color-box h1 { font-size: 20px; color: #d7d7d7; margin-bottom: 5px; }
#color-switcher .color-box p { line-height: 20px; width: 200px; }
#color-switcher .color-box img { border: 1px solid #d7d7d7; cursor: pointer; }
#color-slider { position: absolute; top: 0; left: 100px; z-index: 101; width: 133px; height: 35px; background: transparent url(../images/color-switcher/slider.gif) no-repeat bottom; cursor: pointer; }
#color-slider span { position: absolute; bottom: 10px; left: 32px; color: #d7d7d7; font-size: 12px; }

/* Tables */
table { margin-bottom: 20px; }
table, td, th { vertical-align: middle; }
td, th { padding: 10px; border-bottom: 1px solid #e5e5e5; width: 150px; }
th, tr:hover { background: #e5e5e5; text-align: left; }
th { text-transform: uppercase; }

/* Lists */
ul.disc-list { list-style-type: disc; list-style-position: inside; margin-bottom: 20px; line-height: 130%; }
ul.circle-list { list-style-type: circle; list-style-position: inside; margin-bottom: 20px; line-height: 130%; }
ul.square-list { list-style-type: square; list-style-position: inside; margin-bottom: 20px; line-height: 130%; }
ul.disc-list li.no-style, ul.circle-list li.no-style, ul.square-list li.no-style { list-style-type: none; line-height: 130%; }

/* Wrapper */
#wrapper {margin: 0 auto; width: 982px; }

/* Navigation Menu */
.menu { color: #fff; font-size: 14px; font-weight: bold; padding: 20px 0 20px 0px; height: 20px; position: relative; }
.menu ul.navi-list { position: absolute; right: 130px; top: 20px; }
.menu ul.navi-list li { display: inline;}
.menu ul.navi-list li.goto { float: left; padding: 7px 20px 0 0; font-size: 10px; }
.menu ul.navi-list li a { display: block; float: left; color: white; width: 98px; height: 20px; padding-top: 5px; text-align: center; text-decoration: none; margin-right: 1px; }
.menu .social_media { float: right; width: 105px; padding-right: 10px; }
.menu .social_media .social_media_center, .menu .social_media .social_media_left, .menu .social_media .social_media_right { float: left; height: 26px; width: 4px; }
.menu .social_media .social_media_center { float: left; height: 26px; width: 120px; position: relative; }
.menu .social_media .social_media_center ul.social-list { position: absolute; top: 3px; left: 0px; width: 120px; }
.menu .social_media .social_media_center ul.social-list li{ float: left; display: inline; width: 25px;}

/* Teaser Content and Graphics */

#teaser { width: 968px; height: 350px; float: left; position: relative; }
#teaser .item-list{ position: absolute; bottom:10px; right: 10px; z-index: 3 }
#teaser h1 { position: absolute; z-index: 4; color: #fff; font-size: 40px; top: 290px; left: 20px; }
#teaser .slider-img-layer-bg { position: absolute; z-index: 2; }
#teaser .flag_center { position: absolute; top: 95px; z-index: 4; }
#teaser #teaser_image { position: relative; }
#teaser #teaser_image { height: 350px; width: 970px; overflow: hidden; }
#teaser #teaser_image .teaser_items { width: 20000em; position: absolute; }
#teaser #teaser_image .teaser_items .teaser_item { position: relative; float: left; height: 400px; width: 970px; }
#teaser #logo { position: absolute; right: 0; top: 52px; background: url(../images/logo.png); width: 633px; height: 250px; }
#teaser #twitter { width: 333px; padding-left: 12px; }
#teaser #twitter p { color: white; font-family: arial; font-weight: bold; font-style: italic; line-height: 25px; text-align: center; padding-top: 30px; }
#teaser #twitter #twitter_top { position: relative; left: -18px; background: url(../images/twitter_top.png); width: 102px; height: 101px;  }
#teaser #twitter #twitter_bottom { position: relative; left: -12px; background: url(../images/twitter_bottom.png); width: 345px; height: 126px; }
#teaser #twitter a { font-weight: bold; font-size: 10px; font-style: normal; font-family: arial; line-height: normal; color: #fff; padding: 4px 0 0 20px; position: absolute; z-index: 6; top: 200px; left: 250px; }
#teaser ul#teaser_navi { position: absolute; bottom: 13px; right: 13px; }
#teaser ul#teaser_navi li { display: inline; }
#teaser ul#teaser_navi li a { display: block; float: left; height: 16px; width: 16px; margin-left: 4px; background: url(../images/nonactive.png) no-repeat; cursor: pointer; }
#teaser ul#teaser_navi li a:hover, #teaser ul#teaser_navi li a.active { background: url(../images/active.png) no-repeat; }

/* Welcome Banner */

#welcome { margin-top: 10px; background: url(../images/welcome.png); height: 230px; margin-left: 12px; }
#welcome h1 { font-weight: normal; font-size: 45px; padding-top: 40px; padding-left: 130px; }
#welcome p { padding-left: 130px; padding-top: 10px; font-size: 16px; line-height: 25px; }

.chair { padding-left: 13px; position: absolute; z-index: 2; }

/* About Banner */
.about { height: 90px; float: left; width: 970px; position: relative; z-index: 3; }
.about img { height: 90px; float: right; width: 970px; position: absolute; top: 0px; left: 0px; z-index: -1; }
.about h1 { position: relative; top: -38px; left: 110px; font-size: 30px; font-weight: normal; }
.about .about_left { float: left; width: 650px; height: 90px; }
.about .about_right { float: left; width: 200px; margin-top: 30px; padding-left: 100px; height: 51px; position: relative;}

.flag_center p { padding-top: 10px; font-weight: bold; font-size: 14px; color: white; }

/* Content Area */
.content { padding: 40px 25px 40px 88px; margin-left: 12px; border-top: 1px solid #dfdfdf; background: #f4f4f4; color: #3d1c00; display: table;}

.content .service_box_right { background: url(../images/service_box_right.png) no-repeat; width: 551px; float: left; height: 178px; padding-top: 30px; }
.content .service_box_left { background: url(../images/service_box_left.png) no-repeat; width: 551px; float: left; height: 178px; padding-top: 30px; }
.content .service_box_left p, .content .service_box_left h1 { padding-left: 40px; }
.content .service_box_left p, .content .service_box_right p { line-height: 25px; }
.content .service_box_left h1, .content .service_box_right h1 { color: #cc6213; font-size: 35px; padding-bottom: 10px; font-weight: normal; }

.content .content_left { float: left; width: 520px;}

.content .content_right { float: left; margin-left: 40px; width: 270px; }
.content .content_right h1 { color: #cc6213; }
.content .content_right p { font-size: 16px; font-weight: bold; color: #3d1c00; line-height: 25px; }
.content .content_right img { float: left; padding-bottom: 5px; padding-left: 5px; }
.content .content_right ul li { font-size: 16px; font-weight: bold; color: #3d1c00; line-height: 25px; display: inline; }
.content .content_right ul.sub li.gray { float: left; width: 78px;}

.content h1 { font-size: 24px; position: relative;}
.content h2 { position: relative; }
.content img { padding-bottom: 20px; }
.content p { padding-bottom: 20px; line-height: 20px; position: relative; }
.content p .highlight { background: yellow; }

.content ul.reference-links { padding-top: 20px; margin-bottom: 30px; }
.content ul.reference-links .goto { padding-top: 2px; }
.content ul.reference-links li { float: left; display: inline; padding-left: 10px; font-weight: bold; }
.content ul.reference-links li.current a, .content ul.reference-links li.current a:visited { color: #3d1c00; font-weight: normal; text-decoration: underline; }

.content ul.reference-images { float: left; width: 857px;}
.content ul.reference-images li { float: left; margin: 6px;  width: 199px; height: 200px; }
.content ul.reference-images a:hover { text-decoration: none; }
.content ul.reference-images img { display: block; padding-bottom: 5px; border: none; }

.content ul.reference-images .port-images { position: relative; width: 199px; height: 200px; overflow: hidden; cursor: pointer;}
.content ul.reference-images .port-images div.layer { position:  absolute; width: 199px; height: 400px; top: 0px; left: 0px; z-index: 6; display: inline; overflow: hidden;}
.content ul.reference-images .port-images img.pngfix { position:  absolute; width: 199px; height: 400px; top: 0px; left: 0px; z-index: 5; display: inline; }
.content ul.reference-images .port-images img { position:  absolute; width: 199px; height: 200px; top: 0px; left: 0px; z-index: 1; }
.content ul.reference-images .port-images div p { position: absolute; bottom: -10px; left: 12px; width: 199px; font-size: 11px; color: #3d1c00; z-index: 6;}
.content ul.reference-images .port-images .fullsize { width: 0px; height: 0px; display: none;}
.content ul.reference-images .port-images div.layer-pos { top: -200px; }

/* Buttons */
.button { color: white; font-size: 13px; font-weight: bold; float: right; }
/*.button.button_padding { float: none; padding-left: 300px; padding-top: 50px; padding-bottom: 50px; }*/

/* Footer */
#footer #footer_text { color: #fff; font-size: 9px; width: 963px; margin: 0 auto; text-align: right; padding-top: 15px; }
#footer #footer_text a { color: #fff; font-weight: bold; text-decoration: none; }
#footer #footer_text a:hover { text-decoration: underline; }