@CHARSET "UTF-8"; @import "position.css"; @import "colours.css"; @import "elementsPositioning.css"; @import "logo.css"; @import "menu.css"; /* HIDE MENU TIPS N MORE > LINKS */ #menu h2.links,#menu h2.links ~p, /* HIDE CASE STUDIES */ #menu h2.case-studies + p,#menu h2.case-studies + p + p, .search > input{display:none !important;} /* GENERAL STYLES */ /*.alert,.comment{color:red !important;}*/ .alert { display:block; clear:both; padding:1em; font-size:2em; color:#006e67; } ::selection{color:#006e67;background-color:rgba(0,110,103,0.125);} ::-moz-selection{color:#006e67;background-color:rgba(0,110,103,0.125);} a::selection{color:#029feb;} a::-moz-selection{color:#029feb;} #header,#footer { -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; } /* LINK INSIDE PAGES */ #pages a { color:#006e67; text-decoration:underline; cursor:pointer; } #pages a:hover { color:#0d9e95; } #pages a:active { color:#0063fe; } /* TEXT ALIGNMENT*/ .justify{text-align:justify !important;} h1,h2,h3, .left{text-align:left;} .LEFT, li{text-align:left !important;} #pages .toc, #quickcontact h2, .center { text-align:center !important; } .right{text-align:right !important;} /* IMAGES FRAMED */ #pages .content > .img { height:12em; } #pages .img.About-Us { background:url('medias/images/Main page/About-Us.jpg') center 5% no-repeat; } #pages .img.Data-Destruction { background:url('medias/images/Main page/Data-Destruction.jpg') center -5px no-repeat; background-size:800px auto; height:247px; } #pages .title > .floatRight, #pages .content > .floatRight { width:auto; max-width:275px; height:auto; max-height:100%; margin:0 1em; } #videosBox > iframe { width:286px; height:161px; } /* COLUMNS NOT YET IN CSS 3 FOR OBVIOUS REASONS */ #pages .content.c2 > *{display:inline-block;} #pages .content.c2 > * + *{float:left;} /* TABLES */ .table{display:table;position:relative;} .toc > label, .itable{display:inline-table;} .headerGroup{display:table-header-group;} .footerGroup{display:table-footer-group;} .tableCaption{display:table-caption;caption-side:bottom;} .tableTCaption{display:table-caption;caption-side:top;} .table > .header{display:table-caption;position:absolute;left:0;right:0;padding:0.25em 0.5em;} .table > .header ~ .row > .end{padding: 0 !important;width:1%;max-width:1px;overflow:hidden;} .table > .header + .row > .end > div{width: 10000%;margin:0;padding: 0.25em 4.75em 0.25em 0.5em;float:left;display:inline;} #cart .item, .row{display:table-row;} .rowGroup{display:table-row-group;} .column{display:table-column;} .columnGroup{display:table-column-group;} /* TABLE CELL */ .toc > label > *, .table > .row > *, #cart .item > div, .cell{display:table-cell;vertical-align:top;} .w100{width:100%;} .w50, .table.c2 > .row > .cell{width:50%;} .w47{width:47%;} .w33, .table.c3 > .row > .cell{width:33%;} .w25, .table.c4 > .row > .cell{width:25%;} .w20, .table.c5 > .row > .cell{width:20%;} .w16, .table.c6 > .row > .cell{width:16%;} /* ALTERNATIVE COLORS */ #pages .table > .alt:nth-child(odd){background:#f9ffff;} #pages .table > .alt:nth-child(even){background:#fefefe;} /* PSEUDO TABLE => IMAGES ALIGNMENT */ .tb150.row4 { min-width:648px; /* 150*4 +=(1.5*4)*4*2 */ max-width: 700px;/* ~= 1024-321 */ display:inline-block; } .row4 > * { width: 22%; padding:1%; display: inline-block; } .tb150 > * > img { max-width:150px; height:auto; } /* VERTICAL ALIGNMENT */ .top{vertical-align:top !important;} .toc > label, .toc > label > *, .middle, .middle *, #view .cell, #pages .products {vertical-align:middle !important;} .bottom{vertical-align:bottom !important;} /* DISPLAY */ #pages .toc, .clear{clear: both !important; float: none !important; display: block !important;} #pages .toc ~ .collapsable, .none{display:none;} .NONE{display:none !important;} .block{display:block !important;} /* GUI IMAGES */ .vcard { display:inline-block; background:url('../img/icones/vcard.png') no-repeat center center; background-size:contain; min-height:24px; max-height:32px !important; min-width:24px; max-width:32px !important; } .formCaption { font-style:italic; font-size:0.85em; text-align:left; } /* COLORS */ .greenStreffGradient{background:linear-gradient(to bottom,#0d9e95 0%,#006e67 100%)#006e67;} .grayGradient{background:linear-gradient(to bottom, #fefefe 0%, #e1e2e2 100%)#f5f5f5;} .grayerGradient{background:linear-gradient(to bottom, #e1e2e2 0%, #c4c5c5 100%)#e1e2e2;} /* TABLE OF CONTENT : ACCORDION CSS ONLY */ #pages div .hidden[id$="-a"]:checked ~ .toc label[for$="-a"], #pages div .hidden[id$="-b"]:checked ~ .toc label[for$="-b"], #pages div .hidden[id$="-c"]:checked ~ .toc label[for$="-c"], #pages div .hidden[id$="-d"]:checked ~ .toc label[for$="-d"], #pages div .hidden[id$="-e"]:checked ~ .toc label[for$="-e"], #pages div .hidden[id$="-f"]:checked ~ .toc label[for$="-f"], #pages div .hidden[id$="-g"]:checked ~ .toc label[for$="-g"], #pages div .hidden[id$="-h"]:checked ~ .toc label[for$="-h"], #pages div .hidden[id$="-i"]:checked ~ .toc label[for$="-i"], #pages div .hidden[id$="-j"]:checked ~ .toc label[for$="-j"], #pages div .hidden[id$="-k"]:checked ~ .toc label[for$="-k"], #pages div .hidden[id$="-l"]:checked ~ .toc label[for$="-l"], #pages div .hidden[id$="-m"]:checked ~ .toc label[for$="-m"], #pages div .hidden[id$="-n"]:checked ~ .toc label[for$="-n"], #pages div .hidden[id$="-o"]:checked ~ .toc label[for$="-o"], #pages div .hidden[id$="-p"]:checked ~ .toc label[for$="-p"], #pages div .hidden[id$="-q"]:checked ~ .toc label[for$="-q"], #pages div .hidden[id$="-r"]:checked ~ .toc label[for$="-r"], #pages div .hidden[id$="-s"]:checked ~ .toc label[for$="-s"], #pages div .hidden[id$="-t"]:checked ~ .toc label[for$="-t"], #pages div .hidden[id$="-u"]:checked ~ .toc label[for$="-u"], #pages div .hidden[id$="-v"]:checked ~ .toc label[for$="-v"], #pages div .hidden[id$="-w"]:checked ~ .toc label[for$="-w"], #pages div .hidden[id$="-x"]:checked ~ .toc label[for$="-x"], #pages div .hidden[id$="-y"]:checked ~ .toc label[for$="-a"], #pages div .hidden[id$="-z"]:checked ~ .toc label[for$="-z"], /* PAGES TABLE HEADER */ #pages .table > .row.title, #pages .table > .header { background:linear-gradient(to bottom,#0d9e95 0%,#006e67 100%)#006e67; color:#fff; } /* TO 100px MAX */ #pages table > thead { background:linear-gradient(to bottom,#0d9e95 0px,#006e67 100px)#006e67; color:#fff; } /* PAGES TABLE OF CONTENT BUTTONS */ #pages div .hidden[id$="-a"]:checked ~ .toc label[for$="-a"] > *, #pages div .hidden[id$="-b"]:checked ~ .toc label[for$="-b"] > *, #pages div .hidden[id$="-c"]:checked ~ .toc label[for$="-c"] > *, #pages div .hidden[id$="-d"]:checked ~ .toc label[for$="-d"] > *, #pages div .hidden[id$="-e"]:checked ~ .toc label[for$="-e"] > *, #pages div .hidden[id$="-f"]:checked ~ .toc label[for$="-f"] > *, #pages div .hidden[id$="-g"]:checked ~ .toc label[for$="-g"] > *, #pages div .hidden[id$="-h"]:checked ~ .toc label[for$="-h"] > *, #pages div .hidden[id$="-i"]:checked ~ .toc label[for$="-i"] > *, #pages div .hidden[id$="-j"]:checked ~ .toc label[for$="-j"] > *, #pages div .hidden[id$="-k"]:checked ~ .toc label[for$="-k"] > *, #pages div .hidden[id$="-l"]:checked ~ .toc label[for$="-l"] > *, #pages div .hidden[id$="-m"]:checked ~ .toc label[for$="-m"] > *, #pages div .hidden[id$="-n"]:checked ~ .toc label[for$="-n"] > *, #pages div .hidden[id$="-o"]:checked ~ .toc label[for$="-o"] > *, #pages div .hidden[id$="-p"]:checked ~ .toc label[for$="-p"] > *, #pages div .hidden[id$="-q"]:checked ~ .toc label[for$="-q"] > *, #pages div .hidden[id$="-r"]:checked ~ .toc label[for$="-r"] > *, #pages div .hidden[id$="-s"]:checked ~ .toc label[for$="-s"] > *, #pages div .hidden[id$="-t"]:checked ~ .toc label[for$="-t"] > *, #pages div .hidden[id$="-u"]:checked ~ .toc label[for$="-u"] > *, #pages div .hidden[id$="-v"]:checked ~ .toc label[for$="-v"] > *, #pages div .hidden[id$="-w"]:checked ~ .toc label[for$="-w"] > *, #pages div .hidden[id$="-x"]:checked ~ .toc label[for$="-x"] > *, #pages div .hidden[id$="-y"]:checked ~ .toc label[for$="-a"] > *, #pages div .hidden[id$="-z"]:checked ~ .toc label[for$="-z"] > * { color:#fff; text-shadow:0 0 0.25em #fff; } #pages .content .toc > label { padding:0.25em 0.5em; margin:0.25em; height:2em; width:8em; background:linear-gradient(to bottom, #fefefe 0%, #e1e2e2 100%)#f5f5f5; border:1px solid #eee; border-radius:1em; cursor:pointer; } #pages .content .toc > label:hover { border:1px solid #006e67; background:linear-gradient(to bottom, #e1e2e2 0%, #c4c5c5 100%)#e1e2e2; } .toc > label > *, .toc > label:hover > *, #pages .table > .row > a.cell.title { text-decoration: none !important; color:#006e67; border:none; } #pages .content .toc > label:active { background: linear-gradient(to bottom, #a2b0c8 0%, #8297b6 100%)#a2b0c8; } #pages .content .toc > label:active, .toc > label:active > * { text-decoration: none; color:#fff; text-shadow:0 0 0.25em #fff; } #pages div .hidden[id$="-a"]:checked ~ .collapsable[name$="-a"], #pages div .hidden[id$="-b"]:checked ~ .collapsable[name$="-b"], #pages div .hidden[id$="-c"]:checked ~ .collapsable[name$="-c"], #pages div .hidden[id$="-d"]:checked ~ .collapsable[name$="-d"], #pages div .hidden[id$="-e"]:checked ~ .collapsable[name$="-e"], #pages div .hidden[id$="-f"]:checked ~ .collapsable[name$="-f"], #pages div .hidden[id$="-g"]:checked ~ .collapsable[name$="-g"], #pages div .hidden[id$="-h"]:checked ~ .collapsable[name$="-h"], #pages div .hidden[id$="-i"]:checked ~ .collapsable[name$="-i"], #pages div .hidden[id$="-j"]:checked ~ .collapsable[name$="-j"], #pages div .hidden[id$="-k"]:checked ~ .collapsable[name$="-k"], #pages div .hidden[id$="-l"]:checked ~ .collapsable[name$="-l"], #pages div .hidden[id$="-m"]:checked ~ .collapsable[name$="-m"], #pages div .hidden[id$="-n"]:checked ~ .collapsable[name$="-n"], #pages div .hidden[id$="-o"]:checked ~ .collapsable[name$="-o"], #pages div .hidden[id$="-p"]:checked ~ .collapsable[name$="-p"], #pages div .hidden[id$="-q"]:checked ~ .collapsable[name$="-q"], #pages div .hidden[id$="-r"]:checked ~ .collapsable[name$="-r"], #pages div .hidden[id$="-s"]:checked ~ .collapsable[name$="-s"], #pages div .hidden[id$="-t"]:checked ~ .collapsable[name$="-t"], #pages div .hidden[id$="-u"]:checked ~ .collapsable[name$="-u"], #pages div .hidden[id$="-v"]:checked ~ .collapsable[name$="-v"], #pages div .hidden[id$="-w"]:checked ~ .collapsable[name$="-w"], #pages div .hidden[id$="-x"]:checked ~ .collapsable[name$="-x"], #pages div .hidden[id$="-y"]:checked ~ .collapsable[name$="-y"], #pages div .hidden[id$="-z"]:checked ~ .collapsable[name$="-z"] {display:block;} #pages .products, #pages .content .table{width:100%;} #pages .products{font-size:0.8em;border:1px solid #ccc;} #pages .table > .row > *{padding-top: 1.25em; vertical-align: top !important; text-align: justify;} #pages .table > .row.border + .row.border > *{border-top:1px solid #eee;} /* #pages .table > .row.border > :first-child{border-left:1px solid #eee;} #pages .table > .row.border > :last-child{border-right:1px solid #eee;} */ #pages .table > .row > .logo{vertical-align:middle !important;} #pages .table > .row > .title, #pages .table > .row > .logo{text-align:center;} #pages .table > .row > :not(:last-of-type){padding-right:1em;} #pages .table > .row > .logo > img { padding:2em; border:1px solid #006e67; border-radius:2em; width:64px; height:auto; } #pages .products .img > img { width:50px; height:50px; margin:0.25em !important; } /* resizing of photos on products */ #pages .products .containerimg { position: relative; width:50px; height:auto; margin:0.25em !important; } #pages .products .imgclip > img { width:50px; height:auto; margin:0.25em !important; clip: rect(0px,25px,140px,0px); position: absolute; } #pages .dimensions{min-width:10em;} #cart > label, #pages .table > .row.title { font-size:1.125em; font-weight:bold; } #cart > label{display:table-caption;} #pages .table > .row > .title { font-size:1.5em; font-weight:bold; } #pages .table > .row > div > .title { font-size:1.125em; font-weight:bold; } #pages .table > .row > .avatar{width:64px;} #pages .table > .row > a, #pages .table > .row > a:hover, #pages .table > .row > a:active, #pages .table > .row > a:visited { color:#000; text-decoration:none; } #pages .table > .row > .dimensions >div > span{display:inline-block;min-width:4.5em;} #pages table{border:none;border-collapse:collapse;position:relative;width:100%;} #pages table td{z-index:1;position:relative;} #pages table thead tr td{background:transparent;border:none;} #pages table thead tr ~ tr td, #pages table tbody tr td {font-size:0.875em;} #pages table tbody tr td{background:#fff;border:1px solid #eee;} #pages .table .row div > input[type="number"], #pages table tr td > input[type="number"] { font-size:1.25em; width:5em; height:1.5em; text-align:right; } #quickcontact #cart{display:none;} #quickcontact.cart #cart{width:100%;display:inline-table;} #cart > label { color:#006e67; border-bottom:1px solid #006e67; padding-left:1em; } #cart > .hint{text-align:left;} #cart .item > div { border-bottom:1px dashed #999; font-size:0.75em; } #cart > .item{display:none;} #cart > input:checked ~ .item{display:table-row;} #cart > input + label{background:url('../img/gui/arrows/disclosure_closed.png') left center no-repeat;} #cart > input:checked + label{background:url('../img/gui/arrows/disclosure_open.png') left center no-repeat;} #cart > input + label:active{background:url('../img/gui/arrows/disclosure_active.png') left center no-repeat;} #cart > input[disabled] + label{background:url('../img/gui/arrows/disclosure_disabled.png') left center no-repeat;} .box-content { display:inline-table; text-align:center; width:160px; height:160px; } .box-content > a { display:table-row; } /* Below inser by JOHAN for the blog */ .borderline_blog { border:solid; border-color:#EBFFEB; border-width:0,5em; padding:5px; } /* TOGGLABLES ELEMENTS (BLOG) */ div.togglable > p, div.togglable > label, div.togglable > input[type=checkbox]:checked ~ p > label /*