@charset "UTF-8";
/* CSS Document */

/* body, p, h3 h2 are html tags 
with the . I create a class
*/


* {
margin: 0;
}

body{ 
/*background: #474747 url(../images/bg.png);*/
background: #e2e2e2;
height: 100%;
  font-size: 100%;
  font: inherit;
font: 13px 'Helvetica Neue', Arial, sans-serif;
} 

h1, h2 {
  font-weight: 100;
  line-height: 1.2em;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 17px;
  font-weight: bold;
}

h3, p, pre, dl {
  margin-bottom: 1.0em;
}

strong { font-weight: bold; }

ul#about{
color:#087eb4;
 font-size: 130%;
  font-weight: bold;
margin: 20px 0px;
}

ul#about li.element {
color:#087eb4;
 text-align: left;

}


/*header*/
#header{
height: 120px;
/*background:  url(../images/title.png) no-repeat;
background: url(../images/sign.png) no-repeat;*/
 color: #222;
background-position: 100px 35px;
}

#header h1 a {
    text-decoration: none;
    font: 80px Helvetica, Arial, Sans-Serif; letter-spacing: -1px;  
    text-align: left;
    color: #222;
    text-shadow: 0px 2px 3px #999;
 }
 #header h1 {
    
    font: 40px Helvetica, Arial, Sans-Serif; letter-spacing: -1px;  
    color: #222;
 color: #222;
    text-shadow: 0px 2px 3px #999;
 padding: 20px 0 10px 50px;

 }
/*sidenav

 border-style: solid;
*/
#sidenav{
position: absolute;
width:130px;
font-size: 130%;
	left:60px;
    display: block;
  }

nav {

 margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

}
#hide {
	position:absolute;
	left:-190px;
}

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 60px 0;
	padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 90px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #000;
	background:#cccccc url(../images/heading_bg.jpg) repeat-y;
	font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color: #000;
	background:#dbdbdb url(../images/tab_bg.jpg) repeat-y;
		border: 1px solid #cccccc;
	text-decoration: none;
	font-weight: bold;  
	
}

ul#sliding-navigation li.sliding-element a:hover { color: #ce1717; }



/*content*/
#container{
/* top right bottom left */
margin:  40px  10px 0px 200px; /*margin:  10px  10px 0px 200px;  */
padding-right: 20px;
padding-left: 10px;
padding-bottom:100px;

background: #474747 url(../images/bg.png);
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}


.box {
  margin: 5px;
  padding: 5px;
  background: #D8D5D2;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}


.box p#sourcelight          {position:absolute; 
float:left; clear:both; margin:5px 5px; color:#777; width:100%;font: 12px Calibri, Arial, Verdana, sans-serif; text-align:left;}

.box p#sourcedark          {position:absolute; 
float:left; clear:both; margin:5px 5px; color:#333; width:100%;font: 12px Calibri, Arial, Verdana, sans-serif; text-align:left;}


.box h2 {
  font-size: 14px;
  font-weight: 200;
}
.box a {
  color: #ce1717;
}
.box img,
#tumblelog img {
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.Tall { background: #222627; width: 280px; height:370px;font:bold 21px Arial, Helvetica, sans-serif}
.Tall img {  max-width: 280px;}
.Tall h1{color:#e8940d; font:bold 36px Arial, Helvetica, sans-serif;}
.Tall p{color: #087eb4}

.game { background: #222627; width: 280px;font:bold 21px Arial, Helvetica, sans-serif}
.game img {  max-width: 280px;}
.game h1{color:#e8940d; font:bold 36px Arial, Helvetica, sans-serif;}
.game p{color: #087eb4}

.game h2#onbottom      {
position:absolute; 
width: 256px; /* 180 of col2 - twice the last argument og padding */
bottom:1px; 
float:left;  
padding:6px 12px; 
background-color:rgb(0,0,0);  
background-color:rgba(0,0,0,0.75); 
color:#087eb4; 
font:bold 12px/12px Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }


/* new boxes */

.col2 h2#onbottom      {
position:absolute; 
width: 154px; /* 180 of col2 - twice the last argument of padding */
bottom:1px; 
float:left;  
padding:6px 12px; 
background-color:rgb(0,0,0);  
background-color:rgba(0,0,0,0.75); 
color:#087eb4; 
font:bold 12px/12px Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}


.col3 h2#onbottom      {
position:absolute; 
width: 256px; /* 280 of col3 - twice the last argument of padding */
bottom:1px; 
float:left;  
padding:6px 12px; 
background-color:rgb(0,0,0);  
background-color:rgba(0,0,0,0.75); 
/*color:#087eb4; */
color: #ffffff;
font:bold 12px/12px Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}


.col4 h2#onbottom      {
position:absolute; 
width: 356px; /* 380 of col4 - twice the last argument of padding */
bottom:1px; 
float:left;  
padding:6px 12px; 
background-color:rgb(0,0,0);  
background-color:rgba(0,0,0,0.75); 
color:#087eb4; 
font:bold 12px/12px Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}


.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h25 { clear: both; width:100%; height: 25px; }


/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Example Options ****/

#options {
position:absolute;
right:30px;
width:930px;
  padding-bottom: 1.0em;
}

#options h3 {
position:absolute;
right:0px;
width: 250px;
  font-size: 15px;
  color: #777
}


#options ul {
	 float: right;
  list-style: none;
}

