/*
 Theme Name:   iOS Res
 Theme URI:    http://iosres.com
 Author:       Ben Lew
 Author URI:   http://benlew.com
 Template:     wp-theme-html5-boilerplate-master
 Version:      1.0.0
 Text Domain:  iosres
*/


/*
black 273333
yellow FBCA54
green 7CA668 
blue 398EC4 
pink FC575E 
*/

html {
	background:url(images/pixelruler.svg) top left no-repeat;
	background-size:5000px 5000px;
}

body {
	font-family: "myriad-pro", sans-serif;
	font-weight:400;
	color:#273333;
	margin:0;
	background:rgba(255, 255, 255, 0.7);
	width:100%;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


a, a:visited {
	color:#398EC4;
	text-decoration: none;
}

header {
	padding:40px 20px 0 20px;
	font-weight:100;
}

header p {
	margin:0;
	padding:0;
}

h1 a {
	color:#273333;
	text-decoration:none;
	font-weight:300;
}

header h1 a {
	display: block;
	width: 200px;
	height: 47.2px;
	overflow: hidden;
	background: url(images/iosres.svg) no-repeat;
	background-size:200px;
	text-indent:-9999px;
}


section#content {
	width:100%;
	overflow:scroll;
	padding:0;
	opacity:0.9;
}

section#content h2 {
	font-size:42px;
	font-weight:100;
	text-align:center;
	margin:0 auto;
}

section#content article {
	min-width:300px;
	max-width:1020px;
	margin:0 auto 60px auto;
}

.component {
	line-height: 1.5em;
	margin:;
	padding:0;
	width: 100%;
	overflow: hidden;
	position:relative;
}



.component .filler {
	font-family: "Blokk", Arial, sans-serif;
	color: #d3d3d3;
}
table {
    border-collapse: collapse;
    margin-bottom: 20px;
    width: 100%;
    background: #fff;
}
td, th {
    padding:0;
    text-align: left;
}

td {
	padding:20px;
}
	td.err {
		background-color: #e893b9;
		color: #fff;
		font-size: 0.75em;
		text-align: center;
		line-height: 1;
	}
th {

    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    position:relative;
}

th.thecol {
	white-space:normal;
}

th svg {
	width:100%;
	height:100px;
	fill:#FFF;
}

th svg #iphone, th svg #iphone5, th svg #iphone6, th svg #iphone6plus, th svg #ipad, th svg #ipadmini, th svg #ipadpro, th svg #watch38, th svg #watch42 {
	display:none;
}

th.watch38 svg #watch38, th.watch42 svg #watch42, th.iphone svg #iphone, th.iphone5 svg #iphone5, th.iphone6 svg #iphone6, th.iphone6plus svg #iphone6plus, th.ipad svg #ipad, th.ipadmini svg #ipadmini, th.ipad svg #ipad, th.ipadpro svg #ipadpro {
	display:block;
}

th.watch38 svg #watch38, th.watch42 svg #watch42 {
	fill:#FC575E;
}

th.ipad svg #ipad, th.ipadmini svg #ipadmini, th.ipad svg #ipad, th.ipadpro svg #ipadpro {
	fill:#7CA668;
}

th.iphone svg #iphone, th.iphone5 svg #iphone5, th.iphone6 svg #iphone6, th.iphone6plus svg #iphone6plus {
	fill: #398EC4;
}

th.category-obsolete svg #iphone, th.category-obsolete svg #iphone5, th.category-obsolete svg #iphone6, th.category-obsolete svg #iphone6plus, th.category-obsolete svg #ipad, th.category-obsolete svg #ipadmini, th.category-obsolete svg #ipad, th.category-obsolete svg #ipadpro, th.category-obsolete svg #watch38, th.category-obsolete svg #watch42 {
	fill:#999;
}

table.sticky-thead svg {
	display:none;
}

th h2 {
	padding:10px 20px;
	width:100%;
	margin:0;
	font-weight:300;
}

th.iphone5 h2, th.iphone h2, th.iphone6 h2, th.iphone6plus h2 {
	background-color:#398EC4;
}

th.ipad h2, th.ipadmini h2, th.ipadpro h2 {
	background-color:#7CA668;
}

th.category-obsolete h2 {
	background:#999;
}

th.watch38 h2, th.watch42 h2 {
	background-color:#FC575E;
}

th h2 a, th h2 a:visited {
	color:#FFF;
	font-size:18px;
}



