@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,600,700,400,300);

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
	-ms-animation-duration:0.5s;
	-o-animation-duration:0.5s;
	animation-duration:0.5s;
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}


body {
	font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height:100%;
  color: #000;
  background: #4C5054;
  margin:0; 
  padding:0; 
}

#cats-container {
	left: 0px;
}
#list {
	left: 260px;
	right: 0px;
}

body.push-tree {
	overflow-x: hidden;
	position: relative;
	left: 0;
}
#show-tree {
	display:none;
}
body.push-tree #show-tree {
	display:inline-block;
	color:#fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
  background:#87b5e1;
  padding:5px 9px 5px 9px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin:0px 15px 0px 0px;
  float:left;
}
body.push-tree #show-tree:hover {
	background:#abcbea;
}
body.push-tree #cats-container {
	left: -260px;
}
body.push-tree #list {
	left: 0px;
	right: 0px;
}
body.push-tree #cats-container.pushed {
	left: 0px;
}
body.push-tree #list.pushed {
	left: 260px;
	right: -260px;
}

#maintitle {
	font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: #fff;
  font-size: 25px;
  float:left;
  margin-top:5px;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}
#maintitle span {
  font-weight: 600;
}

#list {
    top: 55px;    
    right: 0px;  
    bottom: 0px;  
    position: fixed;
    background: #fff;
    overflow-x: hidden;
    overflow-y:auto;
    border-top: 3px #87b5e1 solid;
}

#popup {
	border: 1px #ccc solid; 
	padding:10px; 
	position: absolute; 
	top: 15px; 
	left: 20px; 
	z-index: 60; 
	display:none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.3);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.3);
  box-shadow: 1px 2px 4px rgba(0,0,0,.3);
}

#list #item-grid {
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0px; left:0px; right: 0px; bottom: 0px;
}

a:link {
	text-decoration:none;
} 
a:visited{
	text-decoration:none;
} 
a:hover{
	text-decoration:none;
} 
a:active{
	text-decoration:none;
} 

div.tab {
	position: relative; 
	display:none;
	width: 128px; 
	height: 34px; 
	background-color: #ffffff;
	font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 100%;
	color: #4c5054;
	font-size: 16px;
	text-decoration:none;
	font-weight: 550;
	border-bottom: 2px solid #e2e6ea;
	cursor:pointer;
}

/* as above but only with text settings */
.headtext {
	color: #4c5054;
	font-size: 16px;
	text-decoration:none;
	font-weight: 600;
}

/* a bit smaller than headtext for pagination etc. */
.headtextsmall {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
  font-weight: 300; 
	font-size: 13px;
}

#header {
	padding: 10px;
	position: relative;
	top:0;
	left:0;
	right:0;
	height:60px;
}
#header #apptitle {
	margin:6px 0px 0px 0px;
	white-space:nowrap;
	float:left;
}
#header #count {
	width: 80px;
	text-align: right;
	float:right;
	padding:13px 10px 0px 0px;
}
#header #paginator {
	padding: 4px 0px 0px 0px;
	width: 130px;
	float:right;
}
#header #paginator input {
	font-family: 'Open Sans', sans-serif;
  font-weight: 300; 
	font-size: 13px;
}

div.tab1:hover {
	border-bottom: 2px solid #80c33c;
}
div.tab2:hover {
	border-bottom: 2px solid #fe3e5e;
}
div.tab3:hover {
	border-bottom: 2px solid #3e9dfe;
}
div.tab4:hover {
	border-bottom: 2px solid #feb83e;
}
div.tab_active {
	position: relative; 
	background-color: #ffffff;
	font-family: 'Open Sans', sans-serif;
  font-weight: 400;
	color: #000000;
	text-decoration:none;
	border-bottom: 2px solid #3e9dfe;
	cursor:pointer;
/*  left: 0px; 
    top: 0px; 
    width: 128px; 
    height: 62px; 
    font-size: 16px;
    font-weight: bold; */
}
div.tabtext {
	position: relative; 
    /*display: none; ====*/
	text-align: center;
	left: 0px; 
	top: 8px; 
}
div.toptext {
	font-family: 'Open Sans', sans-serif;
  font-weight: 600;
	color: #e2e6ea;
	text-decoration:none;
	cursor:pointer;
	text-align: center;
	width: 64px; 
	height: 32px; 

}
div.toptext:hover {
	font-weight: bold;
}

/*div.bigtab {
	width: 126px; 
	height: 32px; 
	font-family:Arial, Helvetica;
	color: #e2e6ea;
	font-size: 16px;
	text-decoration:none;
	font-weight: 550;
	border-bottom: 6px solid #74787c;
	cursor:pointer;
}
div.bigtab:hover { 
	font-weight: bold;
	border-bottom: 6px solid #3e9dfe;
}
div.bigtab_active {
	width: 126px; 
	height: 32px; 
	font-family:Arial, Helvetica;
	color: #e2e6ea;
	font-size: 16px;
	text-decoration:none;
	font-weight: bold;
	border-bottom: 6px solid #3e9dfe;
	cursor:pointer;
}*/

/* Apply to divs that must center arbitrarily sized images */
.wraptocenter {
    display: table-cell;
	/*border: 1px solid #ccc;*/
	/*background-color:#EBEBEB;*/
    text-align: center;
    vertical-align: middle;
}