/*

    Created on : Feb 17, 2016, 2:19:39 PM
    Author     : nlindhorst

*/

/* SCREENS */
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;


/* COLORS */
@ptx-very-light-gray: #999;
@ptx-light-gray: #b8b8b8;
@ptx-dark-gray: #666;
@ptx-teaser-gray: #333;
@ptx-group-header-color: #fff;
@ptx-white: #fff;
@ptx-orange: #f2981a;
@ptx-header-background: #073b53 ;

@pls-dark-blue: #073b53;

/* FONTS */
@font-open-sans: 'Open Sans Condensed', sans-serif;
@font-lucida-sans: "Lucida Sans Regular", "Loma", sans-serif;
@font-open-sans-regular: 'Open Sans', sans-serif;

/* FUNCTIONS */
.transition-properties(...) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
.transform-properties(...) {
    transform: @arguments;
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -ms-transform: @arguments;
    -o-transform: @arguments;
}
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

body {
    font-family: @font-open-sans-regular;
}

header {
    width: 100%;
    padding-bottom: 10px;
    background: @ptx-header-background;
}
header > #ptx-group-header > .ptx-group-container-outer {
    float: left;
    background: @ptx-dark-gray;
}
header > #ptx-group-header > .ptx-group-container-outer > .ptx-group-container-inner {
    font-family: @font-lucida-sans;
    color: @ptx-white;
    font-size: 13px;
    > div {
        height: auto;
        padding-bottom: 10px;
        padding-top: 5px;
    }
}
header > #ptx-group-header > .ptx-group-container-outer > .ptx-group-container-inner > div > div {
    &:first-child {
        padding-top: 36px;
        padding-left: 0px;
        @media (max-width: @screen-sm-max) {
            padding-top: 5px;
        }
    }
    &:last-child {
        padding-top: 34px;
        padding-right: 0px;
    }
    > p {
        margin-top: 5px;
    }
    @media (max-width: @screen-sm-max) {
        padding: 0px;
    }
} 
header > #ptx-group-header > .ptx-group-button-container {
    background: @ptx-light-gray;
    padding-top: 5px;
    padding-bottom: 5px;
    > button {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        color: @ptx-white;
        font-size: 16px;
        font-weight: bold;
        > span.glyphicon-menu-up {
            top: 4px;
        }
        > span.glyphicon-menu-down {
            top: 3px;
        }
        @media (max-width: @screen-sm-max) {
            font-size: 22px;
        }
    }
    > a > img {
        width: 15px;
        @media (max-width: @screen-sm-max) {
            width: 20px;
            margin-top: 6px;
        }
    }
}
header > nav {
    width: 100%;
    padding: 10px 0;
    font-family: @font-open-sans;
    &.affix {
        z-index: 99999;
        top: 0;
        background: @ptx-header-background;
        padding-top: 10px;
        margin-top: 0;
        box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);  
    }
}
header > nav > div#main-navigation-container {
    float: left;
    @media (max-width: @screen-sm-max) {
        width: 100%;
        &.collapse.in,&.collapse.collapsing {
            height: auto !important;
        }
    }
    @media (min-width: @screen-md-min) {
        height: auto !important;
        display: block;
    }
    
}
header > nav > div > ul#main-navigation {
    padding: 0;
    margin-bottom: 0px;
    margin-top: 60px;
    @media (max-width: @screen-sm-max) {
        width: 100%;
        background: @ptx-light-gray;
        padding: 20px;
        margin-top: 20px;
    }
}
header > nav > div > ul#main-navigation > li {
    list-style-type: none;
    display: inline-block;
    padding: 5px;
    @media (min-width: @screen-sm-max) {
        &:first-child {
            padding-left: 0;
        }
    }
    @media (max-width: @screen-sm-max) {
        display: block;
    }
}
header > nav > div > ul#main-navigation > li > a {
    text-transform: uppercase;
    color: @ptx-white;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 23px;
    &:hover {
        text-decoration:underline;
    }
    @media (max-width: @screen-sm-max) {
        color: @ptx-teaser-gray;
        span.glyphicon.menu.orange {
            display: none;
        }
    }
}
img.ptx-logo {
    width: 150px;
}
button.menu-collapse {
    margin: 0;
    padding: 4px 8px 0px 8px;
    border: none;
    outline: none;
    background: @ptx-dark-gray;
    color: @ptx-white;
    font-size: 24px;
    .transition-properties(width 1s, height 1s, background-color 1s, transform 1s;);
}
section {
    font-family: @font-open-sans-regular;
    line-height: 30px;
    font-size: 20px;
    color: @ptx-teaser-gray;
    margin-top: 40px;
    &.ontop {
        margin-top: 0px;
    }
    &:first-child {
        margin-top: 100px;
        @media (max-width: @screen-sm-max) {
            margin-top: 20px;
        }
    }
    h1 {
        line-height: 40px;
        color: @ptx-teaser-gray;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 40px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 30px;
        @media (min-width: @screen-lg-min) {
            text-indent: -25px;
        }
    }
    h2 {
        line-height: 35px;
        color: @pls-dark-blue;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 38px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 60px;
        text-align: center;
        @media (min-width: @screen-lg-min) {
            text-indent: -25px;
        }
    }
    h3 {
        line-height: 30px;
        color: @pls-dark-blue;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }
    h4 {
        //line-height: 26px;
        color: @ptx-dark-gray;
        text-transform: uppercase;
        font-family: @font-open-sans;
        font-size: 22px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 5px;
        
    }
    img {
        width: auto;
        margin: auto;
    }
    img.wide {
        margin: 0 auto;
        position: relative;
        display: inherit;
    width: 100%;
    }
    h1,h2,h3,h4,h5,h6 {
        a {
            color: inherit;
            text-decoration: none;
            &:hover, &:focus {
                color: inherit;
                text-decoration: none;
            }
        }
    }
    &.teaser-unit {
        h1 {
            > span.orange {
                color: @ptx-orange;
                @media (max-width: @screen-sm-max) {
                    line-height: 40px;
                }
            }
        }
    }
    &.submenu {
        margin-top: 80px;
        > hr.submenu-line {
            border-top: 1px solid @ptx-light-gray;
            @media (max-width: @screen-sm-max) {
                display: none;
            }
        }
        
        > div > div.submenu-buttons {
            width: auto;
            text-align: center;
            > a {
                display: inline-block;
                position: relative;
                top: -38px;
                padding: 3px 20px;
                margin: 0px 10px 10px 0;
                background: @pls-dark-blue;
                color: @ptx-white;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 16px;
                @media (max-width: @screen-xs-max) {
                    top: -38px;
                    font-size: 13px;
                    margin: 0px 2px;
                    padding: 3px 15px;
                    @media (max-width: 400px) {
                        margin: 0px 3px;
                        padding: 3px 10px;
                        @media (max-width: 320px) {
                            padding: 2px 6px;
                        }
                    }
                }
            }
        }
    }
    &.credentials {
        margin-top: 80px;
        > div.credentials-buttons {
            width: auto;
            text-align: center;
            > a {
                display: inline-block;
                position: relative;
                padding: 3px 20px;
                margin: 0px 10px 10px 10px;
                background: @pls-dark-blue;
                color: @ptx-white;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 16px;
                @media (max-width: @screen-xs-max) {
                    width: 100%;
                    margin: 0px 0px 10px 0px;
                    text-align: left;
                    font-size: 15px;
                    line-height: 30px;
                    padding: 3px 10px;
                    box-shadow: 0px 2px 3px 0px #888;
                    > .glyphicon {
                        line-height: inherit;
                    }
                }
            }
        }
    }
    &#credentials {
        span.label {
            line-height: 35px;
        }
        a.title-link {
            > .credential-logo {
                margin-bottom: 10px;
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            &:hover {
                color: @ptx-teaser-gray;
                > .credential-logo {
                    filter: none;
                    -webkit-filter: grayscale(0%);
                }
            }
        }
    }
    &.portfolio {
        .row {
            div {
                a img {
                    margin-bottom: 10px;
                }
            }
        }
        .portfolio-collapse {
            padding-top: 15px;
        }
        > div.portfolio-button {
            width: auto;
            text-align: center;
            > button {
                display: inline-block;
                position: relative;
                background: #fff;
                outline: none;
                border: none;
                padding: 5px;
                font-weight: bold;
                font-size: 26px;
                z-index: 99999;
                top: -40px;
            }
        }
        & > hr {
            border-width: 2px;
        }
    }
}
.carousel.slide {
    .carousel-control.left, .carousel-control.right {
        background-image: none;
        .glyphicon-chevron-left,.glyphicon-chevron-right {
            color: @ptx-light-gray;
            font-size: 60px;
        }
    }
}
.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
    @media (max-width: @screen-md-max) {
        padding-left: 20px;
        padding-right: 20px;
    }
}


