body { width:75%; margin:0em auto; background:#333; color:#ccc; font:normal 1em/1.3em sans-serif; text-shadow:#000 0 0 .3em; }

a { color:#ccc; text-decoration:none; }
a:hover, a:focus { color:#fff; text-shadow:#000 0 0 1em; outline:0; }
a:active { color:#ddd; }
a img { border:0; }

#categories { margin-top: 3em;}
#categories img { max-width:70px; max-height:70px; vertical-align:middle; }
#categories li a { width:70px; height:70px; }
#categories ul { list-style:none; margin:0; padding:0; }
#categories li { float:left; }

/* locale styling */
#locale { position:absolute; top:0; right:0; list-style:none; margin:0; padding:.5em 0; background: #333; }
#locale:after { content:'▾'; position:absolute; top:.35em; right:.4em; color:#555; }
#locale li { display:none; }
#locale li a { padding:0 1em; }
#locale li.selected { display:block; }
#locale:hover li { display:block; }


/* search styling */
#search { z-index:200; position:absolute; margin:0; font-size:12px; top:82px; left:13%; background:none; border:none; }
#search label { position:absolute; top:.6em; left:.5em; font-size:2em; }
#searching { background:none; border:none; color:#fff; font-size:2em; padding:.3em .5em; width:7em; outline:0; }
#searchError { display: none; color: #ccc; margin-left: 1em; position:absolute; width:14em; top:7.5em; right:4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* main heading */
h1 { font-size:1.8em; display:block; white-space:nowrap; }
h1 img { width:.85em; height:.85em; margin:-.15em .3em 0 -1.3em; vertical-align:middle; }
h1 a { color:#fff; text-decoration:none; padding:0 .5em; }
h1 a:hover, h1 a:focus { color:#fff; text-shadow:#000 0 0 1em; outline:0; }
h1+p { font-size:.9em; color:#fff; margin:-1em 0 0em 1em; z-index:-100; white-space:nowrap; }
p+h2 { margin:-1em 0 0 9.5em; z-index:100; }
p+h2+p { position:absolute; font-size:3em; margin:-1em 0 0 12.5em; z-index:100; }
p+h2 a { padding:1em; }

/* category headings */
h2 { font-size:2em; margin:.3em 0 0 0; clear:left; z-index:-100; text-transform:capitalize; padding:1.5em 0 0.75em 0; }
h2 a { color:#111; text-align:right; text-shadow:#444 0 1px 0; }
h2 a:hover, h2 a:focus { color:#000; text-shadow:#444 0 1px 0; outline:0; }
h2#top+ul { margin-bottom:1.5em; }

h2+ul li { line-height:6em; }
h2+ul li a { padding:35px 20px; white-space:nowrap; }

/* favs */
h2+ul li a .star { position:absolute; margin:.3em 0 0 0; padding:0; z-index:200; font-size:1.3em; line-height:1em; }
h2+ul li a .star-off:after { content:'\2606\a0'; }
h2+ul li a .star-off:hover:after { color:#D9C540; content:'\2605\a0'; }
h2+ul li a .star-on:after { color:#D9C540; content:'\2605\a0'; }
h2+ul li a .star-on:hover:after { content:'\2606\a0'; color:#ccc; }

h2#favorites, h2#favorites+ul {display:none;}
h2#favorites {padding-left:0;}
h2#favorites a:hover {color:#D9C540}

/* icon hover */
h2+ul li a:hover, h2+ul li a:focus,
#project-details .license a:hover, #project-details .license a:focus,
#project-details .alternative-to a:hover, #project-details .alternative-to a:focus,
#project-details .similar-to a:hover, #project-details .similar-to a:focus, #project-details .tosdr a:focus, #project-details .tosdr a:hover,
#searching { background:rgba(30, 30, 30, .7);  border-radius:.5em; box-shadow:#444 0 1px 0; }
h2+ul li a:active, #project-details .alternative-to a:active, #project-details .similar-to a:active, #project-details .license a:active,
#project-details .tosdr a:active { background-color:#111; }
/* text appearance */
li a span { display:none; }
li a:hover span { display:inline; }
li a:hover .project, li a:focus .project { position:absolute; margin:30px 0 0 -82px; }
li a:hover .project strong, li a:focus .project strong { position:absolute; margin-top:-1em; }

/* footer */
footer { float:left; margin-bottom:3em; }
h3 { margin-top:4em; color:#777; }
h3+p, h3+p+p, h3+p+p+p { color:#777; }

/* project details lightbox */
#simplemodal-overlay { background-color:#000; }
#simplemodal-container { background-color:rgba(50,50,50,.9); border:0; padding:12px; border-radius:.5em; box-shadow:0 0 2em #000; }

#project-details { display:none; font-size:.9em; }
#project-details img { vertical-align:middle; }
#project-details ul { list-style:none; margin:0; padding:0; }
#project-details li { float:left; }

#project-details .header strong.name { border:none; font-size:4em; position:absolute; top:.68em; left:1.5em; }
#project-details .header a img { height:70px; width:70px; }
#project-details .header p { float:left; margin-top:0; font-weight:bold; }
#project-details .header p.cat-desc { float:left; clear:both; }
#project-details .header p.cat-desc span { margin:1em; }
#project-details .header .tags li { margin-right:1em; }

#project-details .label { clear:both; float:left; width:100px; }
#project-details .details { clear:both; }
#project-details .introduction { font-size:.8em; line-height:1.3em; }
#project-details .alternative-to a,
#project-details .similar-to a,
#project-details .license a  { padding:12px 7px 15px 7px; }
#project-details .alternative-to img,
#project-details .similar-to img,
#project-details .license img { height:35px; }
#project-details .tosdr a { display:block; text-align:center; height:35px; min-width:35px; padding:12px 7px 0px 7px; font-size:1.75em;}
#project-details .license .label a { padding:0; font-weight:bold; }
#project-details .license .label a:hover { background:none; box-shadow:none; }

#project-details .tip { display:none; font-size:1.1em; font-weight:bold; position:absolute; background-color:rgba(20,20,20,.5); width:455px; margin:0 15px 0 0; bottom:0; left:0; padding:10px 10px; border-radius:0 0 .5em .5em; }
#project-details .tip a { color:#888; }
#project-details .tip a:hover, #project-details .tip a:focus { color:#fff; }

#project-details .tosdr .tosdr-A:hover {background-color:#46A546;}
#project-details .tosdr .tosdr-B:hover {background-color:#79B752;}
#project-details .tosdr .tosdr-C:hover {background-color:#F89406;}
#project-details .tosdr .tosdr-D:hover {background-color:#D66F2C;}
#project-details .tosdr .tosdr-E:hover {background-color:#C43C35;}
#project-details .tosdr .tosdr-false:hover {background-color:#999;}
#project-details .tosdr .tosdr-false {font-size:1em;}

#project-details acronym {padding-bottom: 2px; border-bottom: dashed 1px #555; cursor: help;}

/* No Js Enable ->  Message */
noscript {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    background: #FFF;
    color: #333;
    text-shadow: #000 0 0 0;
    text-align: center;
		z-index: 300;
}
div#errorMsg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
div#errorMsg h4 a {
    color: #333;
    text-shadow: #000 0 0 0;
    text-align: center;
    z-index: 300;
}



/* Viewer width ≥ 800px */
@media screen and (min-width: 800px) {
	body {margin:5em auto;}

	/* header */
 	h1 {font-size: 3.8em;}
 	h1+p { font-size:.9em; color:#fff; margin:-3em 0 2em 1.6em; z-index:-100; }

 	/* search styling */
	#search { z-index:200; position:absolute; margin:0; font-size:initial; top:4em; left:initial; right:3em; background:none; border:none; }

	#categories { margin-top: 0;}
}