Difference between revisions of "Team:SDU-Denmark/css/content"

Latest revision as of 23:24, 1 November 2017

/************ GENERAL STUFF ****************/ .border-left-introduction {

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-introduction-unique {

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-introduction-our-solution {

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 20px;

} .border-left-project {

   border-left: 4px solid #73918A;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-procedures {

   border-left: 4px solid #556E3F;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-practices {

   border-left: 4px solid #76925E;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-prospects {

   border-left: 4px solid #B3AA5A;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-credits {

   border-left: 4px solid #CAC27F;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 40px;

} .border-left-invsisble {

   border-left: 4px solid #fff;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 100px;

} .border-left-achievements {

   border-left: 4px solid #485E65;
   padding-left: 35px;
   padding-bottom: 20px;
   margin-bottom: 100px;

} div.topShadow {

 box-shadow: 0 -2px 0 rgba(0,0,0,.1), 0 -2px 5px rgba(0,0,0,.3);
 position:relative;

}

/********************************************************************/ /********************* HOME PAGE **********************/ /********************************************************************/

homePage {

 width: 100%;
 height:96vh;
 text-align: center;
   background:  rgba(135, 222, 237, 0.7); /* For browsers that do not support gradients */    
   background: -webkit-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* For Firefox 3.6 to 15 */
   background: linear-gradient(0deg, rgba(135, 222, 237, 0.12), rgba(135, 222, 237, 1) 90%); /* Standard syntax (must be last) */  
 box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);
 position:relative;
 overflow:hidden;

}

homePage2 {

 text-align: center;
 position: absolute;
 bottom:-8px;
 left:5%;
 overflow:hidden;
 width:90%;

}

homePageBackground {

 overflow:hidden;

}

homePage3 {

 text-align: center;
 position: absolute;
 top:-50px;
 right:0px;
 overflow:hidden;
 width:90%;

}

homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, #homePageCloud5, {

 width:90%;

}

homeCloud1 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 85s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 85s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

homeCloud2 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 105s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 105s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

homeCloud3 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 95s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 95s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

homeCloud4 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:200%;
   animation-name: Cloud1Anim;
   animation-duration: 98s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud1Anim;
   -webkit-animation-duration: 98s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

homeCloud5 {

 text-align: center;
 position: absolute;
 bottom:0px;
 right:0px;
 overflow:hidden;
 width:300%;
   animation-name: Cloud2Anim;
   animation-duration: 105s;
   animation-timing-function: linear;
   animation-play-state: running;
   -webkit-animation-name: Cloud2Anim;
   -webkit-animation-duration: 105s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-play-state: running;

}

@keyframes Cloud1Anim {

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(50%);
 }

}

@keyframes Cloud2Anim {

 0% {
   transform: translateX(0);
 }
 100% {
   transform: translateX(66.67%);
 }

}

homePageText {

 position:relative;
 text-align:center;
 top:20%;
 width: 100%;
 margin: 0 auto;
 z-index: 100;

}

homePage p {

   text-align: center;
   letter-spacing: 2.1em;
   margin-left: 2em;
   margin-top: 0;
   padding-top: 0;

}

/********************************************************************/ /********************* ABSTRACT **********************/ /********************************************************************/

abstract {

   padding-bottom: 14px;
   padding-top: 22px;

}

about-our-wiki {

   padding-bottom: 22px;
   padding-top: 14px;

}

div#scrollWritten {

   -ms-transform: rotate(-12deg);
   -webkit-transform: rotate(-12deg);
   transform: rotate(-12deg);
   padding:50px;
   text-align:center;

}

sketchAbstract {

 width: 100%;

}

/********************************************************************/ /********************* PRESENTATION **********************/ /********************************************************************/

.shadowDropBottom {

   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);

}

.contentHeadline {

   background-color: #fff;
   box-shadow: 0 -2px 0 rgba(0,0,0,.1), 0 -2px 5px rgba(0,0,0,.5);
   margin-top: 0px;
   width: 100%;
   height: 40vh;
   padding-top: 10%;
   z-index: 5;

}

.centerContentHeadline {

   align-items: center;
   display: flex;
   justify-content: center;
   height: 102%;
   position:relative;
   background: #FFF;
   padding-bottom:100px;

}