tbody th {
/* 	background-color: #daeffd; */
	color:#273333;
	text-transform: uppercase;
	font-weight:400;
	font-size:12px;
	letter-spacing:1px;
	padding:0 20px;
	max-width:180px;
	word-wrap: break-word;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#daeffd+0,daeffd+70,daeffd+100&1+70,0+100 */
background: -moz-linear-gradient(left, rgba(218,239,253,1) 0%, rgba(218,239,253,1) 30%, rgba(218,239,253,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(218,239,253,1) 0%,rgba(218,239,253,1) 30%,rgba(218,239,253,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(218,239,253,1) 0%,rgba(218,239,253,1) 30%,rgba(218,239,253,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daeffd', endColorstr='#00daeffd',GradientType=1 ); /* IE6-9 */
}

tbody tr {
	border-bottom: solid 2px rgba(201, 225, 225, 1);
}

tbody tr:nth-child(2n-1) {
    background-color: #fdfdfd;
    transition: all .125s ease-in-out;
}

table.sticky-col tbody tr:nth-child(2n-1) {
	background-color:transparent;
}
tbody tr:hover {
    background-color: rgba(231, 246, 255, .6);
}

tbody td:hover {
	background-color: rgba(255, 255, 255, 1);
}

span.moreinfo {
	border-bottom:solid 1px #445f5f;
	color:#445f5f;
}

.hidden {
	display:hidden;
}

/* For appearance */
.sticky-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	margin: 3em 0;
	width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .125s ease-in-out;
	z-index: 50;
	width: auto; /* Prevent table from stretching to full size */
}

table.sticky-col {
	width:200px;
	background:transparent;
}
	.sticky-wrap .sticky-thead {
		z-index: 100;
		width: 100%; /* Force stretch */
	}
	.sticky-wrap .sticky-intersect {
		opacity: 1;
		z-index: 150;

	}
		.sticky-wrap .sticky-intersect th {
			background-color: #eee;
			color: #666;
			text-transform:uppercase;
			font-weight:400;
		}
.sticky-wrap td,
.sticky-wrap th {
	box-sizing: border-box;
	width:100px;
}

/* Not needed for sticky header/column functionality */
td.user-name {
	text-transform: capitalize;
}
.sticky-wrap.overflow-y {
	overflow-y: auto;
	max-height: 50vh;
}

.sticky-intersect {
	display:none;
}

div#tablesort {
	visibility: hidden;
	text-align:left;
	color:#fff;
	font-weight:100;
	position:absolute;
	left:10px;
	background: rgba(0, 0, 0, 0.42);
	position: absolute;
	z-index: 999;
	padding:0;
	overflow: auto;
	top: 51px;
}

/*
table.sticky-thead div#tablesort {
	top:50px;
}
*/

div#tablesort.active {
	visibility: visible;
}

th span#filter {
	color:#000;
	bottom:0;
	position:absolute;
	right:0;
	font-weight:100;
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:1px;
	z-index:999999;
	padding:10px 20px;
}

th h2#filter {
	color:#000;
	bottom:0;
	position:absolute;
	background:#eee;
	right:0;
	font-weight:100;
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:1px;
	z-index:999999;
	padding:14px 20px;
	margin-top:94px;
}

th span#filter:hover div#tablesort {
	visibility:visible;
}

th h2#filter:hover div#tablesort {
	visibility:visible;
}

ul#filter-menu {
	list-style:none;
	margin:0;
	padding:0;
}

ul#filter-menu li {
	padding:10px;
	display:block;
	margin:0;
	cursor:pointer;
}

ul#filter-menu li:hover {
	background:#fff;
	color:#000;
}

div#tablesort a {
	font-size:10;
	font-weight:100;
	padding:1px 4px;
	margin:0 0 6px 4px;
	border-radius:4px;
	cursor:pointer;
}

div#tablesort a.selected {
	border-radius:4px;
}

div#tablesort a.category-iphone-link.selected  {
	color:#398EC4;
	background:none;
}

div#tablesort a.category-iphone-link {
	color:#fff;
	background:#398EC4;
}

div#tablesort a.category-ipad-link.selected  {
	color:#7CA668  ;
	background:none;
}

div#tablesort a.category-ipad-link {
	color:#fff;
	background:#7CA668  ;
}

div#tablesort a.category-apple-watch-link.selected  {
	color:#FC575E ;
	background:none;
}

div#tablesort a.category-apple-watch-link {
	color:#fff;
	background:#FC575E ;
}

div#tablesort a.category-current-link.selected  {
	color:#FBCA54;
	background:none;
}

div#tablesort a.category-current-link {
	color:#fff;
	background:#FBCA54;
}

div#tablesort a.category-obsolete-link.selected  {
	color:#465a5a;
	background:none;
}

div#tablesort a.category-obsolete-link {
	color:#fff;
	background:#465a5a;
}

section#logicalresolutionruler {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/pixelruler.svg) top left no-repeat #FFF;
	background-size:5000px 5000px;
	z-index: 99999;
	display:none;
}

section#logicalresolutionruler h2 {
	position:absolute;
	top:80px;
	right:20px;
	font-weight:100;
}

section#logicalresolutionruler p {
	position:absolute;
	top:120px;
	right:20px;
	width:280px;
}

a#rulertoggle {
	position:absolute;
	top:20px;
	right:10px;
	z-index: 999999;
	font-size:12px;
	text-transform: uppercase;
}

a#rulertoggle.selected:after {
	content: " (close)";
}

footer {
	padding:0 0 60px 0;
}

footer h4 {
	text-align:center;
	text-transform: uppercase;
	font-weight:100;
}

#colophon {
	margin-top:40px;
}

footer #colophon p {
	margin:0 auto;
	width:80%;
	max-width:600px;
	min-width:200px;
}

footer div p {
	text-align:left;
}

div#ads, div#google-ads, div#google-ads iframe, div#ads iframe {
	clear:both;
	margin:20px auto;
	text-align:center;
}

div#shareme {
	width:400px;
	margin: 0 auto;
	overflow:auto;
}

footer div.buttons {
	width:100%;
	max-width:none;
}

footer div.button {
	float:left;
	min-width:60px;
}

section#google-ads, section#mobile-google-ads {
	display:none; 
	text-align:center;
	margin:20px auto;
}

@media only screen and (max-width: 580px) {
	tbody th {
		width:20px;
		font-size:10px;
	}
	
	tbody th a {
		word-wrap: break-word;
		
	}
	
	section#google-ads, #ads {
		display:none;
	}
	
	section#mobile-google-ads {
		display:block;
		margin:20px auto;
		
	}
	
	tr th a {
	width:100px;
	display:inline-flex;
	overflow:auto;
	word-break: break-word;
	height:auto;
	}
	
	div#tablesort a {
		display:block;
		clear:both;
	}
	
	article {
		padding:20px;
	}

} /* END 480 ///////////////////////////// */