@charset "utf-8";

/*
Theme Name: CallON
Description: Clean and Flexible Theme
Version: 1
Designer: Jan Plotke
Author: Dawid Rogaczewski
Author URI: http://www.infrag.de
*/

html{height: 100%}
body {background:#e8e8e8;font-size: 12px;font-family: Arial, Verdana;line-height:23px;color: #6b6b6b; height: 100%}

img, #logo, #smallphone, #bigphone, .button, a, h3, #slidernav li,
#computer, #footer, #footer img, .smalllogo, .learnmore, #submit { behavior: url(javascript/iepngfix.htc)}


hr{background: none; border: none; border-top: 1px solid #C3D3DF; clear: both; height: 1px; margin: 20px 0}


/* Hack
-------------------------------------------------------------------------------- */

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



/* Typo
-------------------------------------------------------------------------------- */

small {	display: block;	margin: 10px 0 10px 0;color: #808080; font-size: .9em}

p {	color: #555; margin: 0 0 20px 0; line-height: 20px}
#main p{margin: 0 0 20px 0}
#main .widget-block p{margin: 0 0 0 5px; font-size: 11px; padding: 10px 0 0 0; border-top: 1px solid #f1f1f1} 

h1, h2, h3, h4, h5, h6{font-weight: normal; color: #333; margin: 0 0 5px;}

h1 {font-size: 35px;color: #e2001a;text-transform: uppercase; letter-spacing: -1px }
h2 {font-size: 20px; margin: 0 0 10px; clear: both; display: block; letter-spacing: -1px}
h3 {font-size: 17px; margin-bottom: 10px; border-bottom: 2px solid #ccc}
h4 {font-size: 16px;}

h3 a{color: #e2001a;}

.widget-block h4.moretitle{border-bottom: 1px solid #f1f1f1; font-size: 12px; padding-left: 5px; margin-bottom: 0}

a, .link {color: #E31B08;text-decoration: none;}
a:hover{text-decoration: underline}
.link,
.ico-twitter,
.ico-facebook,
.ico-rss,
.ico-youtube{cursor:pointer; background: url(../images/link.png) no-repeat left center; padding:1px 0 1px 22px; line-height: 22px; text-decoration: none; color: #00408C; margin-left: 5px; font-size: 11px}

.ico-twitter:hover,
.ico-facebook:hover,
.ico-rss:hover,
.ico-youtube:hover,
.link:hover{text-decoration: underline}

.ico-twitter{background: url(../images/twitter.gif) no-repeat left center;}
.ico-facebook{background: url(../images/facebook.gif) no-repeat left center;}
.ico-rss{background: url(../images/rss.gif) no-repeat left center;}
.ico-youtube{background: url(../images/youtube.gif) no-repeat left center;}


ul.bull, ul.bull li,
.post ul, .post ul li{list-style:disc; list-style-position: inside; margin-left: 10px;}
ul.bull, .post ul{margin-bottom: 20px}
ul.bull li, .post ul li{color: #333; margin-bottom: 2px; font-size: 12px}
ul.list-success li{background: url(../images/ico-success3.png) no-repeat left 6px; padding-left: 27px; color: #555; margin-bottom: 3px; font-size: 12px}
.post ul.list-success, .post ul.list-success li{list-style-position: outside; margin-left: 0; list-style: none}

ul.bordered-list{list-style: none; margin: 0; padding: 0}
ul.bordered-list li{list-style: none; margin: 0 0 0px; padding: 3px 0 0 0; border-top: 1px solid #f1f1f1}

.title strong{font-size: 14px;font-weight: normal; text-transform: uppercase; color: #6b6b6b}
.title h1{font-size: 3em; letter-spacing: -3px; margin:0 0 20px; font-weight: normal; padding: 0 0 5px; color: #e2001a; line-height: 1 }
#full .title h1{margin-bottom: 0}

.left{float: left;}
.right{float: right}




/* Icons
-------------------------------------------------------------------------------- */

.ico{padding-left: 35px; height: 30px; line-height: 25px;}
.icon-stats,
#text-3 .ico{background: url(../images/icon-statistic.png) no-repeat left center}
.icon-contact,
#text-5 .ico{background: url(../images/icon-comment.png) no-repeat left center}
.icon-info,
#text-4 .ico{background: url(../images/icon-info.png) no-repeat left center}
.icon-twitter{background: url(../images/icon-twitter.png) no-repeat left center; height: 26px; width: 26px; display: block; float: left; text-indent: -9999px; margin: -3px 0 0 0}
.icon-youtube{background: url(../images/icon-youtube.png) no-repeat left center; height: 26px; width: 41px; display: block; float: left; text-indent: -9999px; margin: -3px 0 0 0}
.icon-facebook{background: url(../images/icon-facebook.png) no-repeat left center; height: 26px; width: 26px; display: block; float: left; text-indent: -9999px; margin: -3px 0 0 0}

.img{margin: 0 20px 20px 0;}



/* Logo
-------------------------------------------------------------------------------- */

#logo {position:absolute;left:0;top:0;z-index:10;padding: 12px 4px 12px 0; text-align: center; width: 200px; background: #e2001a;}



/* Content
-------------------------------------------------------------------------------- */

.wrapper{width: 941px;margin: 0 auto;position: relative}
#content{border-bottom: 10px solid #e2001a; padding-top: 60px; position: relative; background:url(../images/content-bg.jpg) repeat-x 0 -37px #fff; overflow: hidden;}

.wide{float: left; width: 100%; margin: 30px 0 30px 0;}

.halfpage,
.xform{float: left; width: 455px; margin: 30px 30px 30px 0;}
.halfpage.highlight{width: 401px;padding:30px 20px 30px 30px;}

.highlight{background: #EDF6FD; border: 2px solid #C3D3DF;}
.last{margin:30px 0}
.inner{padding:10px 0 10px 10px}

.logos{margin: 10px 0 20px -7px; display: block; overflow: hidden;}
.preview{width: 154px; height: 108px; display: block; float: left; background: url(../images/logo_bg.jpg) no-repeat; position: relative; margin: 0}
.preview:hover{background: url(../images/logo_bg-hover.jpg) no-repeat;}
.preview a{position: absolute;top:50%;left:50%;margin: -45px 0 0 -66px; width: 132px; height: 83px; display: block}

.widget-block{margin-bottom: 20px}


/* Home
-------------------------------------------------------------------------------- */

.home .halfpage{width: 455px; margin-top: 0}
.home ul.posts{clear: both; display: block; margin-bottom: 0; }
.home ul.posts li{border-bottom: 1px solid #f1f1f1; margin-bottom: 10px; overflow: hidden}
.home .halfpage h3{border-bottom: 2px solid #ccc; margin: 20px 0; padding-bottom: 5px}


/* Portfolio
-------------------------------------------------------------------------------- */

.portfolio li{width: 292px; display: block; float: left; margin: 0 25px 20px 5px}
.portfolio li.last{margin:0 0 0 5px}
.portfolio li .thumb:hover{border-color: red}


/* Slider
-------------------------------------------------------------------------------- */

.main-teaser{overflow: hidden;}
#slider{overflow: hidden; position: relative; margin:0; float: left;}
#slider li{display: block; width: 940px; }

#slider .img{width: 450px; float: left; overflow: hidden; margin: 30px 30px 30px 0}
#slider .desc{width: 460px; display: block; float: left; overflow: hidden}
#slider .title h1{font-size: 3em; margin: 10px 0 }

.graybox{border: none; background: #dfdfdf; overflow: hidden; padding: 10px 10px}
.graybox p{margin: 0 !important}
.graybox a.btn-big{margin: 0}


#slider p{margin: 10px 0 10px; padding: 0 0 0 5px; font-size: 13px; clear: both}
#slider ul{margin:10px 0}

#slider_bar{position: absolute; right: 0; top: 0; z-index: 100}
#slider_bar a{background: url(../images/dot-off.png) no-repeat; height: 12px; width: 12px; float: left; text-indent: -9999px; display: block; margin: 0 0 0 3px}
#slider_bar a.activeSlide{background: url(../images/dot-on.png) no-repeat;}


/*  Subpages
-------------------------------------------------------------------------------- */

#full{width:100%}
#main{width:706px;float: left; overflow: hidden; margin:0; min-height: 300px; padding:0 0 40px 0; position: relative }
#sidebar{float: left;width: 205px; margin: 0 0px 30px 0; position: absolute; top: 0; right: 0}

#sidebar ul {margin: 20px 0 0 0;}
#sidebar li {margin-bottom: 5px;}
#sidebar li a {text-decoration: none;color: #808080;font-size: 14px;}
#sidebar li a:hover{color: #555;}
#sidebar li.current_page_item a,
#sidebar li.current a{color: #000;}

.clear {clear: both;}

.pagination{background: #e8e8e8;clear: both;display: block; width: 690px; height: 45px; position: absolute; bottom: 0; left: 0;}
.pagination a{color:#808080; text-transform: uppercase; line-height: 47px; display: block; padding: 0 30px; margin: 0 20px}
.pagination a:hover{color: #000}
.pagination a.left{background: url(../images/arrow-l.jpg) no-repeat left center;}
.pagination a.right{background: url(../images/arrow-r.jpg) no-repeat right center;}

.post_date{background:#f1f1f1;padding:5px; clear: both; overflow: hidden; margin-bottom: 10px}
.post-content{display: table}

.tags{clear:left; margin: 10px 0}
.tags img{position:relative; top:3px;}
.tags a:hover{text-decoration: underline}

.thumb,
.alignleft,
.alignright{padding: 2px; border: 1px solid #ccc; float: left; margin: 0 20px 10px 0}

.alignleft{float: left; margin: 0 20px 20px 0}
.alignright{float: right; margin: 0 0 20px 20px}



/* Kontakt
-------------------------------------------------------------------------------- */

form{width: 100%}
label.text, label.textarea{color:#808080;display:block;font-weight:bold;margin:0;}
input.text, textarea.textarea, 
.wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea{border: solid 1px #aaa;background: #fff;padding: 5px;font-family: Arial;font-size: 12px; width:98%}
.formcaptcha input.text{width: 150px; padding: 7px 5px 6px}
.as-label{float: left; margin-right: 10px}

legend{display: none}

form p{margin: 0 0 10px}
form p.formcaptcha{margin-bottom: 0}

.formsubmit .submit, .submit {margin: 10px 0 0 0;background: url(../images/learnmorebtn.png) top left no-repeat;width: 99px; height: 30px; display: block;color: #fff;text-transform: uppercase; text-align: center; font-size: 11px; text-decoration: none; font-weight: bold; line-height: 30px; border: 0; cursor: pointer;}
.formsubmit .submit:hover, .submit:hover {	background: url(../images/learnmorebtn.png) bottom left no-repeat;}

.btn-big {margin: 10px 0 0 0;background: url(../images/btn-big.png) top left no-repeat;width: 160px; height: 39px; display: block;color: #fff;text-transform: uppercase; text-align: center; font-size: 1.3em; text-decoration: none; font-weight: bold; line-height: 39px; border: 0; cursor: pointer;}
.btn-big:hover{	background: url(../images/btn-big.png) bottom left no-repeat;}


#respond .halfpage{width:340px; margin: 0}
#respond p{margin: 5px 0}


/* Success, notice and error boxes
-------------------------------------------------------------- */

div.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 1px solid #ddd; }

.chckbox.error{float:left; padding:1px; height:14px; width:14px; display:block; margin:0 10px 10px 0}

div.error,
input.error { background: #FEF1EC; color: #8a1f11; border-color: red; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }



/* Footer
-------------------------------------------------------------------------------- */

#footer{color: #808080; clear: both}
#footer a {text-decoration: none;color: #808080;}
#footer a:hover{text-decoration: underline}
#footer .col3{margin: 30px 0; overflow: hidden}
#footer .col3 a{text-decoration: underline; color: #777;}
#footer .col3 .block{background: url(../images/sep-footer.jpg) top right no-repeat; float: left; width: 288px; margin-right: 15px; padding-right: 15px; padding-left: 5px; height: 115px}
#footer .col3 #text-5{background:none; margin: 0; padding-right: 0}

#footer .col3 p{font-size: 12px; color: #808080}


#copyright{padding:20px 0 0 20px;clear: both; background: url(../images/footer-copyright.jpg) no-repeat; height: 68px;}
#copyright .logo-small{float: left; margin-right: 10px}
#copyright p{line-height: 18px; font-size: 11px; padding: 0; margin: 0; float: left;}
#copyright ul{margin: 0 20px 0 0;padding: 0;float: right}
#copyright li{float: left; line-height: 18px; margin: 0 0 0 10px;}



/* Navigation
-------------------------------------------------------------------------------- */

#top {background-color:#e2001a;height: 43px;border-bottom: 1px solid #fff}

#nav-main ul {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 1.2em;z-index: 9999; float: right;position: relative;}
#nav-main ul, #nav-main ul ul{ margin:0; padding:0; list-style-type:none; list-style-position:outside;position:relative;line-height:1em;}

#nav-main ul a{display:block;padding: 6px 12px;color:#fff;text-decoration:none;}
#nav-main ul a:hover {background: #6F000F;color:#fff;}
#nav-main ul .current{color: #fff; background: #9F0015}
#nav-main ul li{float:left;position:relative;margin: 8px 0 0 6px}
#nav-main ul ul {position:absolute; top:3.3em; display:none; z-index: 1;}
#nav-main ul li ul a {width:8em;height: 40px;float:left;background-color: black;background-image: none !important;}

#nav-main ul li ul a:hover {background-color: #292929;}
#nav-main ul ul ul{	top:auto;}
#nav-main ul li ul ul {left:11.3em; margin:0px 0 0 10px;}
#nav-main ul li:hover ul ul, #nav-main ul li:hover ul ul ul, #nav-main ul li:hover ul ul ul ul{ display:none;}
#nav-main ul li:hover ul, #nav-main ul li li:hover ul, #nav-main ul li li li:hover ul, #nav-main ul li li li li:hover ul{ display:block;}