.graphicsPlacement {

 position: absolute;
 bottom: 2%;
 width: 10%;

}

HQ_page p.headline {

 font-family: "open sans";
 font-size: 500%;
 font-weight:400;
 letter-spacing: 0.12em;

}

p#headlineIntroduction {

 color: #1D353D;

}

p#headlineProject {

 color: #39675B;

}

p#headlineProcedures {

 color: #3F5E23;

}

p#headlinePractices {

 color: #556E3F;

}

p#headlineProspects {

 color: #B3AA5A;

}

p#headlineCredits {

 color: #CAC27F;

}

.presentationBackground {

   box-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 2px rgba(0, 0, 0, .1);

}

.magic {

   width: 100%;
   height: 12px;
   background: rgba(0,0,0,.5);

}

.magicMagic {

   width: 100%;
   height: 20px;
   background: rgba(0,0,0,.6);

}

.margin-bottom-200 {

 margin-bottom:200px;

}

.margin-bottom-5 {

 padding-bottom:5px;

}

.coverPicture {

   height: 400px;
   width: 100%;
   background-position: center !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;

}

attributionsCoverPicture {

   background: #ddd;

}

.team-rows {

   margin-top: 100px;
   margin-bottom: 100px;

}

.team-top-rows {

   margin-bottom: 100px;

}

.margin-bottom-75 {

   margin-bottom: 75px;

}

.margin-top-50 {

   margin-top: 50px;

}

.padding-top-125 {

   padding-top: 125px;

}

.margin-top-200 {

   margin-top: 200px;

}

.memberPicture {

   width: 100%;

}

.medalPicture {

   width: 75%;

}

.medalPicture {

   width: 75%;

}

HQ_page div.project-design-headline {

 text-align:center;
 margin-bottom:50px;

}

HQ_page .energy-storing-unit-overview {

   background-color: rgba(252, 248, 211, 0.3);
   border-radius: 10px;
   border: 1px solid rgba(0,0,0,0.3)

}

HQ_page .energy-converting-unit-overview {

   background-color: rgba(57, 103, 91, 0.15);
   border-radius: 10px;
   border: 1px solid rgba(0,0,0,0.3)

}

.verticalAlignColumns {

   float: none;
   display: inline-block;
   vertical-align: middle;
   margin-right: -4px;

}

HQ_page div.integrated-practices-prototypes {

   text-align:center;
   margin:50px 0px;

}

HQ_page img.interview-images {

   border-radius: 50%;
   width: 100px;
   border: 10px solid #fefefe;
   height: 100px;
   box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
  float: left;
  margin-right: 20px;

}

HQ_page img.education-images {

  box-shadow: 0 0px 0 rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.3);
  border-radius: 10px;

}

HQ_page object.listing-item-symbol {

   width: 20px;
   margin-bottom: 0;
   margin-right: 25px;
   margin-left: 18px;

}

@media only screen and (max-width: 1000px) {

 #HQ_page p.headline {
   font-size: 350%;
 }

 .coverPicture {
   height: 300px;
 }

}

@media only screen and (max-width: 768px) {

 #HQ_page p.headline {
   font-size: 300%;
 }

 .coverPicture {
   height: 300px;
 }

 #HQ_page h2 {
   font-size:250%;
 }

}

@media only screen and (min-width: 768px) {

 .verticalAlignColumnsAbstract {
   float: none;
   display: inline-block;
   vertical-align: middle;
   margin-right: -4px;
 }

}

@media only screen and (max-width: 600px) {

 #HQ_page p.headline {
   font-size: 250%;
 }

}

@media only screen and (max-width: 520px) {

 .padding0.left{
   padding-left:0;
 }
 
 .padding0.right{
   padding-right:0;
 }

 .coverPicture {
   height: 150px;
 }
 
 #HQ_page h2 {
   font-size:200%;
 }

 #HQ_page p.headline {
   font-size: 225%;
 }

}

@media only screen and (max-width: 450px) {

 #HQ_page p.headline {
   font-size: 200%;
 }

}

@media only screen and (max-width: 400px) {

 #HQ_page h2 {
   font-size: 160%;
 }
 #HQ_page p.headline {
   font-size: 150%;
 }

}