Team:SVCE Chennai/CSS
- 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;
}
- menu_BarsBox h4{
font-family: "Arial", Gadget, sans-serif; margin-top: 0px; font-size: 116%;
margin-bottom: 0px;
}
- top_menu_14{
font: x-small sans-serif !important; height: 18px; }
- 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%; }
- bodyContent{
height:100%; }
- 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+ */
}
- 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);
}
- 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; }
}