Difference between revisions of "Team:Cairo Egypt/css/custom"

Revision as of 20:11, 30 June 2015 (view source) Tootis (Talk | contribs) ← Older edit		Latest revision as of 20:50, 5 September 2015 (view source) Tootis (Talk | contribs)
(8 intermediate revisions by the same user not shown)
Line 1:		Line 1:
	/*!		/*!
−	* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)	+	* Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com)
	* Code licensed under the Apache License v2.0.		* Code licensed under the Apache License v2.0.
	* For details, see http://www.apache.org/licenses/LICENSE-2.0.		* For details, see http://www.apache.org/licenses/LICENSE-2.0.
	*/		*/
		+	/* Global Styles */
		+
		+	html,
	body {		body {
−	overflow-x: hidden;	+	width: 100%;
		+	height: 100%;
	}		}
−	p {	+	body {
−	font-size: 20px;	+	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
	}		}
−	p.small {	+	.text-vertical-center {
−	font-size: 16px;	+	display: table-cell;
		+	text-align: center;
		+	vertical-align: middle;
	}		}
−	a,	+	.text-vertical-center h1 {
−	a:hover,	+	margin: 0;
−	a:focus,	+	padding: 0;
−	a:active,	+	font-size: 4.5em;
−	a.active,	+
−	a.visted {	+
−	outline: 0;	+
−	color: #18bc9c;	+
−	}	+
−		+
−	h1,	+
−	h2,	+
−	h3,	+
−	h4,	+
−	h5,	+
−	h6 {	+
−	text-transform: uppercase;	+
−	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;	+
	font-weight: 700;		font-weight: 700;
	}		}
−	hr.star-light,	+	/* Custom Button Styles */
−	hr.star-primary {	+
−	margin: 25px auto 30px;	+
−	padding: 0;	+
−	max-width: 250px;	+
−	border: 0;	+
−	border-top: solid 5px;	+
−	text-align: center;	+
−	}	+
−	hr.star-light:after,	+	.btn-dark {
−	hr.star-primary:after {	+	border-radius: 0;
−	content: "\f005";	+
−	display: inline-block;	+
−	position: relative;	+
−	top: -.8em;	+
−	padding: 0 .25em;	+
−	font-family: FontAwesome;	+
−	font-size: 2em;	+
−	}	+
−		+
−	hr.star-light {	+
−	border-color: #fff;	+
−	}	+
−		+
−	hr.star-light:after {	+
	color: #fff;		color: #fff;
−	background-color: #18bc9c;	+	background-color: rgba(0,0,0,0.4);
	}		}
−	hr.star-primary {	+	.btn-dark:hover,
−	border-color: #2c3e50;	+	.btn-dark:focus,
−	}	+	.btn-dark:active {
−		+
−	hr.star-primary:after {	+
−	color: #2c3e50;	+
−	background-color: #fff;	+
−	}	+
−		+
−	.img-centered {	+
−	margin: 0 auto;	+
−	}	+
−		+
−	header {	+
−	text-align: center;	+
	color: #fff;		color: #fff;
−	background: #18bc9c;	+	background-color: rgba(0,0,0,0.7);
	}		}
−	header .container {	+	.btn-light {
−	padding-top: 100px;	+	border-radius: 0;
−	padding-bottom: 50px;	+	color: #333;
		+	background-color: rgb(255,255,255);
	}		}
−	header img {	+	.btn-light:hover,
−	display: block;	+	.btn-light:focus,
−	margin: 0 auto 20px;	+	.btn-light:active {
		+	color: #333;
		+	background-color: rgba(255,255,255,0.8);
	}		}
−	header .intro-text .name {	+	/* Custom Horizontal Rule */
−	display: block;	+
−	text-transform: uppercase;	+
−	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;	+
−	font-size: 2em;	+
−	font-weight: 700;	+
−	}	+
−	header .intro-text .skills {	+	hr.small {
−	font-size: 1.25em;	+	max-width: 100px;
−	font-weight: 300;	+
	}		}
