Revision as of 03:37, 17 April 2020

/* CSS placed here will be applied to all skins */
span.checkboxSpan {
width: 220px;
display: block;
float: left;
}

.Tor { background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat; width: 100px; height: 100px;display: block; text-indent: -9999px;}
.TorChat { background: url("//svnweb.fsf.org/static/trunk/directory/images/logos/Tor.jpg") no-repeat; width: 100px; height: 100px;display: block; text-indent: -9999px;}

table.antifeature { border:2px solid red; padding:5px; }

/*The 2 column text of Package entries in desktop mode becomes inline in mobile view*/
.left-float {
 float:left; 
 width:60%; 
 margin: 2px 4px 0px 4px;}

.right-float{
 float:right; 
width:35%; 
margin: 2px 4px 0px 4px;}

@media only screen and (max-width: 800px){
.left-float,
.right-float {
		float: inherit;
		width: inherit;
	}
}

/*To make licenses section vertical for mobile view*/
* {
    box-sizing: border-box;
}

.license-column {
    float: left;
    width: 17%;
   padding: 2px;
}

.license-wide-column{
 float: left;
 width: 49%;
 padding: 2px;
 
 }

.license-row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 760px) {
    .license-column {
        width: 100%;
    }
    .license-wide-column{
    width: 100%
    }
}

.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 10px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}