style.scss

/*!
Theme Name: Digital Signage UAL
Description: A digital signage solution with category-based displays for UAL colleges. Based on Digital Sign by Nate Jones
Author: Mike Kelly, Nate Jones
Author URI: http://arts.ac.uk
Version: 0.1
Tags: digital signage, signage, ual
*/

// SASS moves these import statments above the comments at the top of this page
// This may break the theme in earlier versions of Wordpress. (Versions < 3.3 ?)
@import "css/logos.data.svg.min.css";
@import "css/mixins.scss";

// colours
$color-background: #666; // page bg and post panels. Posts need a bg to cover other queued posts
$color-header: #000;

// hide admin bar
html body {
    margin-top: -28px !important;
}
#wpadminbar {
	display:none;
}
header[role="banner"] {
    background-color: $color-header;
    -webkit-box-shadow: 4px 0px 10px 0px rgba(0,0,0,.4); 
	-moz-box-shadow: 4px 0px 10px 0px rgba(0,0,0,.4); 
	box-shadow: 4px 0px 10px 0px rgba(0,0,0,.4);
	z-index: 99;
	position: relative; // fix z-index of shadow
}
footer[role="contentinfo"] {
    background-color: $color-header;
}
#sidebar {
	position: absolute;
	right: 0;
	top: 0;
	.widget-title {
		color: #FFF;
    	background-color: #000;
    	border-radius: 0;
    	padding: 10px 20px;
	}
	li {
		list-style: none;
	}
	// calendar events, oxford plugin
	ul.iCalEvents li {
		font-size: 2.2rem;
		list-style: square inside;
	}
}
.post {
	background-color: $color-background;
}
.post-box {
	display: none;
}
#contents-list {
	padding: 20px;
	list-style: none;
	li {font-size: 2.4rem;}
}
#dashboard-link {
    background-position: 0 0;
    display: block;
    right: 100px;
    position: absolute;
    top: 30px;
}
#dashboard-link a, #dashboard-link a:active {
	border-bottom:0;
}
#howto ol li {
	font-size: 2rem;
	list-style: decimal inside;
}
#info ul li{
	font-size: 2rem;
	list-style: square inside;
}
.ual-logo-desktop {
    min-height: 120px;
    padding-left: 12px;
}
.ual-logo-desktop .icon-ual, .ual-logo-desktop .icon-ual-wimbledon, .ual-logo-desktop .icon-ual-lcf, .ual-logo-desktop .icon-ual-lcc, .ual-logo-desktop .icon-ual-csm, .ual-logo-desktop .icon-ual-chelsea, .ual-logo-desktop .icon-ual-camberwell, .ual-logo-desktop .logo-ual, .ual-logo-desktop .logo-ual-wimbledon, .ual-logo-desktop .logo-ual-lcf, .ual-logo-desktop .logo-ual-lcc, .ual-logo-desktop .logo-ual-csm, .ual-logo-desktop .logo-ual-chelsea, .ual-logo-desktop .logo-ual-camberwell {
    background-position: 0 0;
    display: block;
    height: 96px;
    left: 36px;
    position: absolute;
    top: 16px;
    width: 270px;
}
.ual-logo-tab-mobile .icon-ual-mobile, .docs-logo .icon-ual-mobile, .style-guide .ual-logo-tab-mobile, .style-guide .docs-logo, .ual-logo-tab-mobile .logo-ual-mobile {
    background-position: 0 0;
    display: block;
    height: 36px;
    margin-bottom: 0.375em;
    margin-top: 0.375em;
    width: 54px;
}
@media only screen and (min-width: 960px) {
	.ual-logo-tab-mobile, .docs-logo {
	    display: none;
	}
}
@media only screen and (min-width: 960px) {
	.style-guide .ual-logo-tab-mobile, .style-guide .docs-logo {
	    display: block;
	}
}
@media only screen and (min-width: 600px) and (max-width: 959px) {
	.ual-logo-desktop {
	    display: none;
	}
}
@media only screen and (max-width: 599px) {
	.ual-logo-desktop {
	    display: none;
	}
}
.logo {
    display: block;
    float: left;
    margin-left: 0;
    margin-right: -100%;
    padding-bottom: 1.5em;
    padding-top: 2.25em;
    width: 23.3964%;
}
@media only screen and (min-width: 600px) and (max-width: 959px) {
	.logo {
	    margin-bottom: 0;
	    padding-left: 12px;
	}
}
@media only screen and (max-width: 599px) {
	.logo {
	    clear: both;
	    display: block;
	    float: left;
	    margin-bottom: 0;
	    margin-left: 0;
	    width: 100%;
	}
}
.logo img {
    max-width: none;
}
.service-manual .logo {
    display: block;
    float: left;
    margin-left: 0;
    margin-right: -100%;
    width: 4.25848%;
}