−	@media(min-width:768px) {	+	/* Side Menu */
−	header .container {	+
−	padding-top: 200px;	+
−	padding-bottom: 100px;	+
−	}	+
−	header .intro-text .name {	+	#sidebar-wrapper {
−	font-size: 4.75em;	+	z-index: 1000;
−	}	+	position: fixed;
−		+	right: 0;
−	header .intro-text .skills {	+	width: 250px;
−	font-size: 1.75em;	+	height: 100%;
−	}	+	margin-right: -250px;
		+	overflow-y: auto;
		+	background: #222;
		+	-webkit-transition: all 0.4s ease 0s;
		+	-moz-transition: all 0.4s ease 0s;
		+	-ms-transition: all 0.4s ease 0s;
		+	-o-transition: all 0.4s ease 0s;
		+	transition: all 0.4s ease 0s;
	}		}
−	@media(min-width:768px) {	+	.sidebar-nav {
−	.navbar-fixed-top {	+	position: absolute;
−	padding: 25px 0;	+	top: 0;
−	-webkit-transition: padding .3s;	+	width: 250px;
−	-moz-transition: padding .3s;	+	margin: 0;
−	transition: padding .3s;	+	padding: 0;
−	}	+	list-style: none;
−		+
−	.navbar-fixed-top .navbar-brand {	+
−	font-size: 2em;	+
−	-webkit-transition: all .3s;	+
−	-moz-transition: all .3s;	+
−	transition: all .3s;	+
−	}	+
−		+
−	.navbar-fixed-top.navbar-shrink {	+
−	padding: 10px 0;	+
−	}	+
−		+
−	.navbar-fixed-top.navbar-shrink .navbar-brand {	+
−	font-size: 1.5em;	+
−	}	+
	}		}
−	.navbar {	+	.sidebar-nav li {
−	text-transform: uppercase;	+	text-indent: 20px;
−	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;	+	line-height: 40px;
−	font-weight: 700;	+
	}		}
−	.navbar a:focus {	+	.sidebar-nav li a {
−	outline: 0;	+	display: block;
		+	text-decoration: none;
		+	color: #999;
	}		}
−	.navbar .navbar-nav {	+	.sidebar-nav li a:hover {
−	letter-spacing: 1px;	+	text-decoration: none;
		+	color: #fff;
		+	background: rgba(255,255,255,0.2);
	}		}
−	.navbar .navbar-nav li a:focus {	+	.sidebar-nav li a:active,
−	outline: 0;	+	.sidebar-nav li a:focus {
		+	text-decoration: none;
	}		}
−	.navbar-default,	+	.sidebar-nav > .sidebar-brand {
−	.navbar-inverse {	+	height: 55px;
−	border: 0;	+	font-size: 18px;
		+	line-height: 55px;
	}		}
−	section {	+	.sidebar-nav > .sidebar-brand a {
−	padding: 100px 0;	+	color: #999;
	}		}
−	section h2 {	+	.sidebar-nav > .sidebar-brand a:hover {
−	margin: 0;	+	color: #fff;
−	font-size: 3em;	+	background: none;
	}		}
−	section.success {	+	#menu-toggle {
−	color: #fff;	+	z-index: 1;
−	background: #18bc9c;	+	position: fixed;
		+	top: 0;
		+	right: 0;
	}		}
−	section.success a,	+	#sidebar-wrapper.active {
−	section.success a:hover,	+	right: 250px;
−	section.success a:focus,	+	width: 250px;
−	section.success a:active,	+	-webkit-transition: all 0.4s ease 0s;
−	section.success a.active {	+	-moz-transition: all 0.4s ease 0s;
−	outline: 0;	+	-ms-transition: all 0.4s ease 0s;
−	color: #2c3e50;	+	-o-transition: all 0.4s ease 0s;
		+	transition: all 0.4s ease 0s;
	}		}
−	@media(max-width:767px) {	+	.toggle {
−	section {	+	margin: 5px 5px 0 0;
−	padding: 75px 0;	+
−	}	+
−		+
−	section.first {	+
−	padding-top: 75px;	+
−	}	+
	}		}
