Domoticz

Open source Home Automation System
https://forum.domoticz.com/

Layout almost done, but, something looks wrong

https://forum.domoticz.com/viewtopic.php?t=25200

Page 1 of 1

Layout almost done, but, something looks wrong

Posted: Monday 08 October 2018 20:56
by EdwinK
I think I've seen something like this posted before, but can't find the post anymore.

As you can see, the data on these tiles (and others) isn't correctly displayed. They should be next to the icon, instead of under it.
data under icon
data under icon
Screen Shot 2018-10-08 at 20.52.07.png (180.36 KiB) Viewed 854 times
data next to icon
data next to icon
Screen Shot 2018-10-08 at 20.55.09.png (195.47 KiB) Viewed 854 times
This is another, older dashboard, but this is what I would like.

Re: Layout almost done, but, something looks wrong

Posted: Monday 08 October 2018 21:49
by Lokonli
Which dashticz version are you using? master/beta?
You have a modified custom.css? Can you post it here as well?
Any change in creative.css?

Re: Layout almost done, but, something looks wrong

Posted: Monday 08 October 2018 22:42
by EdwinK
I think it's the beta of Dashticz

custom.css
Spoiler: show

Code: Select all

.col-xs-12.items {
   font-size: 15px;
}

.trash .state div.trashtoday	{ font-size: 20; font-weight: 3; margin-left: 20px; font-weight: bold; font-variant: small-caps;}
.trash .state div.trashtomorrow { font-size: 20px; font-weight: 2; margin-left: 20px; font-variant: small-caps;}
.trash .state div.trashrow		{ font-size: 20px; font-weight: 1; margin-left: 20px; font-variant: small-caps;}
.img.trashcan           		{ height: 50px; width: 50px; margin-left:0px; margin-top: 20px;}
div.col-icon { width: 100px !important; max-width: 100px !important;}

/* Background blocks */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */

	background-clip: padding-box;
	border-radius: 15px;				/* Round corners */ 
}

.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa-male:before{font-size: 36px;}
Not sure if I ever changed anything in creative.css (or I forgot about it)
Spoiler: show

Code: Select all


#loaderHolder{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:99999;
	text-align:center;
}

.loader {
	margin:0 auto;
	border: 10px solid #f3f3f3;
	border-top: 10px transparent;
	border-bottom: 10px transparent;
	border-radius: 50%;
	width: 320px;
	height: 320px;
	animation: pulsate 2s ease-out;
	animation-iteration-count: infinite;
}
@keyframes pulsate {
	0% {transform: scale(.1); opacity: 0.0;}
	50% {opacity: 1;}
	100% {transform: scale(.8); opacity: 0;}
}
.loaderHeader {
	color: #FFF;
	font-size: 1.5em;
	margin-top:50px;
}

.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-container.edit{
	width:auto;
	float: right;
    width: calc(100% - 220px);
}
.swiper-wrapper {
	height: 100%;
}
.swiper-slide {
	background: #000;
}
.swiper-slide {
	height: auto !important;
	min-height: 100% !important;
}
.swiper-pagination-bullet-active {
	background-color:#fff !important;
}



.currencydown {
	background: rgba(132,22,12,0.7) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
}


.currencyup {
	background: rgba(0, 128, 0, 0.7) !important;
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
}

.fa-tv:before  {font-size:26px;}
.col-currency {font-size: 18px;text-align:right;}
.SonarrItem {
    clear: both; 
    width:100%;  
    Position:relative;
    overflow:hidden;  
}
.SonarrBanner {
    width:100%; 
    padding:5px;
}

.SonarrData {
    float:Left; 
    width:75%;
}
.SonarrPoster {
    float:Left; 
    width:25%;  
    padding: 0px 5px 5px 10px;
}
.SonarrData span {
    display: block;
}
.SonarrBigTitle {
    transform: rotate(90deg);
    padding-top: 15px;
    font-size:24px;
    text-transform: uppercase;
}
.SonarrTitleShow {
    font-size: 12px;
    font-weight: bold;
}
.SonarrEpisode {
    color: darkgray;
}
.SonarrDownloaded {
    color: lightskyblue;
}
.SonarrAirDate{
    color: darkgray;
}

