Difference between revisions of "Team:SVCE Chennai/CSS"

 
(11 intermediate revisions by the same user not shown)
Line 389: Line 389:
 
ul.sdt_menu li{
 
ul.sdt_menu li{
 
       float:right;
 
       float:right;
−
width:170px;
+
width:125px;
 
height:85px;
 
height:85px;
 
position:relative;
 
position:relative;
Line 398: Line 398:
 
top:0px;
 
top:0px;
 
left:0px;
 
left:0px;
−
width:170px;
+
width:125px;
 
height:85px;
 
height:85px;
 
z-index:12;
 
z-index:12;
Line 427: Line 427:
 
background:#111;
 
background:#111;
 
top:85px;
 
top:85px;
−
width:170px;
+
width:125px;
 
height:0px;
 
height:0px;
 
left:0px;
 
left:0px;
Line 524: Line 524:
 
  #quote-carousel .carousel-indicators {
 
  #quote-carousel .carousel-indicators {
 
     right: 50%;
 
     right: 50%;
 +
position: relative;
 
     top: auto;
 
     top: auto;
 
     bottom: 0px;
 
     bottom: 0px;
Line 623: Line 624:
 
   filter: gray; /* IE6-9 */
 
   filter: gray; /* IE6-9 */
 
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
 
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
−
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 
−
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 
−
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
 
 
     margin-bottom:20px;
 
     margin-bottom:20px;
 
}
 
}
Line 637: Line 635:
 
     text-decoration: none !important;
 
     text-decoration: none !important;
 
color: #60C3EB !important;
 
color: #60C3EB !important;
 +
}
 +
.titleStyle{
 +
padding-top:80px;
 +
border:none;
 +
}
 +
.stickyNotification {
 +
  margin: 0;
 +
  padding: 0;
 +
padding-top: 10px;
 +
}
 +
 +
 +
/* Note styles */
 +
.note-wrap {
 +
width: 350px;
 +
    min-height: 235px;
 +
    padding: 30px;
 +
    margin: 0 22px 44px 22px;
 +
    position: relative;
 +
    font-size: 24px;
 +
    vertical-align: top;
 +
    display: inline-block;
 +
    font-size: 15px;
 +
    font-family: Englebert, Arial;
 +
    color: #4b453c;
 +
    background: #F7E999;
 +
    line-height: 34px;
 +
    text-align: left;
 +
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
 +
}
 +
.note-wrap:before {
 +
  display: block;
 +
  content: "";
 +
  background: rgba(227, 200, 114, 0.4);
 +
  width: 130px;
 +
  height: 28px;
 +
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 +
  border-radius: 6px/18px 0;
 +
  position: absolute;
 +
  top: -13px;
 +
  left: 50px;
 +
  -webkit-transform: rotate(-2deg);
 +
  -moz-transform: rotate(-2deg);
 +
  -o-transform: rotate(-2deg);
 +
  -ms-transform: rotate(-2deg);
 +
  transform: rotate(-2deg);
 +
}
 +
.note-wrap a {
 +
  color: #6b824f;
 +
  text-decoration: none;
 +
  font-size: 20px;
 +
  -webkit-transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -o-transition: all 0.4s ease;
 +
  -ms-transition: all 0.4s ease;
 +
  transition: all 0.4s ease;
 +
}
 +
.note-wrap a:hover {
 +
  color: #D83A25;
 +
}
 +
 +
.note-yellow {
 +
  background: #F7E999;
 +
  -webkit-transform: rotate(2deg);
 +
  -moz-transform: rotate(2deg);
 +
  -o-transform: rotate(2deg);
 +
  -ms-transform: rotate(2deg);
 +
  transform: rotate(2deg);
 +
}
 +
 +
.note-blue {
 +
  background: #b9dcf4;
 +
  -webkit-transform: rotate(-2deg);
 +
  -moz-transform: rotate(-2deg);
 +
  -o-transform: rotate(-2deg);
 +
  -ms-transform: rotate(-2deg);
 +
  transform: rotate(-2deg);
 +
}
 +
 +
