Difference between revisions of "Template:Edinburgh software"

Line 1: Line 1:
−
<html>
+
html>
−
 
+
gh
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
−
 
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear
  
Line 28: Line 27:
 
height: 100%;
 
height: 100%;
 
border: 0px;
 
border: 0px;
−
background-color: #000;
+
background-color: #fff;
 
margin: 0px;
 
margin: 0px;
 
padding: 0px;
 
padding: 0px;
Line 38: Line 37:
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
−
margin-left: auto;
+
margin-left: none;
−
margin-right: auto;
+
margin-right: none;
−
background-color: #000;
+
background-color: #fff;
 +
                        border: none;
 
padding: 0px;
 
padding: 0px;
 
font-size: 100%;
 
font-size: 100%;
Line 53: Line 53:
 
         margin: 0px;
 
         margin: 0px;
 
         padding: 0px;
 
         padding: 0px;
−
         background-color: #000;
+
         background-color: #fff;
 
         -webkit-background-size: cover;
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -moz-background-size: cover;
 
         -o-background-size: cover;
 
         -o-background-size: cover;
 
         background-size: cover;
 
         background-size: cover;
−
}
 
−
 
−
 
−
body {
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
−
    color: #fff;
 
−
    background-color: #000;
 
−
}
 
−
 
−
html {
 
−
    width: 100%;
 
−
    height: 100%;
 
−
}
 
−
 
−
h1,
 
−
h2,
 
−
h3,
 
−
h4,
 
−
h5,
 
−
h6 {
 
−
    margin: none;
 
−
    text-transform: uppercase;
 
−
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
−
    font-weight: 700;
 
−
    letter-spacing: 1px;
 
−
border-bottom: none;
 
−
 
−
 
 
}
 
}
  
Line 96: Line 66:
 
}
 
}
  
−
@media(min-width:768px) {
+
 
−
    p {
+
−
        margin: 0 0 35px;
+
−
        font-size: 20px;
+
−
        line-height: 1.6;
+
−
    }
+
−
}
+
  
  
Line 108: Line 72:
 
     display: table;
 
     display: table;
 
     width: 100%;
 
     width: 100%;
−
     height: 100%;
+
     height: 100;
 
     text-align: center;
 
     text-align: center;
 
     color: #fff;
 
     color: #fff;
−
     background-color: #000;
+
     background-color: #fff;
−
     background: url("https://static.igem.org/mediawiki/2015/3/3b/Edigem15_software_pentlands.jpeg") no-repeat bottom center scroll;  
+
     background: url("https://static.igem.org/mediawiki/2015/7/78/Edigem15_Design_tower.jpeg") no-repeat bottom center scroll;  
 
     -webkit-background-size: cover;
 
     -webkit-background-size: cover;
 
     -moz-background-size: cover;
 
     -moz-background-size: cover;
Line 141: Line 105:
 
         height: 100%;
 
         height: 100%;
 
         padding: 0;
 
         padding: 0;
−
         box-shadow: 0 -100px 100px #000 inset;
+
         box-shadow: 0 -100px 100px #fff inset;
 
     }
 
     }
  
Line 153: Line 117:
 
}
 
}
  
 +
body {
 +
    width: 100%;
 +
    height: 100%;
 +
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    color: #fff;
 +
    background-color: #000;
 +
}
 +
 +
html {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    margin: none;
 +
    text-transform: uppercase;
 +
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-weight: 700;
 +
    letter-spacing: 1px;
 +
border-bottom: none;
 +
 +
 +
}
 
.arrowtext
 
.arrowtext
 
{
 
{
Line 166: Line 158:
 
}
 
}
  
−
/*foreword*/
 
  
 +
/*COMPONENTS*/
  
−
header .intro-text {
+
*,
−
    padding-top: 50px;
+
*:after,
−
    padding-bottom: 50px;
+
*::before {
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 
}
 
}
  
−
header .intro-text .intro-lead-in {
+
/* General styles and layout */
−
    margin-bottom: 25px;
+
−
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
+
−
    font-size: 22px;
+
−
    line-height: 22px;
+
−
text-color: #fff;
+
  
 +
 +
 +
.container {
 +
overflow: hidden;
 +
/* we don't want the pseudo-elements sticking out */
 
}
 
}
  
−
header .intro-text .intro-heading {
+
.container svg {
−
    margin-bottom: 25px;
+
display: block;
−
    text-transform: uppercase;
+
−
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
−
    font-size: 50px;
+
−
    font-weight: 700;
+
−
    line-height: 50px;
+
 
}
 
}
  