−	#portfolio .portfolio-item {	+	/* Header */
−	right: 0;	+
−	margin: 0 0 15px;	+
−	}	+
−	#portfolio .portfolio-item .portfolio-link {	+	.header {
−	display: block;	+	display: table;
	position: relative;		position: relative;
−	margin: 0 auto;
−	max-width: 400px;
−	}
−
−	#portfolio .portfolio-item .portfolio-link .caption {
−	position: absolute;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
−	opacity: 0;	+	background: url(https://static.igem.org/mediawiki/2015/2/2a/Team-Cairo_Egypt_Egypt.jpg) no-repeat center center scroll;
−	background: rgba(24,188,156,.9);	+	-webkit-background-size: cover;
−	-webkit-transition: all ease .5s;	+	-moz-background-size: cover;
−	-moz-transition: all ease .5s;	+	background-size: cover;
−	transition: all ease .5s;	+	-o-background-size: cover;
	}		}
−	#portfolio .portfolio-item .portfolio-link .caption:hover {	+	/* About */
−	opacity: 1;	+
−	}	+
−	#portfolio .portfolio-item .portfolio-link .caption .caption-content {	+	.about {
−	position: absolute;	+	padding: 50px 0;
−	top: 50%;	+
−	width: 100%;	+
−	height: 20px;	+
−	margin-top: -12px;	+
−	text-align: center;	+
−	font-size: 20px;	+
−	color: #fff;	+
	}		}
−	#portfolio .portfolio-item .portfolio-link .caption .caption-content i {	+	/* Services */
−	margin-top: -12px;	+
−	}	+
−	#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,	+	.services {
−	#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {	+	padding: 50px 0;
−	margin: 0;	+
	}		}
−	#portfolio * {	+	.service-item {
−	z-index: 2;	+	margin-bottom: 30px;
	}		}
