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

Line 374: Line 374:
 
}
 
}
  
−
 
+
ul.sdt_menu{
−
.navbar-nav>li>.dropdown-menu {
+
margin:0;
−
    margin-top:20px;
+
padding:0;
−
    border-top-left-radius:4px;
+
list-style: none;
−
    border-top-right-radius:4px;
+
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 +
font-size:14px;
 +
width:1020px;
 
}
 
}
−
.navbar-default .navbar-nav>li>a {
+
ul.sdt_menu a{
−
    width:200px;
+
text-decoration:none;
−
    font-weight:bold;
+
outline:none;
 
}
 
}
−
.mega-dropdown {
+
ul.sdt_menu li{
−
  position: static !important;
+
float:left;
−
  width:100%;
+
width:170px;
 +
height:85px;
 +
position:relative;
 +
cursor:pointer;
 
}
 
}
−
.mega-dropdown-menu {
+
ul.sdt_menu li > a{
−
    padding: 20px 0px;
+
position:absolute;
−
border: 1px solid rgba(0,0,0,0.15);
+
top:0px;
−
    width: calc(100% - 50px);
+
left:0px;
−
margin-left: 25px;
+
width:170px;
−
    margin-right: -25px;  
+
height:85px;
−
    box-shadow: none;
+
z-index:12;
−
    -webkit-box-shadow: none;
+
background:transparent url(../images/overlay.png) no-repeat bottom right;
 +
-moz-box-shadow:0px 0px 2px #000 inset;
 +
-webkit-box-shadow:0px 0px 2px #000 inset;
 +
box-shadow:0px 0px 2px #000 inset;
 
}
 
}
−
.mega-dropdown-menu:before {
+
ul.sdt_menu li a img{
−
    content: "";
+
border:none;
−
    border-bottom: 15px solid #fff;
+
position:absolute;
−
    border-right: 17px solid transparent;
+
width:0px;
−
    border-left: 17px solid transparent;
+
height:0px;
−
    position: absolute;
+
bottom:0px;
−
    top: -15px;
+
left:85px;
−
      right: 85px;
+
z-index:100;
−
    z-index: 10;
+
-moz-box-shadow:0px 0px 4px #000;
 +
-webkit-box-shadow:0px 0px 4px #000;
 +
box-shadow:0px 0px 4px #000;
 
}
 
}
−
.mega-dropdown-menu:after {
+
ul.sdt_menu li span.sdt_wrap{
−
    content: "";
+
position:absolute;
−
    border-bottom: 17px solid #ccc;
+
top:25px;
−
    border-right: 19px solid transparent;
+
left:0px;
−
    border-left: 19px solid transparent;
+
width:170px;
−
    position: absolute;
+
height:60px;
−
    top: -17px;
+
z-index:15;
−
    right: 83px;
+
−
    z-index: 8;
+
 
}
 
}
−
.mega-dropdown-menu > li > ul {
+
ul.sdt_menu li span.sdt_active{
−
  padding: 0;
+
position:absolute;
−
  margin: 0;
+
background:#111;
 +
top:85px;
 +
width:170px;
 +
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;
 
}
 
}
−
.mega-dropdown-menu > li > ul > li {
+
ul.sdt_menu li span span.sdt_link,
−
  list-style: none;
+
ul.sdt_menu li span span.sdt_descr,
 +
ul.sdt_menu li div.sdt_box a{
 +
margin-left:15px;
 +
text-transform:uppercase;
 +
text-shadow:1px 1px 1px #000;
 
}
 
}
−
.mega-dropdown-menu > li > ul > li > a {
+
ul.sdt_menu li span span.sdt_link{
−
  display: block;
+
color:#fff;
−
  padding: 3px 20px;
+
font-size:24px;
−
  clear: both;
+
float:left;
−
  font-weight: normal;
+
clear:both;
−
  line-height: 1.428571429;
+
−
  color: #999;
+
−
  white-space: normal;
+
 
}
 
}
−
.mega-dropdown-menu > li ul > li > a:hover,
+
ul.sdt_menu li span span.sdt_descr{
−
.mega-dropdown-menu > li ul > li > a:focus {
+
color:#0B75AF;
−
  text-decoration: none;
+
float:left;
−
  color: #444;
+
clear:both;
−
  background-color: #f5f5f5;
+
width:155px; /*For dumbass IE7*/
 +
font-size:10px;
 +
letter-spacing:1px;
 
}
 
}
−
.mega-dropdown-menu .dropdown-header {
+
ul.sdt_menu li div.sdt_box{
−
  color: #428bca;
+
display:block;
−
  font-size: 18px;
+
position:absolute;
−
  font-weight:bold;
+
width:170px;
 +
overflow:hidden;
 +
height:170px;
 +
top:85px;
 +
left:0px;
 +
display:none;
 +
background:#000;
 
}
 
}
−
.mega-dropdown-menu form {
+
ul.sdt_menu li div.sdt_box a{
−
    margin:3px 20px;
+
float:left;
 +
clear:both;
 +
line-height:30px;
 +
color:#0B75AF;
 
}
 
}
−
.mega-dropdown-menu .form-group {
+
ul.sdt_menu li div.sdt_box a:first-child{
−
    margin-bottom: 3px;
+
margin-top:15px;
 
}
 
}
−
#top_menu_14{
+
ul.sdt_menu li div.sdt_box a:hover{
−
height:20px;
+
color:#fff;
 
}
 
}
 
.teamLogo{
 
.teamLogo{
−
width:50px;
+
width:150px;
 
}
 
}

Revision as of 16:22, 13 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{ 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-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px; } ul.sdt_menu a{ text-decoration:none; outline:none; } ul.sdt_menu li{ float:left; width:170px; height:85px; position:relative; cursor:pointer; } ul.sdt_menu li > a{ position:absolute; top:0px; left:0px; width:170px; height:85px; z-index:12; background:transparent url(../images/overlay.png) no-repeat bottom right; -moz-box-shadow:0px 0px 2px #000 inset; -webkit-box-shadow:0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset; } 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:170px; 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; text-transform:uppercase; text-shadow:1px 1px 1px #000; } 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:150px; }