.note-pink {
 +
  background: #FFBDA3;
 +
  -webkit-transform: rotate(1deg);
 +
  -moz-transform: rotate(1deg);
 +
  -o-transform: rotate(1deg);
 +
  -ms-transform: rotate(1deg);
 +
  transform: rotate(1deg);
 +
}
 +
 +
.note-green {
 +
  background: #CAF4B9;
 +
  -webkit-transform: rotate(-1deg);
 +
  -moz-transform: rotate(-1deg);
 +
  -o-transform: rotate(-1deg);
 +
  -ms-transform: rotate(-1deg);
 +
  transform: rotate(-1deg);
 +
}
 +
#content {
 +
 +
    border: none;
 +
padding:0;
 +
}
 +
@media screen and (min-width: 950px) {
 +
  .navbar-brand {
 +
    float: left;
 +
    margin-right: 5px;
 +
    margin-left: -15px;
 +
  }
 +
  .navbar-nav {
 +
    float: left;
 +
    margin-top: 0;
 +
    margin-bottom: 0;
 +
  }
 +
  .navbar-nav > li {
 +
    float: left;
 +
  }
 +
  .navbar-nav > li > a {
 +
    border-radius: 0;
 +
  }
 +
  .navbar-nav.pull-right {
 +
    float: right;
 +
    width: auto;
 +
  }
 +
  .navbar-toggle {
 +
    position: relative;
 +
    top: auto;
 +
    left: auto;
 +
    display: none;
 +
  }
 +
  .nav-collapse.collapse {
 +
    display: block !important;
 +
    height: auto !important;
 +
    overflow: visible !important;
 +
  }
 
}
 
}

Latest revision as of 23:01, 18 September 2015

  1. content, html, body, #globalWrapper {
   width: 100%;
   height: 100%;

} body{ background: #fff; } .firstHeading{ display:none; } .hide { display:none; }

.loading { 

 position: absolute;
   left: 50%;
   top: 50%;
   margin: -60px 0 0 -100px;
   background: #fff;
   width: 150px;
   height: 150px;
   border-radius: 100%;

} .animateClassIntro{ 

animation: moveToCorner 2s 1 linear forwards;

} .loading:after { 

 content: ;
 background: trasparent;
 width: 140%;
 height: 140%;
 position: absolute;
 border-radius: 100%;
 top: -20%;
 left: -20%;
 opacity: 0.7;
 box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;

} .talktext p { font-size: 15px; display: inline; 

   padding-right: 5px;

}

@keyframes rotate { 

 0% {
   box-shadow: 0px 0px 129px -18px rgba(0,0,0,1);
 }
 50%{
box-shadow: none;
 }
 }
 100% {
  box-shadow: 0px 0px 129px -18px rgba(0,0,0,1);
 }

}

.minioImg{ width: 150px; }


/* CSS talk bubble */ .talk-bubble { margin: 40px; 

   display: inline-block;
   position: absolute;
   left: 96px;
   width: 200px;
   height: auto;
   background-color: #5FC2EA;

bottom: 90px; color:#fff; } .border{ 

 border: 8px solid #666;

} .round{ 

 border-radius: 30px;

-webkit-border-radius: 30px; -moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */ .tri-right.border.left-top:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: -40px;

right: auto; 

 top: -8px;

bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.left-top:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: -20px;

right: auto; 

 top: 0px;

bottom: auto; border: 22px solid; border-color: #5FC2EA transparent transparent transparent; }

/* Right triangle, left side slightly down */ .tri-right.border.left-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: -40px;

right: auto; 

 top: 30px;

bottom: auto; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.left-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: -20px;

right: auto; 

 top: 38px;

bottom: auto; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }

/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left:before { content: ' '; position: absolute; width: 0; height: 0; left: -8px; 

 right: auto;
 top: auto;

bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; } .tri-right.btm-left:after{ content: ' '; position: absolute; width: 0; height: 0; left: 0px; 

 right: auto;
 top: auto;

bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA; }

/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px; 

 right: auto;
 top: auto;

bottom: -40px; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.btm-left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px; 

 right: auto;
 top: auto;

bottom: -20px; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }

/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 30px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 38px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; } /* left: -8px; 

 right: auto;
 top: auto;

bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; left: 0px; 

 right: auto;
 top: auto;

bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA;

/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -8px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 0px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }

/* Right triangle, right side slightly down*/ .tri-right.border.right-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -40px; 

 top: 30px;

bottom: auto; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.right-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -20px; 

 top: 38px;

bottom: auto; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }

/* Right triangle placed top right flush. */ .tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -40px; 

 top: -8px;

bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -20px; 

 top: 0px;

bottom: auto; border: 20px solid; border-color: #5FC2EA transparent transparent transparent; }

/* talk bubble contents */ .talktext{ 

 padding: 1em;

text-align: left; 

 line-height: 1.5em;

} .talktext p{ 

 /* remove webkit p margins */
 -webkit-margin-before: 0em;
 -webkit-margin-after: 0em;

} .typed-cursor{ 

   opacity: 1;
   -webkit-animation: blink 0.7s infinite;
   -moz-animation: blink 0.7s infinite;
   animation: blink 0.7s infinite;

} @keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

} @-webkit-keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

} @-moz-keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

}

.footer { 

 position: absolute;
 bottom: 0;
 width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;

} .container{ width: 100% } .navBarIGEM{ 

   border: none;
   background-color: #60C3EB;
   margin-top: 15px;

}

@keyframes moveToCorner { 

    0% {

opacity: 1;

} 


   100% {
  left:80px;

top: 98%; opacity: 0; } }

.footer{ background: #fff; } .speech{ 

   color: #3492BC;
   letter-spacing: 2px;

}

ul.sdt_menu{ margin:0; padding:0; list-style: none; font-size:14px; } ul.sdt_menu a{ text-decoration:none; outline:none; } ul.sdt_menu li{ 

      float:right;

width:125px; height:85px; position:relative; cursor:pointer; } ul.sdt_menu li > a{ position:absolute; top:0px; left:0px; width:125px; height:85px; z-index:12;

} ul.sdt_menu li a img{ border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; } ul.sdt_menu li span.sdt_wrap{ position:absolute; top:25px; left:0px; width:170px; height:60px; z-index:15; } ul.sdt_menu li span.sdt_active{ position:absolute; background:#111; top:85px; width:125px; height:0px; left:0px; z-index:14; -moz-box-shadow:0px 0px 4px #000 inset; -webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset; } ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{ margin-left:15px; } ul.sdt_menu li span span.sdt_link{ color:#fff; font-size:24px; float:left; clear:both; } ul.sdt_menu li span span.sdt_descr{ color:#0B75AF; float:left; clear:both; width:155px; /*For dumbass IE7*/ font-size:10px; letter-spacing:1px; } ul.sdt_menu li div.sdt_box{ display:block; position:absolute; width:170px; overflow:hidden; height:170px; top:85px; left:0px; display:none; background:#000; } ul.sdt_menu li div.sdt_box a{ float:left; clear:both; line-height:30px; color:#0B75AF; } ul.sdt_menu li div.sdt_box a:first-child{ margin-top:15px; } ul.sdt_menu li div.sdt_box a:hover{ color:#fff; } .teamLogo{ 

   width: 168px;
   margin-top: 13px;
   margin-left: -4px;

}

  1. menu_BarsBox h4{
   font-family: "Arial", Gadget, sans-serif;
   margin-top: 0px;
   font-size: 116%;

   margin-bottom: 0px;

}

  1. top_menu_14{

font: x-small sans-serif !important; height: 18px; }

  1. top_menu_inside .section:last-child{

width: 190px !important; } 

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 30px;
}
/* Control buttons */

#quote-carousel .carousel-control {
    background: none;
    color: #222;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 10%;
}
/* Previous button */

#quote-carousel .carousel-control.left {
    left: -12px;
}
/* Next button */

#quote-carousel .carousel-control.right {
    right: -12px !important;
}
/* Changes the position of the indicators */

#quote-carousel .carousel-indicators {
    right: 50%;

position: relative; 

    top: auto;
    bottom: 0px;
    margin-right: -19px;
}
/* Changes the color of the indicators */

#quote-carousel .carousel-indicators li {
    background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
    background: #333333;
}
#quote-carousel img {
    width: 100%;