.trashcan {
	margin-left:-4px;
	height:30px;
}
.modal {
	z-index:9999;
}
.newblocksHolder {
	display:none;
	width: 220px;
    background: rgba(0,0,0,0.9);
    height: 100%;
    float: left;
}

.newblocksHolder div.title {
	color: #fff;
    padding: 5px;
    margin: 5px;
    font-size: 17px;
    font-weight: bold;
	height:35px;
}

.newblocksHolder .newblocks.plugins {
    height: 170px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.newblocksHolder .newblocks.domoticz {
    height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden;
}
.newblocksHolder .newblocks > div {
	border: 1px solid #AAA;
    background: rgba(255,255,255,0.2);
    margin: 5px;
    padding: 5px;
    color: #fff;
    box-sizing: border-box;
}
.skycon {
	margin: 10px auto 10px auto;
    display: block;
    width: 100%;
    max-width: 125px;
}

.skyconsmall {
    display: block;
    width: 100%;
    max-width: 125px;
}


/* BEGIN || Popup modal settings (need to sort and arrange first) */
.nav-pills>li>a {
	border-radius: 6px 6px 0px 0px;
	color: #000;
	font-size: 16px;
	background-color: #f6f6f6;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
	background-color: #555;
}

.modal-header {
	border-bottom: 0px !important;
}

.modal-body {
    position: relative;
    padding: 0px 0px 0px 0px;
}

.modal-body .glyphicon {
	color:#A80002;
	cursor:help;
}
.modal-dialog-settings {
	min-width: 50% !important;
	margin: 80px auto;
}

.nav {
	border-bottom: 1px solid #e5e5e5;
	padding-left: 10px;
	padding-right: 10px;
}

.btn {
	text-transform: none !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}

.btn-secondary {
	color: #292b2c !important;
	border: 1px solid #ccc !important;
	background-color: #fff !important;
	padding: .5rem 1rem !important;
	border-color: #ccc !important;
}

.btn-primary {
	color: #fff;
	background-color: #5cb85c !important;
	padding: .5rem 1rem !important;
	border-color: #5cb85c !important;
}

.row {
	margin-bottom: 10px !important;
}

.label {
	font-weight: 400px !important;
}

.tab-pane {
	padding:10px !important;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #000;
}

.modal-dialog {
    min-width: 80% !important;
    margin: 80px auto;
}

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
	cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: 0px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: 0px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}


/* END || Popup modal settings (need to sort and arrange first) */


.containslog .items {
	height: 154px;
    overflow: auto;
    width: calc(100% - 40px);
}

.containslog .items .level0{ color:#c70626; }
.containslog .items .level1{ color:#067676; }
.containslog .items .level2{ color:#ffffff; }

.containslog .items .level0.popup{ color:#c70626; }
.containslog .items .level1.popup{ color:#067676; }
.containslog .items .level2.popup{ color:#727272; }
				
				
.containslog.popup {
	height: 100% !important;
	overflow:auto;
}
.containslog.popup .items {
	min-height: 300px;
}

.colbar.transbg {
	padding: 6px 5px !important;
}
.colbar.transbg .logo {
    font-size: 20px;
    font-weight: bold;
    margin-top: -4px;
    margin-bottom: -4px;
}
.colbar.transbg .fab,
.colbar.transbg .fas,
.colbar.transbg .far {
    margin-top: 0px;
    font-size: 20px !important;
	margin-left: 10px;
}
.colbar.transbg .miniclock span{
    font-size:15px !important;
	font-weight:bold !important;
}
.colbar span.settings,
.colbar span.fullscreen {
	cursor:pointer;
}
a.playlist {
    margin: 5px !important;
    display: inline-block;
    border: 1px solid #ccc;
}

.containsspotify #current {
	overflow: hidden;
	background-color: #282828;
}

.containsspotify #current .current_image {
	float: left;
	margin:2px 0px 5px 2px;
	width: calc(32% - 2px);
}

.containsspotify #current .current_image img {
	max-width:64px;
}
.containsspotify #current .current_info {
	float: left;
	padding-left:10px;
	width: calc(68%);
}
.containsspotify #current .current_artist {
	font-weight: bold;
}

.containsspotify #current .current_album {
	overflow: hidden;
    max-height: 33px;
}

.containsspotify #current .current_track {
	overflow: hidden;
    max-height: 33px;
}
.containsspotify .change {
	background-color: #282828;
	display: block;
	margin-top: -4px;
	padding: 3px;
	padding-left: 4px;
	color: #fff;
}

.containsspotify .fas {
	font-size:30px !important
}

.containsspotify .shuffleoff {
	color: #aaa;
}

.containsspotify select.devices{
	width: 100%;
    max-width: 100%;
    color: #fff !important;
    background-color: #282828;
    border: 0px;
    padding-left: 0px;
}

.containsspotify select.devices option{
    color: #fff !important;
}

.spotback {
	margin:5px;
}
.spottrack {
	background-color:#fff;
	width:93%;
	border:1px solid #ccc;
	height:60px;
	margin:5px;
}
.spotlist {
	background-color:#fff;
	width:93%;
	border:1px solid #ccc;
	height:77px;
	margin:5px;
}
/* Thermostat CSS: */

.update {
	background: rgba(0,0,0,0.6);
	border-radius: 0px;
	color: #fff;
	bottom:0;
	font-weight:bold;
	right:0;
	padding:10px;
	position:absolute;
	z-index:9999;
}
.editmode {
	color:white;
	background-color:red;
	bottom:0;
	font-weight:bold;
	right:0;
	padding:10px;
	position:absolute;
	z-index:9999;
}
.input-groupBtn .btn-number {
    opacity: 0.5;
    color: white;
    background-color: rgb(34, 34, 34);
	border-radius: 0px;
    padding: 6px 10px 6px 10px;
    line-height: 20px;
}
.input-groupBtn.input-chevron .btn-number {
	padding: 5px 10px 5px 10px
	
}
.input-groupBtn .btn-number.plus{
	border-bottom:0px;
	padding-bottom:7px;
}
.input-groupBtn li {
	position: -webkit-sticky;
  	position: sticky;
	z-index:9997;
	right:1px;
}
.input-groupBtn li.down {
	top:35px;
}
.input-groupBtn .stop {
	z-index:9997;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
      
	transform: rotate(45deg);
    top: 0;
    width: 71px;
    height: 33px;
    position: absolute;
    right: 0;
    margin-right: -27px;
    margin-top: 0px;

}

.input-groupBtn.input-chevron {
	right:27px;
}
.input-groupBtn.input-chevron.hidestop {
	right:-5px;
}
.input-groupBtn .btn-number:active,.btn-number:hover {
	color: black; 
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
.input-groupBtn .fa-thermostat {
	vertical-align: middle;
	font-size: 20px !important;
}
.title-input {
	font-size: 20px !important; 
	margin-top:-2px;
	display: inline-block;
}
.trafficmap {
	height: 100%;
}
.col-xs-1.block_trafficmap, 
.col-xs-2.block_trafficmap
, .col-xs-3.block_trafficmap, .col-xs-4.block_trafficmap, .col-xs-5.block_trafficmap, .col-xs-6.block_trafficmap, .col-xs-7.block_trafficmap, .col-xs-8.block_trafficmap, .col-xs-9.block_trafficmap, .col-xs-10.block_trafficmap, .col-xs-11.block_trafficmap, .col-xs-12.block_trafficmap {

	padding-left: 13px !important;
    padding-right: 13px !important;
	height:200px !important;
}

.iconheating {
	margin-top: 2px;
}
.input-groupBtn {
    position: absolute;
	z-index:9999;
    right: -5px;
    list-style: outside none none;
    padding: 0px;
    margin: 0;
    top: 0px;
}
@media only screen and (max-width: 1400px) {

	.input-groupBtn.input-chevron .btn-number {
		padding: 7px 10px 7px 10px;

	}
}
@media only screen and (max-width: 1000px) {
	.input-groupBtn .stop {
		width: 60px;
		margin-right: -23px;
		margin-top: -1px;
	}
	.input-groupBtn li {
		top:1px;
	}
	.input-groupBtn li.down {
		top:30px;
	}
	.input-groupBtn .btn-number {
   		padding: 4px 5px 3px 5px;
		line-height: 19px;
	}
	.input-groupBtn.input-chevron .btn-number {
		padding: 5px 7px 5px 7px !important;

	}
	
	.title-input {
		font-size: 14px !important;
		margin-top: 7px;
	}
	.iconheating {
		margin-top: 14px;
	}
}
/************************/
  
@media only screen and (max-width: 767px) {
  .control label {
      font-size: 35px;
  }
}
.lastupdate {
	font-size: 10px;
    color: #bbb;
		white-space:nowrap
}
.graphpopup {overflow:hidden;}
html,
body {
	height: 100%;
	width: 100%;
	background-color:#000;
	overflow:hidden;
}
body {
	font-size:11px;
}
hr {
	border-color: #FFF;
	border-width: 2px;
	max-width: 100%;
	opacity:0.5;
	margin-top:20px;
	margin-bottom:20px;
}

.standby .swiper-slide {
	background-image:none !important;
	background-color:#313131;
}
.standby .far,.standby .far.fa-small,.standby .fas,.standby .fas.fa-small,.standby .fab,.standby .fab.fa-small, {
	color:#fff !important;
}

.standby .row {
	opacity:0.7;
}

.standby .imgblock {
	opacity:0.2;
}


a {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: #F05F40;
}

div.morris-hover-point{
	color:#000 !important;
}
.auto_switches,
.auto_states,
.auto_dimmers,
.auto_media,
.auto_buttons{
	clear:both;
}
a:hover,
a:focus {
	color: #eb3812;
}

.newsWrapper { width:80%; height:106px; overflow:hidden; }
	#newsTicker { padding:0; margin:10px 0 0 15px; color:#333; }

	#newsTicker li {
		min-height:72px;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 14px;
		color:#fff;
	}

