/*
Theme Name: 	shtsht.com
Theme URI: 		https://shtsht.com
Description: 	the first version of shtsht.com theme!
Version: 		2.0
Author: 		mido
Author URI: 	https://shtsht.com
Tags: 			shtsht, wordpress
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}

body{
margin-left:auto;
margin-right:auto;
background-color:#7E324F;
float:none;
}
#page{
float:none;
margin-left:auto;
margin-right:auto;
padding:2px 2px 2px 2px;
width:99%;
height:auto;
border:0px solid ;
background-color:#FFFFFF;

}
#top{
width:100%;
height:10px;
margin:5px 0px 5px 0px;

}
#header{
width:90%;
height:auto;
margin-left:auto;
margin-right:auto;
padding:3px 3px 3px 3px;
border:5px solid black;
position: relative;
display:block;
float:none;
text-align:center;
font:normal normal 5px tahoma, arial;
background-color:#FF9E5E;

}
#htitle{
width:auto;
height:auto;
margin:2px 0px 2px 0px;
position: relative;
display:inline-block;
float:none;
text-align:center;
font:normal bold 15px tahoma, arial red;
}

#but{
width:100%;
height:auto;
margin:3px 3px 3px 3px;
padding:3px 3px 3px 3px;
clear:both;
position: relative;
font:normal bold 15px tahoma, arial;

}
hr {
  clear: both;
  color: #800000;
  background-color: #800000;
  height: 2px;
  border-width: 0;
}
p{
text-indent:0px;
text-align:right;
margin: 3px;
margin-top: 20px;
}
#container{
width:auto;
float:left;
margin:1px 1px 1px 1px;
padding:1px 1px 1px 1px;
height:auto;
border-color:blue;
border:0px solid;

}
#main{
width:66%;
float:left;
margin:3px 3px 3px 3px;
padding:3px 3px 3px 3px;
height:auto;
background-color:#FFFFFF;

}
.side{
width:30%;
float:right;
margin:1px 1px 1px 1px;
padding:2px 1px 1px 1px;
height:auto;
font:normal normal 15px tahoma, arial;
}

#footer{
width:99%;
float:center;
margin:1px 1px 1px 1px;
padding:3px 3px 3px 3px;
height:auto;
border:0px solid green;
clear:both;
font:tahoma;
font:normal bold 20px tahoma, arial black;
background-color:#FFFFFF;
text-align:center;
position: relative;
}

div.topic{
width:94%;
float:left;
margin:3px 3px 3px 3px;
padding:3px 3px 3px 3px;
height:auto;


}
div.cattopic{
width:80%;
float:left;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
height:auto;
border:0px solid blue;
background-color:yellow;
}


	
	ul {
	list-style: none;
font:normal normal 12px tahoma, arial;
padding: 1px;
margin: 1px;


	}

ul li{
margin:2px 2px 2px 2px;
list-style: none;
padding:3px 2px 2px 2px;

}
div.side{
float:right;
text-align:right;
}
ul.children{

background-color: #FFF0E6;
border:1px solid #B24700;
text-align:right;
}

li {
	list-style: none;
	}

	ol {
	list-style: none;
b
	}
	
	#but ul li{
	margin: 0 0 18px 1.5em;
	display: inline-block;
background-color:#F2FFF2;
border:1px solid green;
margin:3px 3px 3px 3px;
padding:3px 3px 3px 3px;
	}
h2,h3.title{
text-align:center;
background-color:#FFF0E6;
}
	
h3.widget-title{
text-align:center;
}
h1{
	font:normal bold 20px tahoma, arial;
}

	h2{
	font:normal bold 18px tahoma, arial;
}
	
	h3{
	font:normal normal 17px tahoma, arial;
	}
	h4{
	font:normal normal 16px tahoma, arial;
text-align:right;
	}
	
	.inews{
	font:normal normal 12px tahoma, arial;
	}
	

.navigation{
height:auto;
width:94%;
float:left;
margin:1px 1px 1px 1px;
padding:1px 1px 1px 1px;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #b30000;
    border-radius: 1px;
    cursor: pointer;
    padding: 3px;
    padding: 0.5rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #051a0b;
}
@media screen and (max-device-width: 800px) and  (min-device-width: 460px){
#page{
width:99%;
}
#header{
font-size:1.4em;
width:98%;
}
#container{
width:99%;
float:none;
}
#main{
width:97%;
float:none;
}
.side{
	width:90%;
float:right;
	}
div.topic{
width:92%;
float:none;
}
div.mtopic{
width:92%;
float:none;
}
div.cattopic{
width:94%;
float:none;
}
#footer{
width:98%;
}
h1{
font-size:1.4em;
}
h2{
font-size:1.3em;
}h3{
font-size:1.2em;
}h4{
font-size:1.1em;
}
}
@media screen and (max-device-width: 460px){
#page{
width:99%;
}
#header{
font-size:1.4em;
width:98%;
}
#container{
width:99%;
float:none;
}
#main{
width:98%;
float:none;
}
.side{
	width:90%;
float:right;
	}
div.topic{
width:92%;

float:none;
}
div.mtopic{
width:92%;
float:none;
}
div.cattopic{
width:94%;
float:none;
}
#footer{
width:98%;
}
h1{
font-size:1.4em;
}
h2{
font-size:1.3em;
}h3{
font-size:1.2em;
}h4{
font-size:1.1em;
}
}
@media screen and (min-device-width: 800px){
#page{
width:99%;
}
#header{
font-size:20px;
width:98%;
}
#container{
width:99%;
float:none;
}
#main{
width:66%;
float:left;
}
div.topic{
width:92%;
float:none;
}
div.mtopic{
width:92%;
float:none;
}
div.cattopic{
width:94%;
float:none;
}
.side{
	width:30%;
float:right;
	}
#footer{
width:98%;
}
h1{
font-size:20px;
}
h2{
font-size:18px;
}h3{
font-size:17px;
}h4{
font-size:16px;
}
}