/*
	styles.css
*/

body {
	font-family: serif;
        background-image: url("images/static.gif");
        background-size: cover;
        background-repeat: repeat;
	background-color: #f7fbfc;
	margin:0;
	padding:0;
}
a {
	text-decoration: none;
}
a:link {
	color: #c90000;
}
a:visited {
	color: #c90000;
}
a:hover {
	color: #651a20;
}
a:active {
	color: #c90000;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
}
input, select, button, textarea {
	max-width: 100%;
}
meter, progress, output {
	max-width: 100%;
}

#sidecol {
	position: fixed;
	top: 105px;
	left: 0;	
	width: 30%;
	max-width: 30%;
	text-align: right;
}
#sidecol h2 {
	color:#4717F6;
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
	font-size: 0.9em;
}
#sidecol p {
	font-family: sans-serif;
	font-size: 0.4em;
	color: #0a1612;
}
#sidecol blockquote {
	float: right;
	background: #152e3a;
	color: #ded7d0;
	font-family: sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	padding: 0.5em;
	text-align: center;
	margin: 0 1em 1em auto;
}
#content {
	float: right;
	width: 70%;
	color: #0a1612;
}
#content h1 {
	color:#152e3a;
	font-family: sans-serif;
	font-size:1.5em;
	margin-top: 1px;
}
#content h2 {
	color:#152e3a;
	font-size:0.8em;
	margin-bottom: 1px;
}
#content p{
	color:#0a1612;
	line-height:1.5em;
	font-size: 0.9em;
}
#content a {
	text-decoration: underline;
}
#content a:link{
	color:#983b43;
}
#content a:visited{
	color:#983b43;
}
#content a:hover{
	color:#B82601;
}
#content a:active{
	color:#983b43;
}
#content blockquote {
	width: 75%;
	background: #152e3a;
	color: #ded7d0;
	font-family: sans-serif;
	font-size: 0.7em;
	padding: 2em;
	margin-right: 1em;
	text-align: justify;
	line-height:1.5em;
	width: auto;
	display: table;
}
@media only screen and (max-width: 729px) {

	#sidecol {
	float: center;
	position: static;
	width: 80%;
	max-width: 100%;
	}
	#sidecol h2{
	font-size: 0.8em;
	line-height: 0.8em;
	}
	#content {
	float: none;
	width: 90%;
	padding: 15px;
	}
	#content h1 {
	font-size: 1.5em;
	text-align: center;
	}
	#content h2{
	text-align: center;
	}
	#content blockquote{
	margin: 0 auto;
	font-size: 0.7em;
	}
	#content p {
	float:center;
	text-align: justify;
	font-size: 0.8em;
	line-height: 1.5em;
	text-justify: inter-character;
	}
}
#contproper, #sideproper {
	padding-left: 5px;
	padding-right: 5px;
}
#contproper {
	max-width: 529px;
}
#sideproper {
	padding-right: 30px;
	padding-top: 15px;
}

#content .line-1{
    position: left;
    float: left;
    width: 11.3em;
    line-height: 1;
    margin: 0 auto;
    border-right: 15px solid #961313;
    color: #961313;
    font-family: sans-serif;
    font-size: 1.5em;
    font-color: #961313;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;

   
}

/* Animation */
.anim-typewriter{
  animation: typewriter 1.1s steps(22) 4s 1 normal both,
             blinkTextCursor 420ms ease infinite alternate;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 11.3em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: #961313;}
  to{border-right-color: transparent;}
}