.fas.fa-newspaper,
.far.fa-newspaper {
    margin-left: 1px;
}
.fas.fa-lightbulb,
.far.fa-lightbulb {
    margin-top: 1px;
    margin-left: 6px;
}
.hidden {
	display:none;
}
div.mh {
	height:85px;
}
div.mh h3 {
	padding-top:6px;
}
div.big {
	padding-top:20px !important;
	padding-left:18px !important;
}
.sunriseholder,
.sunriseholder .wi{
	font-size:14px !important;
}
.sunriseholder .wi-sunset{
	padding-left:10px;
}
.sunriseholder .wi {
	padding-right:5px;
	padding-top:5px;
}
select,
select option {
 	color:#000 !important;
	width:auto;
	max-width:90%;
}
.title{ font-size:12px;}

.wi {font-size:30px;}
.wi.wi-rain {margin-top:0px;}
.fas {font-size:30px;}
.far {font-size:30px;}
.fab {font-size:30px;}
.fas.fa-small {font-size:20px;}
.fas.fa-thermometer-half {margin-left:8px;margin-top:2px;}
.fas.fa-calendar {margin-left:4px;margin-top:1px;}
.fas.fa-thermometer-half.fa-thermometer-half-switch {margin-left:4px;}
.fas.fa-desktop {margin-top:5px;}
.fas.fa-fire {margin-top:5px;}
.fas.fa-plug {margin-top:5px;}
.fas.fa-music{margin-top:5px;}
.fas.fa-television,
.fas.fa-microchip{margin-left: 3px;
    margin-top: 2px;}
.containshorizon .fas { margin-top:8px; }
.containsnzbget .fas { margin-top:8px; }
.fas.fa-tint {
    margin-left: 5px;
    margin-top: 4px;
}
.fas.fa-trash {
    margin-left: 8px;
}
.fas.fa-bolt {
    margin-left: 8px;
}
.wi.wi-wind-direction {
    margin-left: 4px;
    margin-top: 2px;
}
.fas.fa-toggle-off {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	margin:0px;
	margin-left:15px;
}
.smalltitle h3 {
	font-size:12px !important;
	margin-left:6px;
}
h1 {
	font-size:35px;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.row > div{ 
	padding-right: 0px !important;
    padding-left: 0px !important;
}

.clear {
	clear:both;
}
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
	padding-top:15px;
	padding-bottom:15px;
	border: 7px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.2);
    background-clip: padding-box;
}