#options li {
  float: left;
  margin-bottom: 0.2em;
}

#options li a {

  display: block;
  padding: 0.4em 0.5em;
  background-color: #DDD;
  color: #222;
  font-weight: bold;
  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
text-decoration: none;
  background-image: -moz-linear-gradient( -90deg, 
    hsla( 0, 0%, 100%, 0.5 ) , 
    hsla( 0, 0%, 100%, 0.0 ) 
  );
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
    from( hsla( 0, 0%, 100%, 0.5 ) ), 
    to(   hsla( 0, 0%, 100%, 0.0 ) )
  );
  background-image: -o-linear-gradient( -90deg, 
    hsla( 0, 0%, 100%, 0.5 ) , 
    hsla( 0, 0%, 100%, 0.0 ) 
  );
}

#options li a:hover {
  background-color: #FF9393;
}

#options li a:active {
  background-color: #FF4F4F;
  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}

#options li a {
  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
}

#options li:first-child a {
  border-radius: 7px 0 0 7px;
  border-left: none;
}

#options li:last-child a {
  border-radius: 0 7px 7px 0;
}

#options li a.selected {
  background-color: #ce1717;
  text-shadow: none;
  color: #000000;
}


/* End: Recommended Isotope styles */



 form {
	margin: 0px;
	padding: 0px;
	/*border:1px solid #e2d1be;
	padding: 20px 20px 10px 20px; */
}

 form .input_field {
	height: 18px;
	width: 260px;
	border: 1px solid #666666;
	padding: 4px;
}

 form label {
	display: block;
	width: 100px;
	margin-right: 10px;
	font-size: 14px;	
}

 form textarea {
	width: 350px;
	height: 150px;
	border: 1px solid #666666;
	padding: 4px;
}

 form .submit_btn {
	margin-right: 80px;
	padding: 5px 10px;
	border: 1px solid #666666;
}



/*footer*/

footer   {
width:100%; 
padding:19px 0 0 0
}
.infooter  {
clear:both; 
width:100%
}
#footerContainer {
position:fixed; 
bottom:0; 
height:70px; 
border-top:1px solid #cccccc; 
background:#e2e2e2; 
z-index:1210
}

#footerinfo                 {float:left; width:310px; margin:0 10px 0 50px; padding:0}

#footerinfo p               {float:left; clear:both; margin:0; padding:0; color:#000; font:normal 11px/13px Calibri, Arial, Verdana, sans-serif; text-align:right}


	/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }