/* CUSTOM STYLESHEET for www.pcundhandy-shop.de */
/* author: ideenwerft GmbH */
/* author site: www.ideenwerft.com
/* copyright 2015 */


@import "fonts.css";

/* =LAYOUT ======================== */
body {font-size:16px;font-family: 'Open Sans', sans-serif;color:#686868;background:#fff;}
.container {max-width:1024px;}


/* =BASIC STYLES ======================== */
.small {font-size: 0.9em;}
.xsmall {font-size: 0.8em;}
.red, .error {color:#c00;}
.grey {color:#999;}
.clear {clear:both;}
.italic {font-style:italic;}
.hide {display:none;}
.align-center {text-align:center;}
.align-right {text-align:right;}
.align-justify {text-align:justify;}
.align-left {text-align:left;}
.note {font-size:0.9em;font-style:italic;color:#999;}
/* links */
a:link, a:visited {color:#4B7EBF;transition:all 0.4s ease-in;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;}
a:hover, a:focus {color:#265B9F;text-decoration:none;}
:active, :focus {outline:0;}
a.button:link, 
a.button:visited,
a.btn:link, 
a.btn:visited{
    padding:5px 22px 5px 10px;
    font-size:15px;
    color:#3498db;background:url("../Img/button-arrow-blue.png") no-repeat #fff;background-position:right 10px top 11px;border:1px solid #3498db;transition:all 0.4s ease-in;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;
}
a.button:hover, 
a.button:focus,
a.btn:hover, 
a.btn:focus{
    color:#fff;background:url("../Img/button-arrow-white.png") no-repeat #3498db;background-position:right 10px top 11px;text-decoration:none;
}
a.internal-link:link, a.internal-link:visited {color:#3498db;}
a.internal-link:hover, a.internal-link:focus {background: url("../Img/icons.png") 0 -30px no-repeat;}
a.external-link-new-window:link, a.external-link-new-window:visited {padding-left:14px;background: url("../Img/icons.png") 0 -60px no-repeat;}
a.external-link-new-window:hover, a.external-link-new-window:focus {background: url("../Img/icons.png") 0 -90px no-repeat;}
a.pdf {padding-left:15px;background:url("../Img/icons.png") 0 -180px no-repeat;}
a.doc {padding-left:15px;background:url("../Img/icons.png") 0 -210px no-repeat;}
a.mail:link, a.mail:visited {padding-left:15px;background:url("../Img/icons.png") 0 -120px no-repeat;}
a.mail:hover, a.mail:focus {background:url("../Img/icons.png") 0 -150px no-repeat;}
a.tel {color:#fff !important;}
/* skip link - sichtbar beim navigieren per tastatur */
#skip a, #skip a:hover, #skip a:visited {position:absolute;left:0px;top:-500px;width:1px;height:1px;overflow:hidden;}
#skip a:active, #skip a:focus {position:static;width:auto;height:auto;} 
/* anker-tags f�r interne links nach oben setzen*/
a.anchor {position:absolute;margin-top:-35px;}
/* text */
h1,h2,h3,h4,h5 {font-weight:600;text-align:center;}
p {margin-bottom:20px;line-height:22px;}
h1 {margin-bottom:40px;font-size:26px;color:#245eab;}
h2 {margin:10px 0 10px;font-size:22px;}
h3 {margin:5px 0 20px;font-size:22px;color:#2c61a4;}
h4 {
    margin:5px 0 10px;    
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
h4 + h5 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 18px;
    color: #3498db;
    font-weight: 600;
}
h5 {
    text-align: left;
    font-size: 16px;
}
footer h1,footer h2,footer h3,footer h4,footer h5 {color:#fff;text-align:left;}
footer h2 {font-size:20px;}
footer h3 {font-size:18px;}
footer h4 {font-size:16px;}
/* other */
ul {list-style:disc;margin:0 0 10px 20px;line-height:1.5em;}
ol {list-style:decimal;margin:0 0 10px 20px;line-height:1.5em;}
#content .csc-textpic-imagewrap ul, #content .csc-textpic-imagewrap ol {margin-left:0px;}
blockquote {padding:15px 40px;}
blockquote p {color:#0061a1;font-size:14px;font-style:italic;}
blockquote cite {color:#888;font-size:12px;font-style:italic;}
table {font-size: 1em;border-collapse:collapse;border-spacing:0;}
table th, table td {vertical-align:top;}
/* achtung: tabellen brauchen weiterhin 'cellspacing="0"' im markup! */
table p {padding:0;margin:0;}
hr, hr.ce-div {
    clear:both;
    height:1px;
    margin:2rem 0 4rem;
    background-color: #ccc;
    color: #ccc;
    border: #ccc;
}
address, caption, cite, code, dfn, var {font-style:normal;font-weight:normal;}
caption, th {text-align:left;}
fieldset {border:none;}
input, textarea, select {border:1px solid #ccc;font-size:1em;padding:2px;color:#336699;}
input:focus, textarea:focus {background-color:#f3f3f3;}
.csc-linkToTop {margin:30px 0 20px;}
.csc-linkToTop a:link, .csc-linkToTop a:visited {background:url("../Img/to-top.gif") 0 0 no-repeat;padding:2px 0 0 18px;font-weight:bold;text-decoration:none;}
.csc-linkToTop a:hover, .csc-linkToTop a:focus, .csc-linkToTop a:active {background:url("../Img/to-top.gif") 0 -30px no-repeat;text-decoration:none;}

img {border:0;color:#C00;}
.csc-textpic-imagewrap img {max-width:100%;height:auto;}
.ce-border img {
    border: 1px solid #d6d6d6;
}

/* =HEADER ======================== */
body > header {margin-bottom:50px;border-bottom:2px solid #26538c;}
div.headerTop {min-height:113px;padding:10px 0 0;background:url("../Img/header-stripes.jpg") no-repeat left top #2c61a4;}
#logo {display:inline-block;width:340px;height:60px;margin-top:10px;background:url("../Img/logo.png") no-repeat;text-indent:-9999px;}
#logo:hover, #logo:focus {transform:none;}

div.headerTop div.info {color:#fff;float:right;}
div.headerTop div.info div.standort {font-size:12px;font-weight:100;float:left;margin-bottom:10px;}
div.headerTop div.info div.standort:first-child {margin-right:20px;padding-right:20px;border-right:1px solid #224c80;}
div.headerTop div.info div.standort h4 {margin-top:0px;margin-bottom:5px;font-size:13px;text-align:left;}
div.headerTop div.info div.standort div.phone {position:relative;}
div.headerTop div.info div.standort div.phone span.glyphicon {display:inline-block;margin-right:5px;}
div.headerTop div.info div.standort div.phone p {display:inline-block;margin:0;letter-spacing:1px;}
div.headerTop div.info div.standort table {clear:both;}
div.headerTop div.info div.standort td {margin-right:5px;}

@media (max-width: 767px) {
div.headerTop {text-align:center;background-size:cover;}
#logo {max-width:100%;margin:0 auto;display:block;background-size:contain;}
div.headerTop div.info {float:none;margin-top: 20px;margin-left: 5px;}
div.headerTop div.info div.standort {width:48%;font-size:11px;padding:0;border-right:none !important;text-align:left;margin-right:0 !important;margin-bottom: 10px; }
div.headerTop div.info div.standort span.glyphicon {display:none !important;}
div.standort table tr td:nth-child(1) ,
div.standort table tr td:nth-child(2) {display:none;}
.phone {color:#fff !important;}
.navbar-inverse .navbar-nav li {background:none;}
}

/* Navigation */
div.navbar {margin-bottom:0;border-radius:0;}
div.navbar-inverse {background-color:#26538c;border:none;}
.navbar-inverse .navbar-nav li {background:url("../Img/nav-trenner.png") no-repeat right 19px;padding-right:5px;}
.navbar-inverse .navbar-nav li:last-child {background:none;padding:0;}
.navbar-inverse .navbar-nav li a:link, .navbar-inverse .navbar-nav li a:visited {color:#c8d3e2;font-weight:100;transition:all 0.4s ease-in;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;}
.navbar-inverse .navbar-nav li a:hover, .navbar-inverse .navbar-nav li a:focus {color:#fff;}

.navbar-nav li.active a:link, .navbar-nav li.active a:visited {background:none;color:#fff;}
.navbar-nav li.active a:hover, .navbar-nav li.active a:focus, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background:none;}

/* =CONTENT ELEMENTS ======================== */

article.row {margin-top:40px;}
div.divider {margin-bottom:40px;}
div.divider hr {height:2px;background-color:#e5e5e5;}
div.csc-frame-rulerAfter article.row {margin-bottom:0px;}
div.csc-frame-rulerAfter {padding-bottom:50px;margin-bottom:50px;border-bottom:2px solid #e5e5e5;}
div.csc-textpic-text {text-align:center;font-size:14px;}
div.csc-textpic-image {border:1px solid #d6d6d6;}


/* =FOOTER ======================== */
footer {margin-top:50px;padding:35px 0px 5px;
background: rgb(72,119,178); /* Old browsers */
background: -moz-linear-gradient(top, rgba(72,119,178,1) 0%, rgba(45,99,167,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(72,119,178,1)), color-stop(100%,rgba(45,99,167,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(72,119,178,1) 0%,rgba(45,99,167,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(72,119,178,1) 0%,rgba(45,99,167,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(72,119,178,1) 0%,rgba(45,99,167,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(72,119,178,1) 0%,rgba(45,99,167,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4877b2', endColorstr='#2d63a7',GradientType=0 );}
footer p {color:#fff;font-size:14px;text-align:left;}
footer div.row {margin-bottom:30px;}
footer div.standort {display:inline-block;float:left;}
footer div.standort > div {float:left;}
footer div.standort div:first-child {margin-right:15px;}
footer div.standort h3 {margin-top:0;}

footer div.musthave {width:100%;}

/* musthave */
ul.musthave {clear:both;margin:0;list-style:none;float:right;}
ul.musthave li {display:inline-block;margin-left:10px;}
ul.musthave li:last-child {background:none;padding-right:0;}
ul.musthave li a:link, ul.musthave li a:visited {color:#c8d3e2;font-size:12px;transition:all 0.4s ease-in;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;}
ul.musthave li a:hover, ul.musthave li a:focus {color:#fff;}

/* copy */
span.copy {margin-top:5px;color:#fff;font-size:12px;float:left;}
span.copy a:link, span.copy a:visited {color:#c8d3e2;text-decoration:none;font-size:12px;transition:all 0.4s ease-in;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;}
span.copy a:hover, span.copy a:focus {color:#fff;text-decoration:none;}

/* =OTHER ======================== */

/* table contenttable */
#content table.contenttable {width:100%;}
#content table.contenttable th, 
#content table.contenttable td {padding:9px 10px !important;}
#content table.contenttable thead th {padding-bottom:10px;border-bottom:1px solid #e5e5e5;}
#content table.contenttable th.col1 {width:70%;}
#content table.contenttable th.col2 {width:10%;text-align:center !important;}
#content table.contenttable th.col3 {width:10%;text-align:center !important;}
#content table.contenttable th.col4 {width:10%;text-align:center !important;}
#content table.contenttable tbody td {font-size:0.9em !important;text-align:center !important;}
#content table.contenttable tbody td:first-child {text-align:left !important;}
#content table.contenttable tbody tr:nth-child(even) {background:#f8f8f8 !important;}
#content table.contenttable td:nth-child(2) {font-weight:600 !important;}

/* einzelkomponenten */
.pid2893 #content table.contenttable td:nth-child(2) {
    white-space: nowrap;
}

/* DCE Slideshow */
.dce-keyvisual-slider img {
    width: 100%;
}
.dce-keyvisual-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.dce-keyvisual-slider .slick-dots {
    bottom: 25px;
}
.slick-dots li button:before {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}
.slick-dots li.slick-active button:before {
    color: #fff;
}

/* DCE Teaser */
.dce-teaser > .row > div {
    margin-bottom: 6rem;
}
.dce-teaser h3 {
    color: inherit;
}
.dce-teaser img {
    border: 1px solid #d6d6d6;
}
.dce-teaser .text-wrap {
    text-align: center;
}
.dce-teaser .text-wrap p {
    font-size: 15px;
}

/* DCE Logoslider */
.dce-logoslider h4 {
    margin: 5px 0 20px;
    font-size: 22px;
    color: #2c61a4;
}
.dce-logoslider .slick-initialized .slick-slide {
    display: flex;
    height: 125px;
    align-items: center;
}
.dce-logoslider .slick-prev:before, .slick-next:before {
    font-size: 30px;
    opacity: .75;
    color: #444;
}
.dce-logoslider .slick-prev {
    left: -30px;
}
.dce-logoslider .slick-next {
    right: -30px;
}

/* DCE Produkt-Tabelle */
div.productTable {margin-bottom:40px;}
div.productTable h3 {text-align:left;margin-left:20px;margin-bottom:20px;}
div.productTable tr {border-top:1px solid #d6d6d6;}
div.productTable th {padding:10px 10px 10px 20px;}
div.productTable td.details {padding:10px 10px;}
div.productTable td.price {padding:10px 20px 10px 10px;font-weight:600;color:#3498db;text-align:right;}


/* Kontakt Formular */
.tx-powermail h3,
.tx-powermail legend {
    display: none;
}
.tx-powermail .form-horizontal .control-label {
    text-align: left;
    width: 20%;
}
.tx-powermail .col-sm-10 {
    width: 80%;
    margin-bottom: 0;
}
.tx-powermail .powermail_fieldwrap_datenschutz > label {
    opacity: 0;
}
@media (min-width:768px) {
    .tx-powermail .col-sm-offset-2 {
        margin-left: 20%;
    }
}

/* =EXTENSIONS ======================== */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {margin-bottom:30px;}



/* =JQUERY PLUGINS ======================== */



@media (print) {
    
    body {font-size:14px;}
    header {display:none;}
    .container {width:100%;}
    #content table.contenttable {border:1px solid #ddd;border-bottom:none;}
    #content table.contenttable th, table.contenttable td { padding: 0.5% !important;border-bottom:1px solid #ddd;}
    iframe {display:none;}
    footer {background:#fff;}
    footer h1, footer h2, footer h3, footer h4, footer h5 {color:#444;}
    footer p {color:#444;}
    footer div.standort {width:50%;float: left;}
    .musthave {display:none;}
    h1 {font-size:20px;}
    p {font-size:14px; margin-bottom: 10px;line-height: 16px;} 

}