.to-top-container {
    background: @ptx-light-gray;
    height: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 100px;
    > button.to-top-button {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        color: @ptx-white;
        font-size: 16px;
        font-weight: bold;
        > span.glyphicon-menu-up {
            top: 0px;
            @media (max-width: @screen-sm-max) {
                top: -4px;
            }
        }
        @media (max-width: @screen-sm-max) {
            font-size: 22px;
        }
    }
}

footer {
    background: #ccc;
    font-family: Myriad Pro,'PT Sans Narrow', sans-serif;
    padding-top: 15px;
    padding-bottom: 30px;
}

#footer-navigation {
    margin-top: 10px;
    > div.row {
        margin: 0;
        padding: 0;
        > div {
            list-style-type: none;
            max-width: 207px;
            padding: 0 20px;
            /*
            &:last-child {
                padding-right: 0px;
            }
            &:first-child {
                padding-left: 0px;
            }
            */
            > a.topic {
                text-transform: uppercase;
                font-size: 18px;
                text-decoration: none;
                color: @ptx-teaser-gray;
                white-space: nowrap;
            }
            > ul {
                margin: 5px 0px 10px;
                padding: 0;
                > li {
                    list-style-type: none;
                    > a {
                        text-transform: uppercase;
                        font-size: 13px;
                        text-decoration: none;
                        color: @ptx-teaser-gray;
                        line-height: 14px;
                        padding: 7px 0 3px;
                        display: inline-block;
                    }
                    > ul.footer-sub-menu {
                        margin-left: 5px;
                        > li {
                            list-style-type: none;
                            > a {
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
span.glyphicon {
    &.orange.menu {
        color: @ptx-light-gray;
        font-stretch: -50px;
    }
}
a {
    color: @ptx-orange;
    text-decoration: none;
    &#fixed-contact-link {
        color: @ptx-white;
        position: fixed;
        right: 30px;
        padding: 10px;
        top: 50%;
        text-transform: uppercase;
        border: 2px solid @ptx-orange;
        font-size: 20px;
        z-index: 9999;
        background: @ptx-orange;
        @media (max-width: @screen-sm-max) {
            right: 0px;
        }
        &:hover {
            text-decoration: none;
            background: @ptx-white;
            color: @ptx-orange;
        }
    }
}
a:hover,
a:focus {
    color: @ptx-orange;
    text-decoration: underline;
    h1,h2,h3,h4,h5,h6 {
        text-decoration: none;
    }
}
a:focus {
    outline: none;
}
img {
    width: inherit;
    max-width: 100%;
    height: auto;
    &.float-image {
        &.pull-left {
            margin-right: 10px;
        }
        &.pull-right {
            margin-left: 10px;
        }
    }
    + div.clearfix {
        @media (max-width: @screen-sm-max) {
            + p {
                margin-top: 10px;
            }
        }
        @media (min-width: @screen-md-min) {
            display: none;
        }
    }
}
hr {
    border-top: 1px solid @ptx-light-gray;
    &.gray {
        border-color: @ptx-light-gray;
    }
    &.black {
        border-color: @ptx-teaser-gray;
    }
    &.bold {
        border-width: 3px;
    }
}
.rotate {
    .transform-properties(rotate(90deg););
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}