/*
Theme Name: Tankboys
Theme URI: http://www.tankboys.biz/
Description: Theme for Tankboys
Author: Tankboys
Version: 1.0
*/

/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* --------------- TYPOGRAPHY ----------------- */

@font-face {
    font-family: 'Recta';
    src: url('Recta.ttf');
}

body{
	margin-top: 20px;
	padding: 0px;
	color: black;
	font: 15px/20px 'Recta', Arial, Helvetica, Geneva, sans-serif;
	letter-spacing: 1px;
}
h1, h2, h3, h4{
	font: 15px/20px 'Recta', Arial, Helvetica, Geneva, sans-serif;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
a{
	color: black;
	text-decoration: none;
}
p{
	margin: 0 0 20px 0;
}
p a{
	border-bottom: 1px black solid;
}
hr{
	display: none;
}
ul, ul li, li{
	list-style: none;
	padding: 0px;
	margin: 0px;
	
}
a img{
	border-bottom: 0px black solid;
}
blockquote{
	margin-left: 20px;
}

#header{
	overflow: auto;
	clear: both;
	margin: auto;
	margin-bottom: 20px;
}
#wrapper{
	overflow: hidden;
	margin: auto;
}

.content-page{
	margin: auto;
}
.works-grid{
	margin: auto;
	overflow: hidden;
}

/* ---------------  PAGE STRUCTURE ----------------- */

#header{
	overflow: hidden;
	text-align: center;
	padding-bottom: 10px;
}
h1, .header-menu{
	padding: 0px;
	float: left;
	text-align: left;
	text-indent: 20px;
	font: 15px/20px 'Recta', Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: 20px;
	width: 191px;
}

h1 a:hover, .header-menu a:hover{
	border-bottom: 2px black solid;
}

h2.post-title{
	width: 100%;
	text-transform: uppercase;
	font: 20px/60px 'Recta', Arial, Helvetica, Geneva, sans-serif;
}

/* ---------------  INDEX PAGE ----------------- */

ul#works{
	margin: 0px;
	padding: 0px;
}
ul#works li{ 
	width: 175px;
	height: 320px;
	margin: 0 20px 20px 0;
	padding: 0px;
	float: left;
	text-align: center;
}
.img{
	display: table-cell;
	overflow: hidden;
	text-align: center;
	vertical-align: top;
	
}
.img img{
	width: 175px;
}
.txt{
	margin: 0px;
	margin-bottom: 20px;
	padding-top: 20px;
	text-align: left;
	padding-left: 20px;
}


/* ---------------  CONTENT PAGE ----------------- */



.alignnone{
}
.alignleft{
	margin-bottom: 20px;
}
.single-page{
	text-align: center;
}



h3, small{
	padding-left: 20px;
}
h3{
	text-transform: uppercase;
}

.entry{
	width: 370px;
	margin-right: 20px;
	float: left;
	text-align: left;
}
.entry div h3{
	text-transform: uppercase;
	margin-bottom: 20px;
}
.gallery{
	width: 760px;
	float: left;
}
.gallery img{
	width: 760px;
	margin-bottom: 20px;
}
ol li{
	list-style-type: decimal;
}
.books li{
	text-indent: 20px;
}
.clear{
	clear: both;
}
/* ---------------  ARCHIVE PAGE ----------------- */


ul{
	margin: auto;
	padding:0px; 
	overflow:hidden; 
}

ul li {
	padding:0px; 
	overflow: hidden;
}
div.li_container { 
	border:none;	/* don't use left and right border, padding and margin */ 
	padding:0; 
	margin:auto; 
	 overflow:hidden;
}
.navigation{
	text-align: center;
	margin: 20px;
	font-size: 24px;
}
.mcol li{
	margin-bottom: 20px;
}
.mcol li p img{
	width: 50%;
	padding-left: 20px;
}
h4{
	margin-bottom: 20px;
	padding-left: 20px;
}
/* ---------------  DEBUG ----------------- 
#header{
	background: yellow;
}
#wrapper{
	background: red;
}
ul li, ol li {
	background: cyan;
}
.content-page{
	background: green;
}
.mcol{
	background: grey;
}
*/
a.nimg{
	border: 0px;
}
.entry{

}

/* --------------- PAGE RESIZE ----------------- 

|-------370------| = 370 
|-175-| 20 |-175-|

|-------370------| 20 |------370-------| = 760

|-175-| 30 |-175-| 30 |-175-| 30 |-175-|

|-------370------| 20 |------370-------| 20 |------370-------| = 1150

|-175-| 20 |-175-| 20 |-175-| 20 |-175-| 20 |-175-| 20 |-175-|

175 x 150
175 x 230

*/

@media screen and (max-width: 480px) {

	#wrapper{
		width: 370px;
  }
	#page{
		width: 370px;
	}
	.content-page{
		width: 370px;
	}
	#header, #works{
		width: 410px;
	}
	.alignleft{
		width: 370px;
	}
	h1, .header-menu{
		float: none;
		display: block;
	}
}
@media screen and (min-width: 481px) and (max-width: 1149px){
	#wrapper{
		width: 760px;
	}
	#header, #works{
		width: 822px;
	}
	.content-page{
		width: 760px;
	}
	.li_container, #header{
	}
	.li_cont1{
		margin: 0 20px 0 0;
	}	

	h1, .header-menu{
		width: 130px;
	}
	.gallery{
		width: 370px;
	}
	.gallery img{
		width: 370px;
	}
}
@media screen and (min-width: 1150px) {

	#wrapper{
		width: 1150px;
	}
	#header, .works-grid {
		width: 1150px;
	}
	#works {
		width: 1170px;
	}
	.li_cont2, .li_cont1{
		margin: 0 20px 0 0;
	}
}