#pageSubMenu li.solarsystem,
#siteTitle.solar-system {
	background: url('../img/title_solarsystem.jpg') center / cover no-repeat;
}

#solarsystemTable div {border-top: 1px solid #fff;}
#sun {border-top: none;}
#oortCloud {border-bottom: 1px solid #fff;}

#solarsystemTable div a,
#solarsystemTable div span {display: block;}

#solarsystemTable div.pure-u-11-12 {margin-left: 8.333%;}

#solarsystemTable div.level-1 a,
#solarsystemTable div.level-1 span {padding: .9em; font-size: 1.15rem;}

#solarsystemTable div.level-2 a,
#solarsystemTable div.level-2 span {padding: .8em; font-size: 1.1rem;}

#solarsystemTable div.level-3 a,
#solarsystemTable div.level-3 span {padding: .7em; font-size: 1.05rem;}

#solarsystemTable div.level-4 a,
#solarsystemTable div.level-4 span {padding: .6em; font-size: 1rem;}

#solarsystemTable div.level-5 a,
#solarsystemTable div.level-5 span {padding: .5em; font-size: .95rem;}

#solarsystemTable div.level-6 a,
#solarsystemTable div.level-6 span {padding: .4em; font-size: .9rem;}

#solarsystemTable div.level-7 a,
#solarsystemTable div.level-7 span {padding: .3em; font-size: .85rem;}

#solarsystemTable div.placeholder {border: none;}
#solarsystemTable div.placeholder > p {display: none;}

#solarsystemTable div.collapsed:after {content: " \25B8";}
#solarsystemTable div.expanded:after {content: " \25BE";}
#solarsystemTable div.collapsed:focus:after,
#solarsystemTable div.collapsed:hover:after,
#solarsystemTable div.collapsed:active:after {content: " \25BE";}
#solarsystemTable div.expanded:focus:after,
#solarsystemTable div.expanded:hover:after,
#solarsystemTable div.expanded:active:after {content: " \25B8";}

/*	breakpoints ------------------------------------------------------------- */
/* global breakpoints min-width: sm = 35.5em, md = 48em, lg = 64em, xl = 80em */
@media only all and (min-width: 35.5em) {
	#solarsystemTable div.pure-u-sm-7-8 {margin-left: 12.5%;}
}
@media only all and (min-width: 48em) {
	#solarsystemTable div.pure-u-md-4-5 {margin-left: 20%;}
}
@media only all and (min-width: 64em) {

}

/*	backgrounds and gradients */
/*transparent*/
.transparent:focus,
.transparent:hover,
.transparent:active {background: rgba(255, 255, 255, .3);}

/*sun-yellow = #fffacd rgba(255, 250, 205)*/
.sun-yellow.star > p > a:after {content: '\2609'; margin-left: .25em;}
.sun-yellow {
	background-image: linear-gradient( to right, rgba(255, 255, 112, .3) 50%, rgba(255, 255, 112, 0));
}
.sun-yellow p:focus,
.sun-yellow p:hover,
.sun-yellow p:active {
	background-image: linear-gradient( to right, rgba(255, 255, 112, 1) 50%, rgba(255, 255, 112, 0));
}

/*mercury-orange = #eedc82 rgba(238, 220, 130)*/
.mercury-orange.planet > p > a:after {content: '\263F'; margin-left: .25em;}
.mercury-orange {
	background-image: linear-gradient( to right, rgba(238, 220, 130, .3) 50%, rgba(238, 220, 130, 0));
}
.mercury-orange p:focus,
.mercury-orange p:hover,
.mercury-orange p:active {
	background-image: linear-gradient( to right, rgba(238, 220, 130, 1) 50%, rgba(238, 220, 130, 0));
}

/*venus-pink = #f2d9bf rgba(242, 217, 191)*/
.venus-pink.planet > p > a:after {content: '\2640'; margin-left: .25em;}
.venus-pink {
	background-image: linear-gradient( to right, rgba(242, 217, 191, .3) 50%, rgba(242, 217, 191, 0));
}
.venus-pink p:focus,
.venus-pink p:hover,
.venus-pink p:active  {
	background-image: linear-gradient( to right, rgba(242, 217, 191, 1) 50%, rgba(242, 217, 191, 0));
}