−
@media(min-width:768px) {
+
section {
−
    header .intro-text {
+
        width: 100%;
−
        padding-top: 50px;
+
position: relative;
−
        padding-bottom: 100px;
+
padding: 10em 10%;
−
    }
+
background: #fff;
 +
color: #740404;
 +
text-align: center;
 +
}
  
−
    header .intro-text .intro-lead-in {
+
section h2 {
−
         margin-bottom: 25px;
+
         color: #740404;
−
        font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
+
margin: 0;
−
        font-size: 40px;
+
padding: 0;
−
        line-height: 40px;
+
font-size: 2.8em;
−
    }
+
font-weight: 400;
 +
}
  
−
    header .intro-text .intro-heading {
+
section p {
−
        margin-bottom: 50px;
+
color: #740404;
−
        text-transform: uppercase;
+
font-size: 1.3em;
−
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+
line-height: 1.5;
−
        font-size: 75px;
+
         text-align: justify;
−
        font-weight: 700;
+
−
         line-height: 75px;
+
−
    }
+
 
}
 
}
  
 +
.text:first-child {
 +
text-align: right;
 +
}
  
−
section {
+
.text:nth-child(2) {
−
    padding: 0;
+
text-align: left;
 
}
 
}
  
−
section h2.section-heading
+
.col-2 .column {
−
{
+
width: 49%;
−
    margin-top: 0;
+
}
−
    margin-bottom: 15px;
+
−
    font-size: 40px;
+
−
    color: white;
+
−
border-bottom: none;
+
  
 +
.col-3 .column {
 +
padding: 0 1%;
 +
width: 33%;
 +
text-align: center;
 +
}
  
 +
.col-3 .column p {
 +
padding: 1.4em;
 
}
 
}
  
−
section h3.section-subheading {
+
.column {
−
    margin-bottom: 75px;
+
display: inline-block;
−
    text-transform: none;
+
vertical-align: top;
−
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
+
−
    font-size: 16px;
+
−
    font-weight: 400;
+
 
}
 
}
  
−
@media(min-width:768px) {
+
.icon {
−
    section {
+
display: block;
−
        padding: 10px 0;
+
width: 2em;
−
    }
+
height: 2em;
 +
border-radius: 50%;
 +
background: rgba(0,0,0,0.1);
 +
color: #fff;
 +
text-align: center;
 +
font-size: 8em;
 +
line-height: 2em;
 +
margin: 0 auto;
 
}
 
}
  
−
.service-heading {
+
section.color h2 {
−
    margin: 15px 0;
+
color: #fff;
−
    text-transform: none;
+
 
}
 
}
  
 +
section.color p {
 +
color: #fff;
 +
}
  
−
/*timeline */
+
.color {
 +
background: #000;
 +
}
 +
 
 +
/*** Individual section styles and separators ***/
  
−
.timeline {
+
/* Common style for pseudo-elements */
−
    position: relative;
+
section::before,
−
    padding:4px 0 0 0;
+
section::after {
−
    margin-top:22px;
+
position: absolute;
−
    list-style: none;
+
content: '';
 +
pointer-events: none;
 
}
 
}
  
−
.timeline>li:nth-child(even) {
+
/* Triangles */
−
    position: relative;
+
.ss-style-triangles::before,
−
    margin-bottom: 50px;
+
.ss-style-triangles::after {
−
    height: 180px;
+
left: 50%;
−
    right:-100px;
+
width: 100px;
 +
height: 100px;
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 
}
 
}
  
−
.timeline>li:nth-child(odd) {
+
.ss-style-triangles::before {
−
    position: relative;
+
top: -50px;
−
    margin-bottom: 50px;
+
background: #2980b9;
−
    height: 180px;
+
−
    left:-100px;
+
 
}
 
}
  
−
.timeline>li:before,
+
.ss-style-triangles::after {
−
.timeline>li:after {
+
bottom: -50px;
−
    content: " ";
+
z-index: 10;
−
    display: table;
+
background: inherit;
 
}
 
}
  
−
.timeline>li:after {
+
/* Double Diagonal line */
−
    clear: both;
+
 
−
    min-height: 170px;
+
.ss-style-doublediagonal {
 +
z-index: 1;
 +
padding-top: 6em;
 +
/*background: #391919;*/
 
}
 
}
  
−
.timeline > li .timeline-panel {
+
.ss-style-doublediagonal::before,
−
  position: relative;
+
.ss-style-doublediagonal::after {
−
  float: left;
+
top: 0;
−
  width: 41%;
+
left: -25%;
−
  padding: 0 20px 20px 30px;
+
z-index: -1;
−
  text-align: right;
+
width: 100%;
 +
height: 75%;
 +
background: inherit;
 +
-webkit-transform: rotate(-2deg);
 +
transform: rotate(-2deg);
 +
-webkit-transform-origin: 0 0;
 +
transform-origin: 0 0;
 
}
 
}
  
