Difference between revisions of "Team:FSU/CSS"

Revision as of 20:09, 2 July 2018

body {

 background-color: #f2f2f2;
 margin: 20px;
 font-family: Roboto, Helvetica, Arial;

}

.topnav {

 box-shadow: 0 10px 20px rgba(0,0,0,0.3);
 background-color: #333;
 border-bottom: 2px solid #555;
 padding-bottom: -100px;
 text-align: center;
 position: fixed;
 width: 100%;
 top: 0;

}

/* progress indicator */ .progress-container {

 width: 100%;
 height: 4px;
 background: #555;
 position: fixed;

} .progress-bar {

 height: 4px;
 background: #E9E49D;
 width: 0%;

}

.team {

 margin-top: 62px;

}

.topnav li {

 border-left: 2px solid #555;

}

.menuItems{

 float: right;

}

.menuItems a {

 padding: 20px 32px;

}

.menuItems a, .topnav li {

 float: left;
 display: block;
 color: #f2f2f2;

 text-decoration: none;
 font-size: 17px;
 margin: 0;

}

.dropdown-content a{

 width: 100px;

}

.circle {

 height: 30px;
 width: 30px;
 background-color: #444;
 border-radius: 50%;
 float: left;
 margin: 10px;

}

.active, .hvr-reveal.active{

 background-color: #C5395A;
 color: white;

}

.topnav .icon {

 display: none;

}

.dropdown {

   float: left;
   overflow: visible;

}

.dropdown .dropbtn {

   font-size: 17px;
   border: none;
   outline: none;
   color: inherit;
   padding: 20px 32px;
   background-color: inherit;
   font-family: inherit;
   margin-left: 0;
   z-index: 2;

}

.dropdown-content {

   display: none;
   position: absolute;
   background-color: #A6D6ED;
   min-width: 160px;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
   z-index: 2;
   overflow: visible !important;

}

.dropdown-content a {

   color: black;
   z-index: 2;
   display: block;

}

.dropdown:hover, li:hover { /* replaced with hvr-reveal */

 transition-duration: .5s;
 background-color: #A6D6ED;
 color: #020301;

} li:hover a {

 transition-duration: .5s;
 color: #020301;

} li:hover {

 transition-duration: .5s;
 background-color: #A6D6ED;
 color: #020301;

}

.dropdown:hover .dropdown-content {

   display: block;
   transition-delay: 1s;

}

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

 .topnav a:not(:first-child), .dropdown .dropbtn {
   display: none;
 }
 .topnav a.icon {
   float: right;
   display: block;
 }

}

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

 .topnav.responsive {position: relative;}
 .topnav.responsive .icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
 .topnav.responsive .dropdown {float: none;}
 .topnav.responsive .dropdown-content {position: relative;}
 .topnav.responsive .dropdown .dropbtn {
   display: block;
   width: 100%;
   text-align: left;
 }

}

/* Slideshow */ .slideshow-container {

 max-width: 100%;
 position: relative;
 margin: 0 2px 0 2px;

} /* hides images by default */ .mySlides {

 display: none;

} /* Next & previous buttons */ .prev, .next {

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 font-weight: bold;
 color: white;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;

} /* position the right button */ .next {

 right: 0;
 border-radius: 3px 0 0 3px;

}

.prev:hover, .next:hover {

 background-color: rgba(0,0,0,0.8);

}

/* Caption Text */ .text {

 color: #f2f2f2;
 font-size: 15px;
 padding:8px 12px;
 position:absolute;
 bottom:8px;
 width:100px;
 text-align: center;

}

.numbertext {

 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

} .dot {

 cursor: pointer;
 height:15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

} .dot:hover {

 background-color: #717171;

} .fade {

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

} @-webkit-keyframes fade {

 from {opacity: .4}
 to {opacity: 1}

} @keyframes fade {

 from {opacity: .4}
 to {opacity: 1}

}

.footer {

 height:20px;
 width:100%;
 background-color:#333;
 position:fixed;
 bottom: 0;

}