/*earth-blue = #b0c4de rgba(176, 196, 222)*/
.earth-blue.planet > p > a:after {content: '\2641'; margin-left: .25em;}
.earth-blue {
	background-image: linear-gradient( to right, rgba(176, 196, 222, .3) 50%, rgba(176, 196, 222, 0));
}
.earth-blue p:focus,
.earth-blue p:hover,
.earth-blue p:active {
	background-image: linear-gradient( to right, rgba(176, 196, 222, 1) 50%, rgba(176, 196, 222, 0));
}

/*asteroids-grey = #c0c0c0 rgba(192, 192, 192)*/
.asteroid-grey {
	background-image: linear-gradient( to right, rgba(192, 192, 192, .3) 50%, rgba(192, 192, 192, 0));
}
.asteroid-grey p:focus,
.asteroid-grey p:hover,
.asteroid-grey p:active {
	background-image: linear-gradient( to right, rgba(192, 192, 192, 1) 50%, rgba(192, 192, 192, 0));
}

/*mars-red = #f4a460 rgba(244, 164, 96)*/
.mars-red.planet > p > a:after {content: '\2642'; margin-left: .25em;}
.mars-red {
	background-image: linear-gradient( to right, rgba(244, 164, 96, .3) 50%, rgba(244, 164, 96, 0));
}
.mars-red p:focus,
.mars-red p:hover,
.mars-red p:active {
	background-image: linear-gradient( to right, rgba(244, 164, 96, 1) 50%, rgba(244, 164, 96, 0));
}

/*jupiter-yellow = ##d2ceb7 rgba(210, 206, 183)*/
.jupiter-yellow.planet > p > a:after {content: '\2643'; margin-left: .25em;}
.jupiter-yellow {
	background-image: linear-gradient( to right, rgba(210, 206, 183, .3) 50%, rgba(210, 206, 183, 0));
}
.jupiter-yellow p:focus,
.jupiter-yellow p:hover,
.jupiter-yellow p:active {
	background-image: linear-gradient( to right, rgba(210, 206, 183, 1) 50%, rgba(210, 206, 183, 0));
}

/*saturn-orange = #f0e68c rgba(240, 230, 140)*/
.saturn-orange.planet > p > a:after {content: '\2644'; margin-left: .25em;}
.saturn-orange {
	background-image: linear-gradient( to right, rgba(240, 230, 140, .3) 50%, rgba(240, 230, 140, 0));
}
.saturn-orange p:focus,
.saturn-orange p:hover,
.saturn-orange p:active {
	background-image: linear-gradient( to right, rgba(240, 230, 140, 1) 50%, rgba(240, 230, 140, 0));
}

/*uranus-turq = #bee3e6 rgba(190, 227, 230)*/
.uranus-turq.planet > p > a:after {content: '\2645'; margin-left: .25em;}
.uranus-turq {
	background-image: linear-gradient( to right, rgba(190, 227, 230, .3) 50%, rgba(190, 227, 230, 0));
}
.uranus-turq p:focus,
.uranus-turq p:hover,
.uranus-turq p:active {
	background-image: linear-gradient( to right, rgba(190, 227, 230, 1) 50%, rgba(190, 227, 230, 0));
}

/*neptune-blue = #90d0f8 rgba(144, 208, 248)*/
.neptune-blue.planet > p > a:after {content: '\2646'; margin-left: .25em;}
.neptune-blue {
	background-image: linear-gradient( to right, rgba(144, 208, 248, .3) 50%, rgba(144, 208, 248, 0));
}
.neptune-blue p:focus,
.neptune-blue p:hover,
.neptune-blue p:active {
	background-image: linear-gradient( to right, rgba(144, 208, 248, 1) 50%, rgba(144, 208, 248, 0));
}

/*kuiperbelt-brown = #d0b8af rgba(208, 184, 175)*/
.kuiperbelt-brown {
	background-image: linear-gradient( to right, rgba(208, 184, 175, .3) 50%, rgba(208, 184, 175, 0));
}
.kuiperbelt-brown p:focus,
.kuiperbelt-brown p:hover,
.kuiperbelt-brown p:active {
	background-image: linear-gradient( to right, rgba(208, 184, 175, 1) 50%, rgba(208, 184, 175, 0));
}

/*comet-grey = #bfcdd9 rgba(191, 205, 217)*/
.comet-grey p {
	background-image: linear-gradient( to right, rgba(191, 205, 217, .3) 50%, rgba(191, 205, 217, 0));
}
.comet-grey p:focus,
.comet-grey p:hover,
.comet-grey p:active {
	background-image: linear-gradient( to right, rgba(191, 205, 217, 1) 50%, rgba(191, 205, 217, 0));
}