/*
 * ZERTIFICON SOLUTIONS GMBH, 2013
 */
     
/* this is for the main header of the page */
#container #head {
    /*
     * this is the regular styling using a gradient color fill
     * and a flat color as a fallback for browsers that do not support gradients.
     */
    background-color: #363636;
    background-image: -moz-linear-gradient(center top, #464646, #202020);
    background-image: -ms-linear-gradient(center top, #464646, #202020);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#464646), to(#202020));
    background-image: -webkit-linear-gradient(center top, #464646, #202020);
    background-image: -o-linear-gradient(top, #464646, #202020);
    background-image: linear-gradient(center top, #464646, #202020);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff464646', endColorstr='#ff202020', GradientType=0);
    
    /*
     * also, the rounded corners and the bottom border are defined.
     */
    -webkit-border-radius: 18px 18px 0 0;
    -moz-border-radius: 18px 18px 0 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 3px solid #ca1314;
    
    /*
     * the following rules would give the header a flat color
     * and straight corners instead of rounded ones.
     */
    /*background: #f6f6f6;
    border-radius: 0;*/
}

/* this is for the subtext in the header  */
#container #head #header-sub {
    /* change this if you need a different text color */
    color: #e2e2e2;
    
    /* this is needed for changing the horizontal position */
    left: 92px;
    
    /* this is needed to change the text shadow */
    text-shadow: 1px 1px 1px #000;
    /* use the following rule to not use a text shadow at all */
    /*text-shadow: none;*/
    
    /* this is needed for changing the vertical position */
    top: 48px;
}

/* this is for the navigation under the header */
#container #lower-nav {
    /*
     * this is the regular styling using a gradient color fill
     * and a flat color as a fallback for browsers that do not support gradients.
     */
    background-color: #6c767d;
    background-image: -moz-linear-gradient(top, #768088, #5e676d);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#768088), to(#5e676d));
    background-image: -webkit-linear-gradient(top, #768088, #5e676d);
    background-image: -o-linear-gradient(top, #768088, #5e676d);
    background-image: linear-gradient(to bottom, #768088, #5e676d);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff768088', endColorstr='#ff5e676d', GradientType=0);
    
    /*
     * also, some borders are defined.
     */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

/* this is for certain css styled buttons. in order to style buttons of other classes, please use the appropriate selector */
.action.btn {
    /*
     * this is the regular styling using a gradient color fill
     * and a flat color as a fallback for browsers that do not support gradients.
     */
    background-color: #e3c55f;
    background-image: -moz-linear-gradient(top, #e7d184, #ddb428);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e7d184), to(#ddb428));
    background-image: -webkit-linear-gradient(top, #e7d184, #ddb428);
    background-image: -o-linear-gradient(top, #e7d184, #ddb428);
    background-image: linear-gradient(to bottom, #e7d184, #ddb428);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe7d184', endColorstr='#ffddb428', GradientType=0);
    
    /* darken ie7 buttons so they stand out more given they won't have borders */
    *background-color: #ddb428;
  
    /* set the text color */
    color: #fff;
    
    /* set the border colors */
    border-color: #caa93b #caa93b #a58a2d #caa93b;
    
    /* set the box shadow */
    box-shadow: 0 3px 0 #999;
}

/* this is for the hover state of this button class */
.action.btn:hover {
    /* set the text color */
    color: #fff;
    
    /* give the hover state a flat background color*/
    background-color: #ddb428;
    
    /* darken ie7 buttons so they stand out more given they won't have borders */
    *background-color: #cba420;
}

/* this is for the icon within buttons of this class */
.action.btn .btn-left {
    /*
     * gradient fill + fallback just like above
     */
    background-color: #b49323;
    background-image: -moz-linear-gradient(top, #c5a126, #9b7e1e);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c5a126), to(#9b7e1e));
    background-image: -webkit-linear-gradient(top, #c5a126, #9b7e1e);
    background-image: -o-linear-gradient(top, #c5a126, #9b7e1e);
    background-image: linear-gradient(to bottom, #c5a126, #9b7e1e);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc5a126', endColorstr='#ff9b7e1e', GradientType=0);
    
    /* set the border colors */
    border-color: #9b7e1e #9b7e1e #5a4a12;
    
    /* darken ie7 buttons so they stand out more given they won't have borders */
    *background-color: #9b7e1e;
}

/* this is for the search results of type X509 */
.result-container.resultX509 div.upperpart {
    /*
     * gradient fill + fallback just like above
     */
    background-color: #fbfbfb;
    background-image: -moz-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#fbfbfb));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: -o-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: linear-gradient(to bottom, #fbfbfb, #fbfbfb);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbfbfb', endColorstr='#fffbfbfb', GradientType=0);
}

/* this is for the search results of type PGP */
.result-container.resultPgp div.upperpart {
    /* pgp search results can be styled differently */
    
    /*
     * gradient fill + fallback just like above
     */
    background-color: #fbfbfb;
    background-image: -moz-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#fbfbfb));
    background-image: -webkit-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: -o-linear-gradient(top, #fbfbfb, #fbfbfb);
    background-image: linear-gradient(to bottom, #fbfbfb, #fbfbfb);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbfbfb', endColorstr='#fffbfbfb', GradientType=0);
}

/* this is for any search results header */
div.upperpart h4 {
    /*
     * depending on the background color of the upperpart element
     * the text color of the h4 element might have to be adjusted 
     * higher contrast and better readability
     */
     color: #000;
}

/* the following rules are needed to style the upload form element */
div.uploader {
    width: 100%;
}

div.uploader input {
    width: 100%;
    z-index: 99;
}

div.uploader span.filename {
    left: 0;
    position: absolute;
    right: 95px;
    width: auto;
}

div.uploader span.action {
    background-color: #e8e8e8;
    float: right;
    margin-right: 0;
    width: 95px;
}

/*
 * remove the rounded corners if the display width is below 1024px
 */
@media (max-width: 1024px) {
    #container #head {
        border-radius: 0;
    }
}

/*
 * special rule for mobile displays
 */
@media (max-width: 480px) {
    /*
     * depending on the logo width, the image might have to be scaled smaller
     * in order to not overlap with the language-switcher
     */
    #container #head img {
        max-width: 80%;
    }
    
    /* make it fit */
    .tab-content p {
        width: 260px;
    }
    
    /* modal dialogs have to have a reduced height */
    .modal-body {
        max-height: 240px;
    }
}