−	@media(min-width:767px) {	+	/* Callout */
−	#portfolio .portfolio-item {	+
−	margin: 0 0 30px;	+
−	}	+
−	}	+
−	.btn-outline {	+	.callout {
−	margin-top: 15px;	+	display: table;
−	border: solid 2px #fff;	+	width: 100%;
−	font-size: 20px;	+	height: 418px;
	color: #fff;		color: #fff;
−	background: 0 0;	+	background: url(https://static.igem.org/mediawiki/2015/7/7a/Team-Cairo_Egypt_callout.jpg) no-repeat center center scroll;
−	transition: all .3s ease-in-out;	+	-webkit-background-size: cover;
		+	-moz-background-size: cover;
		+	background-size: cover;
		+	-o-background-size: cover;
		+	background-position-y: -46px;
	}		}
−	.btn-outline:hover,	+	/* Portfolio */
−	.btn-outline:focus,	+
−	.btn-outline:active,	+
−	.btn-outline.active {	+
−	border: solid 2px #fff;	+
−	color: #18bc9c;	+
−	background: #fff;	+
−	}	+
−	.floating-label-form-group {	+	.portfolio {
−	position: relative;	+	padding: 50px 0;
−	margin-bottom: 0;	+
−	padding-bottom: .5em;	+
−	border-bottom: 1px solid #eee;	+
	}		}
−	.floating-label-form-group input,	+	.portfolio-item {
−	.floating-label-form-group textarea {	+	margin-bottom: 30px;
−	z-index: 1;	+
−	position: relative;	+
−	padding-right: 0;	+
−	padding-left: 0;	+
−	border: 0;	+
−	border-radius: 0;	+
−	font-size: 1.5em;	+
−	background: 0 0;	+
−	box-shadow: none!important;	+
−	resize: none;	+
	}		}
−	.floating-label-form-group label {	+	.img-portfolio {
−	display: block;	+	margin: 0 auto;
−	z-index: 0;	+
−	position: relative;	+
−	top: 2em;	+
−	margin: 0;	+
−	font-size: .85em;	+
−	line-height: 1.764705882em;	+
−	vertical-align: middle;	+
−	vertical-align: baseline;	+
−	opacity: 0;	+
−	-webkit-transition: top .3s ease,opacity .3s ease;	+
−	-moz-transition: top .3s ease,opacity .3s ease;	+
−	-ms-transition: top .3s ease,opacity .3s ease;	+
−	transition: top .3s ease,opacity .3s ease;	+
	}		}
−	.floating-label-form-group::not(:first-child) {	+	.img-portfolio:hover {
−	padding-left: 14px;	+	opacity: 0.8;
−	border-left: 1px solid #eee;	+
	}		}
−	.floating-label-form-group-with-value label {	+	/* Call to Action */
−	top: 0;	+
−	opacity: 1;	+
−	}	+
−	.floating-label-form-group-with-focus label {	+	.call-to-action {
−	color: #18bc9c;	+	padding: 50px 0;
	}		}
−	form .row:first-child .floating-label-form-group {	+	.call-to-action .btn {
−	border-top: 1px solid #eee;	+	margin: 10px;
	}		}
−	footer {	+	/* Map */
−	color: #fff;	+
−	}	+
−	footer h3 {	+	.map {
−	margin-bottom: 30px;	+	height: 500px;
	}		}
−	footer .footer-above {	+	@media(max-width:768px) {
−	padding-top: 50px;	+	.map {
−	background-color: #2c3e50;	+	height: 75%;
		+	}
	}		}
−	footer .footer-col {	+	/* Footer */
−	margin-bottom: 50px;	+
−	}	+
−	footer .footer-below {	+	footer {
−	padding: 25px 0;	+
−	background-color: #233140;	+
−	}	+
−		+
−	.btn-social {	+
−	display: inline-block;	+
−	width: 50px;	+
−	height: 50px;	+
−	border: 2px solid #fff;	+
−	border-radius: 100%;	+
−	text-align: center;	+
−	font-size: 20px;	+
−	line-height: 45px;	+
−	}	+
−		+
−	.btn:focus,	+
−	.btn:active,	+
−	.btn.active {	+
−	outline: 0;	+
−	}	+
−		+
−	.scroll-top {	+
−	z-index: 1049;	+
−	position: fixed;	+
−	right: 2%;	+
−	bottom: 2%;	+
−	width: 50px;	+
−	height: 50px;	+
−	}	+
−		+
−	.scroll-top .btn {	+
−	width: 50px;	+
−	height: 50px;	+
−	border-radius: 100%;	+
−	font-size: 20px;	+
−	line-height: 28px;	+
−	}	+
−		+
−	.scroll-top .btn:focus {	+
−	outline: 0;	+
−	}	+
−		+
−	.portfolio-modal .modal-content {	+
	padding: 100px 0;		padding: 100px 0;
−	min-height: 100%;
−	border: 0;
−	border-radius: 0;
−	text-align: center;
−	background-clip: border-box;
−	-webkit-box-shadow: none;
−	box-shadow: none;
−	}
−
−	.portfolio-modal .modal-content h2 {
−	margin: 0;
−	font-size: 3em;
−	}
−
−	.portfolio-modal .modal-content img {
−	margin-bottom: 30px;
−	}
−
−	.portfolio-modal .modal-content .item-details {
−	margin: 30px 0;
−	}
−
−	.portfolio-modal .close-modal {
−	position: absolute;
−	top: 25px;
−	right: 25px;
−	width: 75px;
−	height: 75px;
−	background-color: transparent;
−	cursor: pointer;
−	}
−
−	.portfolio-modal .close-modal:hover {
−	opacity: .3;
−	}
−
−	.portfolio-modal .close-modal .lr {
−	z-index: 1051;
−	width: 1px;
−	height: 75px;
−	margin-left: 35px;
−	background-color: #2c3e50;
−	-webkit-transform: rotate(45deg);
−	-ms-transform: rotate(45deg);
−	transform: rotate(45deg);
−	}
−
−	.portfolio-modal .close-modal .lr .rl {
−	z-index: 1052;
−	width: 1px;
−	height: 75px;
−	background-color: #2c3e50;
−	-webkit-transform: rotate(90deg);
−	-ms-transform: rotate(90deg);
−	transform: rotate(90deg);
−	}
−
−	.portfolio-modal .modal-backdrop {
−	display: none;
−	opacity: 0;
	}		}

---

Latest revision as of 20:50, 5 September 2015

/*!

* Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/

/* Global Styles */

html, body {

   width: 100%;
   height: 100%;

}

body {

   font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.text-vertical-center {

   display: table-cell;
   text-align: center;
   vertical-align: middle;

}

.text-vertical-center h1 {

   margin: 0;
   padding: 0;
   font-size: 4.5em;
   font-weight: 700;

}

/* Custom Button Styles */

.btn-dark {

   border-radius: 0;
   color: #fff;
   background-color: rgba(0,0,0,0.4);

}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active {

   color: #fff;
   background-color: rgba(0,0,0,0.7);

}

.btn-light {

   border-radius: 0;
   color: #333;
   background-color: rgb(255,255,255);

}

.btn-light:hover, .btn-light:focus, .btn-light:active {

   color: #333;
   background-color: rgba(255,255,255,0.8);

}

/* Custom Horizontal Rule */

hr.small {

   max-width: 100px;

}

/* Side Menu */

1. sidebar-wrapper {

   z-index: 1000;
   position: fixed;
   right: 0;
   width: 250px;
   height: 100%;
   margin-right: -250px;
   overflow-y: auto;
   background: #222;
   -webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
   -ms-transition: all 0.4s ease 0s;
   -o-transition: all 0.4s ease 0s;
   transition: all 0.4s ease 0s;

}

.sidebar-nav {

   position: absolute;
   top: 0;
   width: 250px;
   margin: 0;
   padding: 0;
   list-style: none;

}

.sidebar-nav li {

   text-indent: 20px;
   line-height: 40px;

}

.sidebar-nav li a {

   display: block;
   text-decoration: none;
   color: #999;

}

.sidebar-nav li a:hover {

   text-decoration: none;
   color: #fff;
   background: rgba(255,255,255,0.2);

}

.sidebar-nav li a:active, .sidebar-nav li a:focus {

   text-decoration: none;

}

.sidebar-nav > .sidebar-brand {

   height: 55px;
   font-size: 18px;
   line-height: 55px;

}

.sidebar-nav > .sidebar-brand a {

   color: #999;

}

.sidebar-nav > .sidebar-brand a:hover {

   color: #fff;
   background: none;

}

1. menu-toggle {

   z-index: 1;
   position: fixed;
   top: 0;
   right: 0;

}

1. sidebar-wrapper.active {

   right: 250px;
   width: 250px;
   -webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
   -ms-transition: all 0.4s ease 0s;
   -o-transition: all 0.4s ease 0s;
   transition: all 0.4s ease 0s;

}

.toggle {

   margin: 5px 5px 0 0;

}

/* Header */

.header {

   display: table;
   position: relative;
   width: 100%;
   height: 100%;
   background: url() no-repeat center center scroll;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

}

/* About */

.about {

   padding: 50px 0;

}

/* Services */

.services {

   padding: 50px 0;

}

.service-item {

   margin-bottom: 30px;

}

/* Callout */

.callout {

   display: table;
   width: 100%;
   height: 418px;
   color: #fff;
   background: url() no-repeat center center scroll;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   background-position-y: -46px;

}

/* Portfolio */

.portfolio {

   padding: 50px 0;

}

.portfolio-item {

   margin-bottom: 30px;

}

.img-portfolio {

   margin: 0 auto;

}

.img-portfolio:hover {

   opacity: 0.8;

}

/* Call to Action */

.call-to-action {

   padding: 50px 0;

}

.call-to-action .btn {

   margin: 10px;

}

/* Map */

.map {

   height: 500px;

}

@media(max-width:768px) {

   .map {
       height: 75%;
   }

}

/* Footer */

footer {

   padding: 100px 0;

}