/*
   Customized Adjustments of Foundation for WordPress
*/
/* Foundation-specific presentation CSS by ZURB */
body { padding-bottom: 60px; width: 100%; background: $color-background; border: none; max-width: 100%; }
div.highlight { margin-bottom: 12px; }
img.beta { position: absolute; top: 0px; right: 0px; }

/*
   Styling Basic WordPress Outputs
*/
.entry-content { overflow-y:hidden; }

/* Images */
.entry-content img { padding-right:2%; }

/* The Link */
.entry-content a.panellink { 
	font-size: 24px; font-size: 2.4rem;
	float:right;
	margin-top:-24px;
 }

/*
   Structure
*/

html,body, #container, .conatiner, #main, #content, .post-box{
	margin:0;
	padding:0;
}
ul, ol { list-style: none; }
.row, .row .row {
	margin:0;
	padding:0;
	width:100%;
}
.column, .columns { 
	margin-left: 0; 
	min-height: 1px; 
	position: relative; 
}
.push-one { left: 7% }
.centered { 
	display:block; 
	position:relative; 
	float: none; 
	margin: 0 auto; 
}
.shadow { 
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,.4); 
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,.4);
}

#location {
	display:inline-block;
	position:absolute;
	z-index: 99;
	top:0;
	right:0;
	text-align: right;
	padding:1% 2%;
	background: rgba(0,0,0,.4);
	color:#fff;
	text-shadow:1px 1px 0px #444;
	font-size: 20px; font-size: 2rem;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-left-radius: 8px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}


