style.css

/*Reset=======================*/
html, body, div, section, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, em, font, img, ins, q, s, small, strike, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } table { border-collapse: collapse; border-spacing: 0; }

/*Layout*/
body{
	background: #f2f2f2 url(img/header-bg.png) repeat-x;
	color: #343434; 
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 22px;
	line-height: 1.3em;  
	-webkit-text-size-adjust: 100%;}

.wrapper{
	max-width: 1300px; 
	margin: 0 auto;
	overflow: hidden;}

.banner{
	width: 1280px;
	margin: auto;
	height: auto;
}

/*MAIN MENU*/

#header {min-height: 290px;}

#menu {background: #ffab0e; margin: 0;}

#menu li{
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	list-style: none;
	font-size: 25px;
	display: inline;
	}

#menu a {
	color: white;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-radius: 10px;
	text-decoration: none;
	padding: 5px 20px;
	margin: 6px 0 0 15px;
	text-shadow: 1px 1px 1px #d48e0c;
	display: inline-block;
	transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;
	
}

#menu a:hover {
	border-top: 3px solid white;
	border-bottom: 3px solid white;
	background: transparent;
}

#menu .current {
	background: #00747a;
	border-radius: 10px;
	box-shadow: inset 5px 5px 5px 0px rgba(50, 50, 50, 0.2);
}

#menu .current:hover {
	background: #00747a;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
}

#logo {
	background: url(img/logo.png) no-repeat;
	display: block;
	margin-top: 13px;
	float: left;
	height: 258px;
	width: 257px;
}

#intro {
	margin: 90px 0 0 280px; 
	width: 483px;
	font-size: 30px; 
	text-transform: uppercase;
	line-height: 1.8em; 
}

#intro-tag {
	display: block;
	border-top: 2px solid #d0d0d0;
	font-size: 27px;
}

/*BREADCRUMB*/
#breadcrumb {margin: 45px 0 0 280px; font-size: 18px; }
#breadcrumb .current {color: #4c4c4c;}
#breadcrumb .current:hover {background: none;}

/*CONTENT & SIDE*/
#main {float: left; margin: 0 -500px 0 0px; width: 100%;}
#side {float: right; width: 350px; }

#content {
	background: #fff; 
	padding: 20px;
	margin-right: 350px;
}

#content-wide {background: #fff; padding: 20px;}


/*Right side menu*/
#sub-menu {
	border-bottom: 1px solid #e2e2e2;
	border-top: 1px solid #fff;
}

#sub-menu ul {margin: 0;}

#sub-menu li {
	list-style: none; 
	text-transform: uppercase;
	margin: 0;
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #fff;
}

#sub-menu li li {
	text-transform: none;
	border: 0 none;
	background: red;
}

#sub-menu a {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 25px;
	color: #4c4c4c;
	display: block;
	padding: 15px;
}

#sub-menu a:hover {background: #fff;}

#sub-menu li li a {background: #3ebba7; color: #fff; padding: 10px 15px; text-shadow: 1px 1px 1px #005357;}

#sub-menu .current   {background: #00747a;  border: 0 none;}
#sub-menu .current a {color: #fff;}
#sub-menu .current a:hover {background: #00747a;}

#sub-menu .current li a:hover {background: #4dd0bb;}

#sub-menu li ul .current a,
#sub-menu li ul .current a:hover {background: #30a491; }


/*FOOOOOTER*/
#footer {
	display: block;
	min-height: 230px;
	font-size: 18px;
	color: #6a6a6a;
	background: #fff;
	margin-top: 30px;
	padding-top: 35px;
	box-shadow: 0px -5px 13px 0px rgba(50, 50, 50, 0.05);
}
	
#footer td {vertical-align: top; padding: 15px auto; }

.footer-intro {padding-right: 30px; width: 35%; }
.footer-social {padding: 0px 30px 0 30px; border-left: 2px solid #e9e9e9; border-right: 2px solid #e9e9e9; width: 30%; }
.footer-copy {padding-left: 30px; width: 35%; }
.footer-copy span {line-height: normal; font-size: 17px; padding-top: 30px;}

#footer ul {margin: 0;}
#footer li {list-style: none; padding: 25px 0 10px 60px; margin: 0; }
#footer a {display: inline-block;}
#footer .facebook {background: url(img/social-media-facebook.png) no-repeat left 50%;}
#footer .irc {background: url(img/social-media-irc.png) no-repeat left 50%;}
#footer .sourceforge {background: url(img/social-media-source-forge.png) no-repeat left 50%;}

/*Typography*/
h1, h2, h3, h4, h5 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	margin: .8em 0 .3em 0;
}