−
.timeline>li .timeline-panel:before {
+
.ss-style-doublediagonal::before {
−
    right: auto;
+
height: 50%;
−
    left: -15px;
+
/*background: #391919;*/
−
    border-right-width: 15px;
+
-webkit-transform: rotate(-3deg);
−
    border-left-width: 0;
+
transform: rotate(-3deg);
 +
-webkit-transform-origin: 3% 0;
 +
transform-origin: 3% 0;
 
}
 
}
  
−
.timeline>li .timeline-panel:after {
+
/* Half Circle */
−
    right: auto;
+
.ss-style-halfcircle::before,
−
    left: -14px;
+
.ss-style-halfcircle::after {
−
    border-right-width: 14px;
+
left: 50%;
−
    border-left-width: 0;
+
z-index: 10;
 +
width: 100px;
 +
height: 100px;
 +
border-radius: 50%;
 +
background: inherit;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 
}
 
}
  
−
.timeline>li .timeline-image {
+
.ss-style-halfcircle::before {
−
    z-index: 100;
+
top: -50px;
−
    position: absolute;
+
−
    left: 50%;
+
−
    border: 7px solid #fff;
+
−
    border-radius: 100%;
+
−
    background-color: #fff;
+
−
    box-shadow: 0 0 5px #fff;
+
−
    width: 200px;
+
−
    height: 200px;
+
−
    margin-left: -100px;
+
 
}
 
}
  
−
.timeline>li .timeline-image h4 {
+
.ss-style-halfcircle::after {
−
    margin-top: 12px;
+
bottom: -50px;
−
    font-size: 10px;
+
−
    line-height: 14px;
+
 
}
 
}
  
−
.timeline>li.timeline-inverted>.timeline-panel {
+
/* Big Triangle */
−
    float: right;
+
svg#bigTriangleColor {
−
    padding: 0 30px 20px 20px;
+
pointer-events: none;
−
    text-align: left;
+
 
}
 
}
  
−
.timeline>li.timeline-inverted>.timeline-panel:before {
+
#bigTriangleColor path {
−
    right: auto;
+
fill: #000;
−
    left: -15px;
+
stroke: #000;
−
    border-right-width: 15px;
+
stroke-width: 2;
−
    border-left-width: 0;
+
 
}
 
}
  
−
.timeline>li.timeline-inverted>.timeline-panel:after {
+
/* Curves */
−
    right: auto;
+
#curveUpColor path,
−
    left: -14px;
+
#curveDownColor path {
−
    border-right-width: 14px;
+
fill: #000;
−
    border-left-width: 0;
+
stroke: #000;
 +
        background-color: #8C001A;
 
}
 
}
  
−
.timeline>li:last-child {
+
/* Multiple Triangles */
−
    margin-bottom: 0;
+
.ss-style-multitriangles::before,
 +
.ss-style-multitriangles::after {
 +
left: 50%;
 +
width: 50px;
 +
height: 50px;
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 
}
 
}
  
−
.timeline .timeline-heading h4 {
+
.ss-style-multitriangles::before {
−
  margin-top:22px;
+
top: -25px;
−
    margin-bottom: 4px;
+
background: inherit;
−
    padding:0;
+
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
−
    color: #b3b3b3;
+
 
}
 
}
  
−
.timeline .timeline-heading h4.subheading {
+
.ss-style-multitriangles::after {
−
  margin:0;
+
bottom: -25px;
−
  padding:0;
+
z-index: 10;
−
    text-transform: none;
+
background: inherit;
−
    font-size:18px;
+
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
−
    color:#333333;
+
 
}
 
}
  
−
.timeline .timeline-body>p,
+
/* Rounded corners */
−
.timeline .timeline-body>ul {
+
.ss-style-roundedcorners::before {
−
    margin-bottom: 0;
+
top: 100%;
−
    color:#fff;
+
left: 0;
 +
z-index: 10;
 +
width: 100%;
 +
height: 60px;
 +
border-radius: 0 0 60px 60px;
 +
background: inherit;
 
}
 
}
−
/*Style for even div.line*/
+
 
−
.timeline>li:nth-child(odd) .line:before {
+
/* Rounded center split and bottom rounded */
−
    content: "";
+
.ss-style-roundedsplit {
−
    position: absolute;
+
padding-top: 7em;
−
    top: 60px;
+
border-radius: 0 0 80px 80px;
−
    bottom: 0;
+
−
    left: 690px;
+
−
    width: 4px;
+
−
    height:340px;
+
−
    background-color: #fff;
+
−
    -ms-transform: rotate(-44deg); /* IE 9 */
+
−
    -webkit-transform: rotate(-44deg); /* Safari */
+
−
    transform: rotate(-44deg);
+
−
    box-shadow: 0 0 5px #fff;
+
 
}
 
}
−
/*Style for odd div.line*/
+
 