border-radius: 0%; 

}
/* End carousel */

.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote img {
    margin-bottom: 10px;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
/** MEDIA QUERIES */
/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
    #quote-carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }
}
/* Small devices (tablets, up to 768px) */

@media (max-width: 768px) {
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}

.marginTopCarousel{ padding-top: 95px; height: 100%; }

  1. bodyContent{

height:100%; }

  1. mw-content-text{

height: 100%; } .container{ height: 100%; } .row{ height: 100%; } .carousel-indicators{ left: 0%; 

   width: 100%;

} footer .container .row { margin-top:15px; } footer .container .row .col-md-4 { transform: skew(-15deg); 

   border: 1px solid #60C3EB;
   margin-left: -13px;
   border-bottom: none;

} footer .container .row .col-md-4 img { 

   transform: skew(15deg);

} .sponsorsTitle p{ margin-bottom: 0px; } .sponsorsLogo img { 

 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   margin-bottom:20px;

}

.sponsorsLogo img:hover { 

 filter: none; /* IE6-9 */
 -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */

}

  1. bodyContent a{
   text-decoration: none !important;

color: #60C3EB !important; } .titleStyle{ padding-top:80px; border:none; } .stickyNotification { 

 margin: 0;
 padding: 0;

padding-top: 10px; }


/* Note styles */ .note-wrap { 

width: 350px;
   min-height: 235px;
   padding: 30px;
   margin: 0 22px 44px 22px;
   position: relative;
   font-size: 24px;
   vertical-align: top;
   display: inline-block;
   font-size: 15px;
   font-family: Englebert, Arial;
   color: #4b453c;
   background: #F7E999;
   line-height: 34px;
   text-align: left;
   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);

} .note-wrap:before { 

 display: block;
 content: "";
 background: rgba(227, 200, 114, 0.4);
 width: 130px;
 height: 28px;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 border-radius: 6px/18px 0;
 position: absolute;
 top: -13px;
 left: 50px;
 -webkit-transform: rotate(-2deg);
 -moz-transform: rotate(-2deg);
 -o-transform: rotate(-2deg);
 -ms-transform: rotate(-2deg);
 transform: rotate(-2deg);

} .note-wrap a { 

 color: #6b824f;
 text-decoration: none;
 font-size: 20px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 transition: all 0.4s ease;

} .note-wrap a:hover { 

 color: #D83A25;

}

.note-yellow { 

 background: #F7E999;
 -webkit-transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -o-transform: rotate(2deg);
 -ms-transform: rotate(2deg);
 transform: rotate(2deg);

}

.note-blue { 

 background: #b9dcf4;
 -webkit-transform: rotate(-2deg);
 -moz-transform: rotate(-2deg);
 -o-transform: rotate(-2deg);
 -ms-transform: rotate(-2deg);
 transform: rotate(-2deg);

}

.note-pink { 

 background: #FFBDA3;
 -webkit-transform: rotate(1deg);
 -moz-transform: rotate(1deg);
 -o-transform: rotate(1deg);
 -ms-transform: rotate(1deg);
 transform: rotate(1deg);

}

.note-green { 

 background: #CAF4B9;
 -webkit-transform: rotate(-1deg);
 -moz-transform: rotate(-1deg);
 -o-transform: rotate(-1deg);
 -ms-transform: rotate(-1deg);
 transform: rotate(-1deg);

}

  1. content {
   border: none;

padding:0; } @media screen and (min-width: 950px) { 

 .navbar-brand {
   float: left;
   margin-right: 5px;
   margin-left: -15px;
 }
 .navbar-nav {
   float: left;
   margin-top: 0;
   margin-bottom: 0;
 }
 .navbar-nav > li {
   float: left;
 }
 .navbar-nav > li > a {
   border-radius: 0;
 }
 .navbar-nav.pull-right {
   float: right;
   width: auto;
 }
 .navbar-toggle {
   position: relative;
   top: auto;
   left: auto;
   display: none;
 }
 .nav-collapse.collapse {
   display: block !important;
   height: auto !important;
   overflow: visible !important;
 }

}