.transbg.dark.col-xs-1,
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3,
.transbg.dark.col-xs-4,
.transbg.dark.col-xs-5,
.transbg.dark.col-xs-6,
.transbg.dark.col-xs-7,
.transbg.dark.col-xs-8,
.transbg.dark.col-xs-9,
.transbg.dark.col-xs-10,
.transbg.dark.col-xs-11,
.transbg.dark.col-xs-12 {
	border: 7px solid rgba(255,255,255,0);
    background: rgba(0,0,0,0.5);
    background-clip: padding-box;
}

.weatherfull .transbg {
	padding-top: 9px !important;
    padding-bottom: 10px !important;
}

.block_clock h1,
.block_clock h4 {
	margin-left:0px !important;
}

.block_clock {
	padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.with_controls {
	padding-top: 6px !important;
}

/*
Only add this hover on NON touch devices
*/
@media (hover: hover) {
	
	.transbg.col-xs-1.hover:hover,
	.transbg.col-xs-2.hover:hover,
	.transbg.col-xs-3.hover:hover,
	.transbg.col-xs-4.hover:hover,
	.transbg.col-xs-5.hover:hover,
	.transbg.col-xs-6.hover:hover,
	.transbg.col-xs-7.hover:hover,
	.transbg.col-xs-8.hover:hover,
	.transbg.col-xs-9.hover:hover,
	.transbg.col-xs-10.hover:hover,
	.transbg.col-xs-11.hover:hover,
	.transbg.col-xs-12.hover:hover {
		background: rgba(255,255,255,0.1);
		background-clip: padding-box;
		border: 7px solid rgba(255,255,255,0);
	}
}

.transbg.hover {
	cursor:pointer;
}
.transbg.hover.hovered {
	background: rgba(255,255,255,0.1);
	background-clip: padding-box;
	border: 7px solid rgba(255,255,255,0);
	cursor:pointer;
}

.iconslider {
	cursor:pointer;
}

.cast-button-container {
	padding: 13px !important;
}
.cast-button {
	height: 25px;
	width: 25px;
	padding: 1px;
	vertical-align: middle;
	display: inline;
	--disconnected-color: red;
	--connected-color: green;
}

	.col-xs-1,
	.col-xs-2,
	.col-xs-3,
	.col-xs-4,
	.col-xs-5,
	.col-xs-6,
	.col-xs-7,
	.col-xs-8,
	.col-xs-9,
	.col-xs-10,
	.col-xs-11,
	.col-xs-12 {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

.containsicalendar .transbg {
    padding-left: 11px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.column1.col-xs-5,
.column2.col-xs-5,
.column3.col-xs-2 {
	padding:0px !important;
}
.row {
	margin:0px !important
		
}
.fas.fa-train,.fas.fa-bus{
	margin-left:5px;
	margin-top:3px;
}

.trainrow,
.trafficrow{
    font-size: 14px !important;
}

.trainrow strong,
.trafficrow strong{
    display: inline-block;
}

.col-icon {
	width:40px !important;
}

.col-data {
	width: calc(100% - 45px);
}

.col-no-icon {
	width: calc(100% - 15px);
}

.slider {
	margin-top:7px;
	margin-right: 7px;
}
.weekday {margin-bottom: 5px;}
.ui-widget.ui-widget-content {
	background-color: #aaa;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	width: 20px;
    height: 20px;
    margin-top: -4px;
    margin-left: -4px;
}
.buttonimg { max-height:20px; }
.ml {margin-left:10px;}
.mr {margin-right:10px;}
.navbar-default {
  background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
  color: #F05F40;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eb3812;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #F05F40;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #F05F40 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .navbar-default .navbar-header .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: white;
  }
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #F05F40;
    font-size: 14px;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #F05F40;
  }
}

img.icon {
	max-width:30px;
}

.off.icon {
	opacity:0.4 !important;
}

.on.icon {
	opacity:1 !important;
}


	.blinds .fas.fa-arrow-up,.blinds .fas.fa-arrow-down,.blinds .fas.fa-stop-circle {
		font-size: 20px !important;
    	margin-right: 3px !important;
	}

@media (max-width: 1400px) {
	
	.col-icon {
		width:30px !important;
	}
	img.icon {
		max-width:20px !important;
	}
	.fas,.far,.fab,.wi {
		font-size:15px !important;
	}
	#weather .wi {
		font-size:24px !important;
	}
	.cast-button-container {
		padding: 11px !important;
	}
}
@media (max-width: 975px) {
	div.mh {
		height: 75px;
	}
	.big .weatherdegrees {
		padding-left: 15px;
	}
	.transbg.col-xs-1, .transbg.col-xs-2, .transbg.col-xs-3, .transbg.col-xs-4, .transbg.col-xs-5, .transbg.col-xs-6, .transbg.col-xs-7, .transbg.col-xs-8, .transbg.col-xs-9, .transbg.col-xs-10, .transbg.col-xs-11, .transbg.col-xs-12 {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.cast-button-container {
		padding: 3px !important;
	}
	h1,h4 {
		margin-left:0px !important
	}
	div.big {
		padding-top: 9px !important;
		padding-left: 13px !important;
	}
	img.icon {
		max-width:15px !important;
	}
	.fas,.far,.fab,.wi {
		font-size:15px !important;
	}
	
	.big .wi {
		font-size:30px !important;
	}
	.col-icon {
		max-width:26px !important;
	}
	.col-data {
		width: calc(100% - 30px);
	}

	.trashcan {
		height: 25px !important;
	}

}

.modal-dialog {
    min-width: 90% !important;
}
div.screen {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  color: white;
}

.big .weatherdegrees {
	padding-right:10px;
}
.big .weatherdegrees,
.big .weatherloc {
	display:inline-block;
	margin-top:-2px;
	font-size:24px;
	font-weight:bold;
}

.weatherfull {
	color: #444;
	text-align: left;
	text-shadow: none;
}

.weatherfull > div div {
	text-align: center;
	color:#fff;
}
.weatherfull > div div.day {
	margin-top: 0px;
	font-weight: 300;
	font-size:13px;
}
.weatherfull > div div.temp span { float:none; display:inline-block; }
.weatherfull > div div.temp { font-size: 28px; font-weight:400; }
.weatherfull > div div.temp .nightT { display:block;font-size: 19px;margin-top: -8px; opacity:.7; padding-bottom: 0px}

.weatherfull > div div.icon {
	border-radius: 50%;
	width: 75px;
	height: 48px;
	margin: 0px auto;
}
.weatherfull > div div.icon i { color:#fff !important; }

.weatherfull i {
	font-size:40px !important;
	margin:5px auto 0 auto;
	opacity:.9;
}
.section-heading {
  margin-top: 0;
}

.text-primary {
  color: #F05F40;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-default {
  color: #222222;
  background-color: white;
  border-color: white;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #222222;
  background-color: #f2f2f2;
  border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: white;
}
.btn-default .badge {
  color: white;
  background-color: #222222;
}
.btn-primary {
  color: white;
  background-color: #F05F40;
  border-color: #F05F40;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #ee4b28;
  border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #F05F40;
  border-color: #F05F40;
}
.btn-primary .badge {
  color: #F05F40;
  background-color: white;
}
.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
	padding:0px 5px 0px 5px;
	font-size:10px;
	margin-right:5px;
}
.btn-xl {
  padding: 15px 30px;
}
.btn-group .btn {
	font-size: 12px;
	font-weight: 400;
	padding:2px 6px;
	margin-right: 2px;
}

@media (max-width: 975px) {
	.btn-group .btn {
		font-size: 12px !important;
	}
}

.btn-group .btn.active {
	font-weight:700;
}
.modal-login {
    max-height: 90%;
    max-width:90%;
    min-width: 25% !important;
    margin: 0 auto;
    margin-top: 200px;
}
.content-login {
    display: block;
    font-family: Verdana;
    font-size: 22px;
    line-height: 22px;
    padding: 10px 0 0;
    color: #000;
}
.login{
	text-align: center;
	padding: 20px;
}
.login input[type=text]{
	height: 30px;
	border: 1px solid rgba(0,0,0,0.6);
	border-radius: 2px;
	color: #000;
	font-family: 'Exo', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 4px;
}
.login input[type=password]{
	height: 30px;
	border: 1px solid rgba(0,0,0,0.6);
	border-radius: 2px;
	color: #000;
	font-family: 'Exo', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 4px;
	margin-top: 10px;
}
.login input[type=button]{
	height: 35px;
	padding: 6px;
	margin-top: 10px;
}
.login input[type=button]:hover{
	opacity: 0.8;
}
.login input[type=button]:active{
	opacity: 0.6;
}
.login input[type=text]:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,0.9);
}
.login input[type=password]:focus{
	outline: none;
	border: 1px solid rgba(0,0,0,0.9);
}
.login input[type=button]:focus{
	outline: none;
}
::-webkit-input-placeholder{
   color: rgba(0,0,0,0.6);
}
::-moz-input-placeholder{
   color: rgba(0,0,0,0.6);
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}
#latetrain {
	color: red;
}
#notlatetrain {
	color: green;
}
#departureScheduled {
	font-size:10px !important;
}