−
.timeline>li:nth-child(even) .line:before {
+
.ss-style-roundedsplit::before,
−
    content: "";
+
.ss-style-roundedsplit::after {
−
    position: absolute;
+
top: -70px;
−
    top: 60px;
+
left: 0;
−
    bottom: 0;
+
z-index: 10;
−
    left: 450px;
+
width: 50%;
−
    width: 4px;
+
height: 70px;
−
    height:340px;
+
background: inherit;
−
    background-color: #fff;
+
−
    -ms-transform: rotate(44deg); /* IE 9 */
+
−
    -webkit-transform: rotate(44deg); /* Safari */
+
−
    transform: rotate(44deg);
+
−
    box-shadow: 0 0 5px #fff;
+
 
}
 
}
−
/* Medium Devices, .visible-md-* */
+
 
−
@media (min-width: 992px) and (max-width: 1199px) {
+
.ss-style-roundedsplit::before {
−
  .timeline > li:nth-child(even) {
+
border-radius: 0 80px 0 0;
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    right: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(even) .timeline-image {
+
−
    left: 0;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(odd) .timeline-image {
+
−
    left: 690px;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 76%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: left;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: right;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
−
  }
+
 
}
 
}
−
/* Small Devices, Tablets */
+
 
−
@media (min-width: 768px) and (max-width: 991px) {
+
.ss-style-roundedsplit::after {
−
  .timeline > li:nth-child(even) {
+
left: 50%;
−
    margin-bottom: 0px;
+
border-radius: 80px 0 0 0;
−
    min-height: 0px;
+
−
    right: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(even) .timeline-image {
+
−
    left: 0;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(odd) .timeline-image {
+
−
    left: 520px;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: left;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: right;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
−
  }
+
 
}
 
}
−
/* Custom, iPhone Retina */
+
 
−
@media only screen and (max-width: 767px) {
+
/* Inverted rounded corners */
−
  .timeline > li:nth-child(even) {
+
.ss-style-invertedrounded {
−
    margin-bottom: 0px;
+
margin-bottom: 90px;
−
    min-height: 0px;
+
padding: 13em 10% 10em;
−
    right: 0px;
+
border-radius: 0 0 0 90px;
−
  }
+
}
−
  .timeline > li:nth-child(odd) {
+
 
−
    margin-bottom: 0px;
+
.ss-style-invertedrounded::before,
−
    min-height: 0px;
+
.ss-style-invertedrounded::after {
−
    left: 0px;
+
left: 0;
−
  }
+
z-index: -1;
−
  .timeline>li .timeline-image {
+
height: 90px;
−
    position: static;
+
background: #3498db;
−
    width: 150px;
+
}
−
    height: 150px;
+
 
−
    margin-bottom:0px;
+
.ss-style-invertedrounded::before {
−
  }
+
top: 100%;
−
  .timeline>li:nth-child(even) .timeline-image {
+
width: 100%;
 +
border-radius: 0 90px 0 0;
 +
}
 +
 
 +
.ss-style-invertedrounded::after {
 +
bottom: 0;
 +
z-index: -1;
 +
width: 50%;
 +
}
 +
 
 +
/* Boxes */
 +
.ss-style-boxes {
 +
padding-top: 4em;
 +
padding-bottom: 13em;
 +
}
 +
 
 +
.ss-style-boxes::before {
 +
bottom: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
 +
background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%);
 +
-webkit-background-size: 130px 100%;
 +
background-size: 130px 100%;
 +
}
 +
 
 +
/* Zig Zag (3d up and simple down) */
 +
.ss-style-zigzag::before,
 +
.ss-style-zigzag::after {
 +
    right: 0;
 
     left: 0;
 
     left: 0;
−
     margin-left: 0;
+
     z-index: 10;
−
  }
+
     display: block;
−
  .timeline>li:nth-child(odd) .timeline-image {
+
     height: 90px;
−
     float:right;
+
     background-size: 50px 100%;
−
     left: 0px;
+
−
     margin-left:0;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 100%;
+
−
    padding: 0 0 20px 14px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 100%;
+
−
    padding: 0 14px 20px 0px;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
 
   }
 
   }
 +
 +
.ss-style-zigzag::before {
 +
top: -90px;
 +
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db));
 +
background-image:
 +
linear-gradient(315deg, #3093d5 25%, transparent 25%),
 +
linear-gradient( 45deg, #3498db 25%, transparent 25%);
 +
background-position: 50%;
 +
}
 +
 +
.ss-style-zigzag::after {
 +
top: 100%;
 +
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #2980b9));
 +
background-image:
 +
linear-gradient(135deg, #3498db 25%, transparent 25%),
 +
linear-gradient(225deg, #3498db 25%, transparent 25%);
 +
background-position: 50%;
 +
}
 +
 +
/* Edges */
 +
.ss-style-roundedges {
 +
padding-bottom: 16em;
 +
}
 +
 +
.ss-style-roundedges::before,
 +
.ss-style-roundedges::after {
 +
width: 200px;
 +
height: 200px;
 +
border-radius: 50%;
 +
background: #2980b9;
 +
top: -100px;
 +
-webkit-transform: rotate(45deg);
 +
transform: rotate(45deg);
 +
}
 +
 +
.ss-style-roundedges::before {
 +
left: -100px;
 +
}
 +
 +
.ss-style-roundedges::after {
 +
right: -100px;
 +
}
 +
 +
/* Slit */
 +
.ss-style-slit {
 +
padding-top: 5em;
 +
}
 +
 +
.ss-style-slit::before,
 +
.ss-style-slit::after {
 +
width: 50.5%;
 +
width: -webkit-calc(50% + 10px);
 +
width: -moz-calc(50% + 10px);
 +
width: calc(50% + 10px);
 +
height: 160px;
 +
background: #2980b9;
 +
top: -160px;
 +
}
 +
 +
.ss-style-slit::before {
 +
left: -20px;
 +
-webkit-transform: skewX(10deg);
 +
transform: skewX(10deg);
 +
box-shadow: -10px -20px #3192d3;
 +
}
 +
 +
.ss-style-slit::after {
 +
right: -20px;
 +
-webkit-transform: skewX(-10deg);
 +
transform: skewX(-10deg);
 +
box-shadow: 10px -20px #3192d3;
 +
}
 +
 +
/* Big half circle */
 +
#bigHalfCircle path {
 +
fill: #000;
 +
stroke: #000;
 +
}
 +
 +
/* Big triangle with shadow */
 +
 +
#trianglePath1 {
 +
fill: #000;
 +
stroke: #000;
 +
}
 +
 +
#trianglePath2 {
 +
fill: #777;
 +
stroke: #777;
 +
}
 +
 +
/* Inclined Zig Zag */
 +
.ss-style-inczigzag::before,
 +
.ss-style-inczigzag::after {
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-size: 100px 100%;
 +
}
 +
 +
.ss-style-inczigzag::before {
 +
top: 0;
 +
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #2980b9), color-stop(0.5, #3498db));
 +
background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
 +
}
 +
 +
.ss-style-inczigzag::after {
 +
bottom: 0;
 +
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9));
 +
background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
 +
}
 +
 +
/* Castle */
 +
.ss-style-castle::before {
 +
left: 0;
 +
width: 100%;
 +
height: 50px;
 +
background-size: 200px 100%;
 +
top: 0;
 +
background-image: -webkit-linear-gradient(40deg, #3498db 50%, #2980b9 50%);
 +
background-image: linear-gradient(40deg, #3498db 50%, #2980b9 50%);
 +
}
 +
 +
/* Alternative slit with inner shadow */
 +
#slitPath1 {
 +
fill: #3498db;
 +
stroke: red;
 +
stroke-width: 0;
 +
}
 +
 +
#slitPath2, #slitPath3 {
 +
fill: #2072a7;
 +
}
 +
 +
/* Folded corner */
 +
.ss-style-foldedcorner::before,
 +
.ss-style-foldedcorner::after {
 +
bottom: 0;
 +
width: 100px;
 +
height: 100px;
 +
}
 +
 +
.ss-style-foldedcorner::before {
 +
right: 0;
 +
background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%);
 +
background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%);
 +
}
 +
 +
.ss-style-foldedcorner::after {
 +
right: 100px;
 +
background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%);
 +
background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%);
 +
}
 +
 +
/* Dots */
 +
.ss-style-dots::before {
 +
bottom: 20px;
 +
width: 14px;
 +
height: 14px;
 +
border-radius: 50%;
 +
left: 50%;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
background: #2072a7;
 +
box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
 +
}
 +
 +
/* Double Line */
 +
.ss-style-doubleline::before {
 +
bottom: 30px;
 +
width: 140px;
 +
height: 2px;
 +
left: 50%;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
background: #2072a7;
 +
box-shadow: 0 30px 0 #2072a7;
 +
}
 +
 +
/* Cross */
 +
.ss-style-cross {
 +
padding-bottom: 15em;
 +
}
 +
 +
.ss-style-cross::before,
 +
.ss-style-cross::after {
 +
background: #2072a7;
 +
bottom: 70px;
 +
width: 200px;
 +
height: 2px;
 +
left: 50%;
 +
-webkit-transform-origin: 50% 50%;
 +
transform-origin: 50% 50%;
 +
}
 +
 +
.ss-style-cross::before {
 +
-webkit-transform: translateX(-50%) rotate(45deg);
 +
transform: translateX(-50%) rotate(45deg);
 +
}
 +
 +
.ss-style-cross::after {
 +
-webkit-transform: translateX(-50%) rotate(-45deg);
 +
transform: translateX(-50%) rotate(-45deg);
 +
}
 +
 +
/* Stamp */
 +
#stamp path {
 +
fill: #3498db;
 +
stroke: #3498db; /* avoid gap in FF */
 +
}
 +
 +
/* Clouds */
 +
#clouds path {
 +
fill: #ecf0f1;
 +
stroke: #ecf0f1;
 +
}
 +
 +
/* Media Queries for the layout */
 +
@media screen and (max-width: 68em) {
 +
section {
 +
font-size: 80%;
 +
}
 +
}
 +
 +
@media screen and (max-width: 54em) {
 +
.column {
 +
display: block;
 +
width: 100% !important;
 +
}
 +
 +
.text:first-child,
 +
.text:nth-child(2) {
 +
text-align: center;
 +
}
 +
 +
.icon {
 +
margin: 0 auto;
 +
}
 +
 +
.col-2 .column:first-child .icon {
 +
margin: 0 auto 50px;
 +
}
 +
 +
.col-2 .column:nth-child(2) .icon {
 +
margin: 50px auto 0;
 +
}
 
}
 
}
  
Line 552: Line 765:
  
 
/*end menu*/
 
/*end menu*/
 +
  
 
</style>
 
</style>

Revision as of 23:43, 18 September 2015

html> gh <style type="text/css">

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear

{

display: none;

}

  1. top_menu_under

{ height: 0; }

  1. top-section {

height: 0px; border-top: 0; border-left: none; border-right: none; } 

 #globalWrapper
   {

width: 100%; height: 100%; border: 0px; background-color: #fff; margin: 0px; padding: 0px; font-size: 100% }

#content { width: 100%; height: 100%; margin-left: none; margin-right: none; background-color: #fff; 

                       border: none;

padding: 0px; font-size: 100%; }


html, body, .wrapper { /*-- changes default wiki settings --

  • /

width: 100%; height: 100%; 

       margin: 0px;
       padding: 0px;
       background-color: #fff;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;

}

p { 

   margin: 0 0 25px;
   font-size: 18px;
   line-height: 1.5;

}



.intro { 

   display: table;
   width: 100%;
   height: 100;
   text-align: center;
   color: #fff;
   background-color: #fff;
   background: url("Edigem15_Design_tower.jpeg") no-repeat bottom center scroll; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

}

.intro .intro-body { 

   display: table-cell;
   vertical-align: middle;
   margin-left: auto;

}

.intro .intro-body .brand-heading { 

   margin-top: 15%;
   font-size: 40px;

border-bottom: none; }

.intro .intro-body .intro-text { 

   display: block;
   width: 100%;
   font-size: 18px;

}

@media(min-width:768px) { 

   .intro {
       height: 100%;
       padding: 0;
       box-shadow: 0 -100px 100px #fff inset;
   }

   .intro .intro-body .brand-heading {
       font-size: 100px;
   }

   .intro .intro-body .intro-text {
       font-size: 26px;
   }

}

body { 

   width: 100%;
   height: 100%;
   font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
   color: #fff;
    background-color: #000;

}

html { 

   width: 100%;
   height: 100%;

}

h1, h2, h3, h4, h5, h6 { 

   margin: none;
   text-transform: uppercase;
   font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   letter-spacing: 1px;

border-bottom: none;


} .arrowtext { 

   width: 100%;
   display: block;

}

.arrow { 

   height: 50px;
   width: 100px;
   opacity: 0.7;

}


/*COMPONENTS*/

  • ,
    after,
    before {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* General styles and layout */


.container { overflow: hidden; /* we don't want the pseudo-elements sticking out */ }

.container svg { display: block; }

section { 

       width: 100%;

position: relative; padding: 10em 10%; background: #fff; color: #740404; text-align: center; }

section h2 { 

       color: #740404;

margin: 0; padding: 0; font-size: 2.8em; font-weight: 400; }

section p { color: #740404; font-size: 1.3em; line-height: 1.5; 

       text-align: justify;

}

.text:first-child { text-align: right; }

.text:nth-child(2) { text-align: left; }

.col-2 .column { width: 49%; }

.col-3 .column { padding: 0 1%; width: 33%; text-align: center; }

.col-3 .column p { padding: 1.4em; }

.column { display: inline-block; vertical-align: top; }

.icon { display: block; width: 2em; height: 2em; border-radius: 50%; background: rgba(0,0,0,0.1); color: #fff; text-align: center; font-size: 8em; line-height: 2em; margin: 0 auto; }

section.color h2 { color: #fff; }

section.color p { color: #fff; }

.color { background: #000; }

/*** Individual section styles and separators ***/

/* Common style for pseudo-elements */ section::before, section::after { position: absolute; content: ; pointer-events: none; }

/* Triangles */ .ss-style-triangles::before, .ss-style-triangles::after { left: 50%; width: 100px; height: 100px; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); }

.ss-style-triangles::before { top: -50px; background: #2980b9; }

.ss-style-triangles::after { bottom: -50px; z-index: 10; background: inherit; }

/* Double Diagonal line */

.ss-style-doublediagonal { z-index: 1; padding-top: 6em; /*background: #391919;*/ }

.ss-style-doublediagonal::before, .ss-style-doublediagonal::after { top: 0; left: -25%; z-index: -1; width: 100%; height: 75%; background: inherit; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

.ss-style-doublediagonal::before { height: 50%; /*background: #391919;*/ -webkit-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-transform-origin: 3% 0; transform-origin: 3% 0; }

/* Half Circle */ .ss-style-halfcircle::before, .ss-style-halfcircle::after { left: 50%; z-index: 10; width: 100px; height: 100px; border-radius: 50%; background: inherit; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.ss-style-halfcircle::before { top: -50px; }

.ss-style-halfcircle::after { bottom: -50px; }

/* Big Triangle */ svg#bigTriangleColor { pointer-events: none; }

  1. bigTriangleColor path {

fill: #000; stroke: #000; stroke-width: 2; }

/* Curves */

  1. curveUpColor path,
  2. curveDownColor path {

fill: #000; stroke: #000; 

       background-color: #8C001A;

}

/* Multiple Triangles */ .ss-style-multitriangles::before, .ss-style-multitriangles::after { left: 50%; width: 50px; height: 50px; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); }

.ss-style-multitriangles::before { top: -25px; background: inherit; box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; }

.ss-style-multitriangles::after { bottom: -25px; z-index: 10; background: inherit; box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; }

/* Rounded corners */ .ss-style-roundedcorners::before { top: 100%; left: 0; z-index: 10; width: 100%; height: 60px; border-radius: 0 0 60px 60px; background: inherit; }

/* Rounded center split and bottom rounded */ .ss-style-roundedsplit { padding-top: 7em; border-radius: 0 0 80px 80px; }

.ss-style-roundedsplit::before, .ss-style-roundedsplit::after { top: -70px; left: 0; z-index: 10; width: 50%; height: 70px; background: inherit; }

.ss-style-roundedsplit::before { border-radius: 0 80px 0 0; }

.ss-style-roundedsplit::after { left: 50%; border-radius: 80px 0 0 0; }

/* Inverted rounded corners */ .ss-style-invertedrounded { margin-bottom: 90px; padding: 13em 10% 10em; border-radius: 0 0 0 90px; }

.ss-style-invertedrounded::before, .ss-style-invertedrounded::after { left: 0; z-index: -1; height: 90px; background: #3498db; }

.ss-style-invertedrounded::before { top: 100%; width: 100%; border-radius: 0 90px 0 0; }

.ss-style-invertedrounded::after { bottom: 0; z-index: -1; width: 50%; }

/* Boxes */ .ss-style-boxes { padding-top: 4em; padding-bottom: 13em; }

.ss-style-boxes::before { bottom: 0; left: 0; width: 100%; height: 50px; background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9)); background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%); -webkit-background-size: 130px 100%; background-size: 130px 100%; }

/* Zig Zag (3d up and simple down) */ .ss-style-zigzag::before, .ss-style-zigzag::after { 

   right: 0;
   left: 0;
   z-index: 10;
   display: block;
   height: 90px;
   background-size: 50px 100%;
 }

.ss-style-zigzag::before { top: -90px; background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db)); background-image: linear-gradient(315deg, #3093d5 25%, transparent 25%), linear-gradient( 45deg, #3498db 25%, transparent 25%); background-position: 50%; }

.ss-style-zigzag::after { top: 100%; background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #2980b9)); background-image: linear-gradient(135deg, #3498db 25%, transparent 25%), linear-gradient(225deg, #3498db 25%, transparent 25%); background-position: 50%; }

/* Edges */ .ss-style-roundedges { padding-bottom: 16em; }

.ss-style-roundedges::before, .ss-style-roundedges::after { width: 200px; height: 200px; border-radius: 50%; background: #2980b9; top: -100px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.ss-style-roundedges::before { left: -100px; }

.ss-style-roundedges::after { right: -100px; }

/* Slit */ .ss-style-slit { padding-top: 5em; }

.ss-style-slit::before, .ss-style-slit::after { width: 50.5%; width: -webkit-calc(50% + 10px); width: -moz-calc(50% + 10px); width: calc(50% + 10px); height: 160px; background: #2980b9; top: -160px; }

.ss-style-slit::before { left: -20px; -webkit-transform: skewX(10deg); transform: skewX(10deg); box-shadow: -10px -20px #3192d3; }

.ss-style-slit::after { right: -20px; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); box-shadow: 10px -20px #3192d3; }

/* Big half circle */

  1. bigHalfCircle path {

fill: #000; stroke: #000; }

/* Big triangle with shadow */

  1. trianglePath1 {

fill: #000; stroke: #000; }

  1. trianglePath2 {

fill: #777; stroke: #777; }

/* Inclined Zig Zag */ .ss-style-inczigzag::before, .ss-style-inczigzag::after { left: 0; width: 100%; height: 50px; background-size: 100px 100%; }

.ss-style-inczigzag::before { top: 0; background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #2980b9), color-stop(0.5, #3498db)); background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%); }

.ss-style-inczigzag::after { bottom: 0; background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9)); background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%); }

/* Castle */ .ss-style-castle::before { left: 0; width: 100%; height: 50px; background-size: 200px 100%; top: 0; background-image: -webkit-linear-gradient(40deg, #3498db 50%, #2980b9 50%); background-image: linear-gradient(40deg, #3498db 50%, #2980b9 50%); }

/* Alternative slit with inner shadow */

  1. slitPath1 {

fill: #3498db; stroke: red; stroke-width: 0; }

  1. slitPath2, #slitPath3 {

fill: #2072a7; }

/* Folded corner */ .ss-style-foldedcorner::before, .ss-style-foldedcorner::after { bottom: 0; width: 100px; height: 100px; }

.ss-style-foldedcorner::before { right: 0; background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%); background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%); }

.ss-style-foldedcorner::after { right: 100px; background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%); background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%); }

/* Dots */ .ss-style-dots::before { bottom: 20px; width: 14px; height: 14px; border-radius: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #2072a7; box-shadow: 30px 0 #2072a7, -30px 0 #2072a7; }

/* Double Line */ .ss-style-doubleline::before { bottom: 30px; width: 140px; height: 2px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #2072a7; box-shadow: 0 30px 0 #2072a7; }

/* Cross */ .ss-style-cross { padding-bottom: 15em; }

.ss-style-cross::before, .ss-style-cross::after { background: #2072a7; bottom: 70px; width: 200px; height: 2px; left: 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }

.ss-style-cross::before { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); }

.ss-style-cross::after { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); }

/* Stamp */

  1. stamp path {

fill: #3498db; stroke: #3498db; /* avoid gap in FF */ }

/* Clouds */

  1. clouds path {

fill: #ecf0f1; stroke: #ecf0f1; }

/* Media Queries for the layout */ @media screen and (max-width: 68em) { section { font-size: 80%; } }

@media screen and (max-width: 54em) { .column { display: block; width: 100% !important; }

.text:first-child, .text:nth-child(2) { text-align: center; }

.icon { margin: 0 auto; }

.col-2 .column:first-child .icon { margin: 0 auto 50px; }

.col-2 .column:nth-child(2) .icon { margin: 50px auto 0; } }

/*menu*/

  1. custom-bootstrap-menu.navbar-default .navbar-brand {
   color: rgba(255, 255, 255, 1);

}

  1. custom-bootstrap-menu.navbar-default {
   font-size: 18px;
   background-color: rgba(34, 34, 34, 1);
   border-bottom-width: 0px;

}

  1. custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(34, 34, 34, 1);
   padding-left:5px;
   padding-right:5px;
   padding-top: 10px;

}

  1. custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
  2. custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(87, 86, 86, 1);

}

  1. custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
  2. custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
  3. custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(87, 86, 86, 1);

}

  1. custom-bootstrap-menu.navbar-default .navbar-toggle {
   border-color: #575656;

}

  1. custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
  2. custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
   background-color: #575656;

}

  1. custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
   background-color: #575656;

}

  1. custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
  2. custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
   background-color: #222222;

}

/*end menu*/


</style>


</html>