/*
    BODY GRADIENTS thanks to colorzilla's Ultimate CSS Gradient Generator :: http://www.colorzilla.com/gradient-editor/
*/
div {  
	.red {
		background: #cc0000; /* Old browsers */
		background: -moz-linear-gradient(top,  #cc0000 0%, #cc0000 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc0000), color-stop(100%,#cc0000)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #cc0000 0%,#cc0000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #cc0000 0%,#cc0000 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #cc0000 0%,#cc0000 100%); /* IE10+ */
		background: linear-gradient(top,  #cc0000 0%,#cc0000 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
	}
	.teal {
		background: #00b7ea; /* Old browsers */
		background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* IE10+ */
		background: linear-gradient(top,  #00b7ea 0%,#009ec3 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
	}	
	.gray {
		background: #606c88; /* Old browsers */
		background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* IE10+ */
		background: linear-gradient(top,  #606c88 0%,#3f4c6b 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */	
	}
	.orange {
		background: #ffa84c; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
		background: linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
	}	
	.pink {
		background: #ff5db1; /* Old browsers */
		background: -moz-linear-gradient(top,  #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* IE10+ */
		background: linear-gradient(top,  #ff5db1 0%,#ef017c 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */	
	}
	.purple {
		background: #e570e7; /* Old browsers */
		background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
		background: linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */	
	}
	.black {
		background: #7d7e7d; /* Old browsers */
		background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
		background: linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
	}
	.blue {
		background: #499bea; /* Old browsers */
		background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* IE10+ */
		background: linear-gradient(top,  #499bea 0%,#207ce5 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
	}
	.green {
		background: #9dd53a; /* Old browsers */
		background: -moz-linear-gradient(top,  #9dd53a 0%, #7cbc0a 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* IE10+ */
		background: linear-gradient(top,  #9dd53a 0%,#7cbc0a 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
	}
}

/*
   Typography
*/
body { font-family: "Magra", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; }
h1, h2, h3, h4, h5, h6, p { 
	font-weight: 500; 
	font-family: "Magra", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}
h1 { 
	color: #fff;
	font-size:60px; font-size: 6rem;
}
h2 { font-size:40px; font-size: 4rem; }
h6 {
	font-size:26px; font-size: 2.6rem;
}
p { font-size: 30px; font-size: 3rem; }
.black p, .black h2, .gray p { color:#dadada; }
.black a, .gray a { color:#dadada; text-decoration:none; border-bottom:.1rem dotted #dadada; }
a, a:hover, a:focus, a:active { color:#fff; text-decoration:none; border-bottom:.1rem dotted #fff; }

/*
   Footer
*/
	footer {
		background-color: rgba(0,0,0,.4);
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,.4)));
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
		background-image: -moz-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
		background-image: -ms-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
		background-image: -o-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,.4));
		background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.4));
		width:100%;
		min-height: 12%;
		position:fixed;
		display:block;
		z-index: 99;
		bottom:0;
		left:0;
		padding:0!important;
		-moz-background-clip: padding;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		-webkit-box-shadow: -4px 0px 10px 0px rgba(0,0,0,.4); 
		-moz-box-shadow: -4px 0px 10px 0px rgba(0,0,0,.4); 
		box-shadow: -4px 0px 10px 0px rgba(0,0,0,.4); 
		color:#fff;
		text-shadow:1px 1px 0px #444;
	}
		footer article { margin:0!important; padding:0; overflow:visible; border-right:solid 1px #d8d8d8; min-height:100%; height:100%; }
			footer article:last-child { border-right:none; }

		.footer-section { padding: 7px 0 14px 0; font-size: 13px; font-size: 1.3rem; font-weight: normal;  margin:0; display:block; display:block; position:relative; overflow:hidden; height:100%; max-height:100%; }
			footer .column, footer .columns { padding:0 7px !important; }
			footer .textwidget { padding: 0 1.5%; }
			footer ul#twitter_update_list li a { display:none; }
			footer ul#twitter_update_list li span a { display:inline; }


/*
    CLOCK thanks to @Bluxart :: http://www.alessioatzeni.com/blog/css3-digital-clock-with-jquery/
*/
.clock {width:98%; margin:-20px auto 0 auto; padding: 0; color:#fff }

#Date { font-size: 24px; font-size:2.4rem; text-align:center; margin-top:0; display:block; float:none; position:relative; }

.clock ul { width:100%; margin:0 auto !important; padding:0px; list-style:none; text-align:center; display:block; }
.clock ul li { display:inline; text-align:center; font-size: 60px; font-size: 6rem; font-weight: normal; margin:0; color:#fff; }

#point { padding:0; position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; }
	/* Simple Animation */
	@-webkit-keyframes mymove 
	{
	0% {opacity:.8; }
	50% {opacity:.1; }
	100% {opacity:.8;  }	
	}
	
	@-moz-keyframes mymove 
	{
	0% {opacity:.8; }
	50% {opacity:.1; }
	100% {opacity:.8;  }	
	}


/*
   Weather
*/	
#weather { overflow:hidden; margin:-4px 0 0 0; padding:0; height:100%; max-height:100%; display: block; }
	[class^="weather-"]:before, [class*=" weather-"]:before {
	  font-size: 90px; font-size: 9rem;
	
	}
	.temperature {
		font-size:40px; font-size: 4rem;
		padding: 0;
		position:relative;
		margin:-14px 0 7px 0;
	}	
	.condition {
		font-size:22px; font-size: 2.2rem;
		text-align: right;
		padding: 0;
		position:relative;
		margin:0 0 7px 0;
		display: inline-block;
	}

/*
   Orbit
*/
div.orbit-wrapper div.timer { display:none; }
div.orbit-wrapper div.slider-nav { display: none; }

		
/*
   Mobile
*/
@media handheld, only screen and (max-width: 767px) {
	.row { width:100%; }
	div.orbit-wrapper div.slider-nav { display: block; }
	div.orbit-wrapper div.slider-nav span { top: 40%; margin-top: -25px; cursor: pointer; }
	.entry-content img { padding-right:4.2%; }
	h1 { font-size:40px; font-size: 4rem; }
	h2 { font-size:25px; font-size: 2.5rem; }
	p { font-size: 20px; font-size: 2rem; }
	.entry-content { overflow-y:visible; }
	div.post { padding-bottom:14px; border-top: solid 1px #999; border-bottom:solid 1px #828282; }
		div.post:first-child { border-top:none; }
		div.post:last-child { border-bottom:none; }
}

/*
   Tablet
   (include .touch for each to target with Modernizr)
*/
@media only screen and (max-width: 1280px) and (min-width: 768px) {

}


/*
   Non-mobile
*/
@media screen and (min-width: 767px) {
	html,body, #container, .container, #main {
			width:100%;
			min-width:100%;	
	}
	#content, .post-box, .post {
			height:100%;
			min-height:100%;
			width:100%;
			min-width:100%;	
	}
}