h1 {
	font-size: 45px;
	display: block; 
	background: #ffab0e;
	border-radius: 7px;
	padding: 25px 20px;
	color: #fff ;
	text-shadow: 1px 1px 1px #d48e0c;
	background: #ffab0e;
		background: -moz-linear-gradient(left,  #ffab0e 58%, #ff960e 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(58%,#ffab0e), color-stop(100%,#ff960e));
		background: -webkit-linear-gradient(left,  #ffab0e 58%,#ff960e 100%);
		background: -o-linear-gradient(left,  #ffab0e 58%,#ff960e 100%);
		background: -ms-linear-gradient(left,  #ffab0e 58%,#ff960e 100%);
		background: linear-gradient(to right,  #ffab0e 58%,#ff960e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffab0e', endColorstr='#ff960e',GradientType=1 );
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 30px;
}

	#content h1:first-child,
	#content-wide h1:first-child {margin-top: 0;} /*Small exception for the fact that we want the first header of the content to be aligned nicely to the top*/

h2 {font-size: 40px;}
h3 {font-size: 25px; font-weight: 700;}
h4 {font-size: 30px;}

p {margin-bottom: 1em;}

ul, ol {margin-left: 1.1em;margin-bottom: 1em;}
ul {list-style: circle;}
li {margin-bottom: .5em;}

a {color: #00747a; text-decoration: none; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;}
a:hover {background: #d5eff0;}

/*Course boxes*/
.content-table {margin-left: -10px; width: 490px; float: left;}
.element-container {display: inline-block; float: left; width: 433.333px;}
.course-box {background: #fff; padding: 20px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; margin-top: 15px;}
.course-box h4 {margin-top: 0; display: inline;}
.course-box-button {display: block; text-align: center; padding: 15px; margin: 0 -20px -20px -20px;}
.uni-logo {margin: -20px -20px 0px 0; height:50px; width: 50px; float: right; vertical-align: text-top; box-shadow: -2px 2px 0px 0px #f2f2f2;}

.red,
.red:hover	{background: #cc3333; }
.green		{background: #3ebba7;}
.green:hover	{background: #00747a;}

.course-box .status,
.course-box .date {display: block; color: #fff; text-shadow: 1px 1px 1px #696969;}

.course-box .status {font-size: 30px;}

/*News feed*/
.feed {border-bottom: solid 3px #f2f2f2; width: 350px;}
.feed h5 {margin: 5px 20px -3px 5px; font-size: .8em; font-weight: 600;}
.feed p {font-size: .9em}
.feed td {vertical-align: top;}
.feed-logo {margin: 5px 0 3px 0; height:50px; width: auto; }
.feed-date {font-size: .75em; color: #b0b0b0}

/*Media queries======================*/		
@media only screen and (max-width: 870px) {/* rules that only apply for canvases narrower than 800px */
	#menu 			{float: left;}
	#menu a 		{padding: 5px 10px;}
	#logo 			{width: 100%; background-color: white; background-position: 50% 50%;}
	#intro 			{margin: 0 auto;}
	#breadcrumb 	{margin: 0 0 10px 10px;}
	#content		{margin-right: 0px; display: block;}
	#side 			{width: 100%; margin-top: 25px;}
	#side ul 		{margin-left: 0;}
	.footer-social,
	.footer-copy 	{padding: 0; border: 0 none;}
	#footer 		{padding: 0 25px; margin: 0;}
	#main table,
	#footer table 		{margin-right: 0;}
	#main table td,
	#footer table td 	{float: left; margin: 25px 0 0 0; width: 100%;}
}


/*MATERIALS LAYOUT*/
#materials {background-image: none;}

#scroll-to-top {position: fixed; right: 15px; bottom: 15px; display: block; height: 70px; width: 70px; background: url(img/scroll-to-top.png) #3ebba7 no-repeat 50% 50%; border-radius: 5px;}
#scroll-to-top:hover {background-color: #00747a;}

#materials-menu 	{width: 100%; background: #00747a;}
#materials-menu td 	{border: 1px solid #139197; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 30px;}
#materials-menu a 	{color: #fff; padding: 20px 15px; display: block;}
#materials-menu a:hover,
#materials-menu .current {background: #139197;}
#materials-menu .current {font-weight: bold;}
#back-to-mooc 	{border: 1px solid #ffab0e; background: url(img/back-to-mooc.png) #ffab0e no-repeat 50% 50%;}
#university 	{border: 1px solid #b7b7b7; background: url(img/university.png) #b7b7b7 no-repeat 50% 50%;}

#back-to-mooc,
#university {vertical-align: middle; width: 150px;}

#back-to-mooc a,
#university a { min-height: 80px;}
#back-to-mooc a:hover,
#university a:hover  {background: transparent;}

.tooltip{
    display: inline;
    position: relative;
    background: #0a6266;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    bottom: 10px;
    color: #fff;
    content: attr(title);
    font-size: 16px;
    left: 0;
    padding: 10px 0px;
    position: absolute;
    z-index: 98;
    width: 100%
}

#copyright {line-height: normal; font-size: 18px; margin: 35px 0 25px 0;}

#index-menu	{font-family: 'Open Sans Condensed', sans-serif;  font-size: 40px; line-height: normal;}
#index-menu ol li {list-style:none; font-size: 30px;}
#index-menu ol {margin: 0 0 .2em 0;}
#index-menu li {margin: 0; }

.code {background: #393939; color: #fff; padding: 15px; font-family: Courier; border-radius: 5px; margin-bottom: 1em;}
.code p {margin-bottom: 0;}
.code-comment {color: #cc3333;}

.code-highlight {color: #cc3333; background: #f7e4e4;}

.mission {
	background: #3ebba7 url(img/arrow-down.png) no-repeat right 50%;
	border-radius: 7px; color: #fff; display: block; padding: 25px 20px; text-shadow: 1px 1px 1px #2a8f7f;}

.mission:hover {background: #139197  url(img/arrow-down.png) no-repeat right 50%;}

/*Helpers======================*/
.clear			{clear:both;}
.left			{float: left;}
.right			{float: right;}
.block			{display: block;}
.none			{display: none;}
.absolute		{position: absolute;}

.simple-shadow	{border-right: 3px solid #eaeaea; border-bottom: 3px solid #eaeaea;}