a:not([href]) {
    cursor: pointer;
}

/* PLUGINS */
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}

/*SPECTRUM*/
.sp-container{position:absolute;top:0;left:0;display:inline-block;*display:inline;*zoom:1;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid #000;background:#fff;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0;right:0;bottom:0;left:84%;height:28px}.sp-container,.sp-replacer,.sp-preview,.sp-dragger,.sp-slider,.sp-alpha,.sp-clear,.sp-alpha-handle,.sp-container.sp-dragging .sp-input,.sp-container button{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#FFF),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#FFF,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr=#FFFFFFFF,endColorstr=#00CC9A81)";filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr='#FFFFFFFF',endColorstr='#00CC9A81')}.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81,endColorstr=#FF000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81',endColorstr='#FF000000')}.sp-hue{background:-moz-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-ms-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-o-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:-webkit-gradient(linear,left top,left bottom,from(red),color-stop(0.17,#ff0),color-stop(0.33,#0f0),color-stop(0.5,#0ff),color-stop(0.67,#00f),color-stop(0.83,#f0f),to(red));background:-webkit-linear-gradient(top,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);background:linear-gradient(to bottom,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.sp-1{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#ffff00')}.sp-2{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00',endColorstr='#00ff00')}.sp-3{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='#00ffff')}.sp-4{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff',endColorstr='#0000ff')}.sp-5{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff',endColorstr='#ff00ff')}.sp-6{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff',endColorstr='#ff0000')}.sp-hidden{display:none!important}.sp-cf:before,.sp-cf:after{content:"";display:table}.sp-cf:after{clear:both}.sp-cf{*zoom:1}@media (max-device-width: 480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:#fff;opacity:.8}.sp-container{border-radius:0;background-color:#ECECEC;border:solid 1px #f0c49B;padding:0}.sp-container,.sp-container button,.sp-container input,.sp-color,.sp-hue,.sp-clear{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-color,.sp-hue,.sp-clear{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px!important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:transparent;border-radius:3px;color:#222}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-picker-container,.sp-palette-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;border-left:solid 1px #fff}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el:hover,.sp-palette .sp-thumb-el.sp-thumb-active{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .sp-clear-display{background-position:center}.sp-palette-button-container,.sp-button-container{float:right}.sp-replacer{cursor:pointer;border:solid 1px #91765d;background:#eee;color:#333;float:left}.sp-replacer:hover,.sp-replacer.sp-active{border-color:#F0C49B;color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:0;margin-right:3px;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{*width:220px;max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#bbb);background-image:-moz-linear-gradient(top,#ddd,#bbb);background-image:-ms-linear-gradient(top,#ddd,#bbb);background-image:-o-linear-gradient(top,#ddd,#bbb);background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-moz-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-ms-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaaaaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f!important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f!important;text-decoration:underline}.sp-palette span:hover,.sp-palette span.sp-thumb-active{border-color:#000}.sp-preview,.sp-alpha,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-preview-inner,.sp-alpha-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}
Posting here makes the last part of creative.css looks strange, but on my texteditor it looks okay.

Re: Layout almost done, but, something looks wrong

Posted: Monday 08 October 2018 23:15
by Lokonli
I did not test all your settings, but it's probably caused by the following line in your custom.css:

Code: Select all

div.col-icon { width: 100px !important; max-width: 100px !important;}
I suggest to remove the line, and then see whether you are happy with the result.
If not, please describe what you try to achieve. There might be a different way to get what you want.

Re: Layout almost done, but, something looks wrong

Posted: Tuesday 09 October 2018 9:03
by EdwinK
It seems that this did the trick. Thanks.
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited