/* 
GLOBAL STYLES
*/

.hidden {
	display: none;
}

html {
	height: 100%;
	width: 100%;
	background-color: #dedede;
	background-image: url('../img/leather-tan.png');
	box-sizing: border-box;
	font-size: 100%;
}

body {
	box-sizing: border-box;
	width: 80%;
	max-width: 1280px;
	margin: 0 auto;
	color: #666;
	min-width: 320px;
	font-family: calibri;
	font-size: 12px; font-size: .8rem;
	line-height: 1.2em; line-height: 1.2rem;
	border-left: 10px solid rgba(255,255,255,0);
	border-right: 10px solid rgba(255,255,255,0);
	box-shadow: 0px 0px 10px #999;
}

.full_border {
	border-left: 10px solid rgba(255,255,255,0);
	border-right: 10px solid rgba(255,255,255,0);
	border-bottom: 10px solid rgba(255,255,255,0);
	box-shadow: 0px 0px 10px #999;
}

h1, h2, h3, #navigation ul li, input[type='text'], textarea, input[type='email'] {
	font-family: 'Josefin Slab', serif;
}


h1 {
	font-size: 45px; font-size: 2.5rem;
	line-height: 60px; line-height: 2.2rem;
	font-weight: 400;
	color: #569EA3;
	letter-spacing: 2px; letter-spacing: .05rem;
}

h2 {
	font-size: 25px; font-size: 1.8rem;
	margin: .5rem 0;
	line-height: 30px; line-height: 2rem;
	
}

h3 {
	font-size: 20px; font-size: 1.3rem;
	font-style: italic;
	line-height: 25px; line-height: 1.6rem;
	font-weight: 500;
}

body > p {
	line-height: 25px; line-height: 1.6rem;
}

div {
	box-sizing: border-box;
}

a {
	display: inline-block;
}

::selection {
	color: black;
	background: #E3DF6F;
}

::-moz-selection {
	color: black;
	background: #E3DF6F;
}

img {
	max-width: 100%;
	max-height: 100%;
}

.center_text {
	text-align: center;
}

/*							*\	
			HEADER
\*							*/


#login {
	width: 100%;
	text-align: right;
	padding-top: 2px; padding-top: .5rem;
	padding-right: 2px; padding-right: .5rem;
}

#header_container, #footer, #login {
	background-image: url(../img/wood_horiz_dark.jpg);
}

#header_container {
	height: 250px;
	width: 100%;
	padding: 0;
	background-color: #222;
}

#logo_whitespace {
	height: 78%;
	text-align: center;
}

#logo_whitespace a:active{
	position: relative;
	top: 1px;
}

#navigation ul li a{
	float: left;
	font-size: 20px; font-size: 1.3rem;
	padding: 0px 10px; padding: 1rem .8rem;
	color: inherit;
	font-weight: 400;
	letter-spacing: 1px; letter-spacing: .09rem;
	text-shadow: 0px 1px 1px #777, 0px -1px 1px black;
}

#navigation ul li:after {
	
}

#navigation ul li:hover {
	color: #71D2D9;
	cursor: pointer;
}


/*						*\	
		CONTENT
\*						*/



#content_container {
	width: 100%;
	background-color: rgba(255,255,255,1);
	display: inline-block;
	border-right: 1px solid #bfbfbf;
}


#content_container a, #login a {
	color: #666;
	border-bottom: 1px dotted #569EA3;
}

#content_container a:hover, #login a:hover {
	color: #666;
	border-bottom: 1px dotted #3B6A6E;
	background-color: #E3DF6F;
}

#content_container a:active, #login a:active {
	position: relative;
	top: 1px;
}

#content_main {
	width: 70%;
	float: left;
	padding: 24px; padding: 2rem;
	border-right: 1px solid #dedede;
}


#content_main img {
	border: 5px solid rgba(255,255,255,0);
	border-radius: 1px;

}

#content_main input[type='text'], select {
	padding: .5em;
}

#content_main legend{
	
}

input[type='submit'] {
	height: 3rem;
	width: 3rem;
	background-color:#777;
	border: 1px solid #396885;
	border-radius: 1.5rem;
	color: #e8e8e8;
	padding: .5em;
	text-shadow: 0px -1px 0px #254457, 0px 1px 0px #3C6E8C;
	box-shadow: inset 0px 0px 1px rgba(255,255,255,.8), 2px 2px 10px black;
	cursor: pointer;
	text-align: center;
}

input[type='submit']:hover, input[type='submit']:focus {
	box-shadow: inset 0px 0px 20px rgba(255,255,255,.5), 2px 2px 10px black;
	background-color: #498EB8;
}

input[type='submit']:active {
	position: relative;
	top: 1px;
	box-shadow: inset 0px 0px 20px rgba(255,255,255,.5), 2px 2px 5px black;
	background-color: #498EB8;
}


/*							*\	
	CONTENT MAIN TYPES
\*							*/



.blog_post {
	width: 100%;
	border-top: 1px dashed #bababa;
	padding: 12px 0 24px 0;	padding: 1rem 0 2rem 0;
	display: inline-block;
}

.blog_post img {
	float: left;
	max-width: 33%;
	margin-right: 12px;	margin-right: 1rem;

}

.post_date {
	padding-left: 1em;
}

.fam_tile {
	width: 23%;
	height: 200px;
	float: left;
	margin-right: 1%;
}

.record_view {
	width: 100%;
	margin: 2em 0em;
	padding: .5em .5em;
	font-size: 1rem;
	border-bottom: 1px dashed #d5d5d5;
}


/*							*\	
		NEW TICKET
\*							*/

.web_form {
	margin-top: 4em;
}

.web_form fieldset{
	margin: 2em 0;
	border: 1px solid #d5d5d5;
	padding: 1em;
	border-radius: 5px;
}

.web_form li {
	margin: .5em 0;
}

.web_form input[type='text'], .web_form input[type='tel'], .web_form textarea {
	width: 200px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #d5d5d5;
	font-size: .9rem;
	letter-spacing: .08rem;
}

.web_form input[type='text']:focus, .web_form input[type='tel']:focus, .web_form textarea:focus, .web_form select:focus {
	background-color: #ebebeb;
}

.web_form textarea {
	height: 200px;
	padding: .5rem;
	border-left: 1px solid #d5d5d5;
}

.web_form legend {
	padding: 0 1em;
	margin-left: 1em;
	border-left: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	font-size: 1rem;
	font-weight: bold;
}

.web_form label {
	width: 100px;
	float: left;
	padding: .5em 0;
	text-align: right;
	margin-right: 1.2em;
}

input[type='submit'].sub_right {
	float: right;
}


/*							*\	
			ASIDE
\*							*/



#content_aside {
	width: 30%;
	background-color: rgba(227,227,227,.8);
	float: left;
	border-left: 1px solid white;
	border-bottom: 1px solid #999;
	padding: 24px 0; padding: 2rem 0rem;
}

#content_aside p, #content_aside h3  {
	padding: 0 12px; padding: 0 1rem;
	box-sizing: border-box;
}

#content_aside p{
	padding: 6px 12px; padding: .5rem 1rem;
	width: 100%;
	background-color: #e8e8e8;
	border-top: 1px solid white;
	border-bottom: 1px solid  #dbdbdb;
}

#content_aside p:hover {
	background-color: #E3DF6F;
	border-top: 1px solid #F5F178;
	border-bottom: 1px solid  #D6D260;
}

.aside_section ul li{
	padding: 0 12px; padding: 0rem 1rem;
	line-height: 24px; line-height: 2rem;
}

#content_aside h3 {
	text-align: center;
	margin-top: 16px; margin-top: 1rem;
	margin-bottom: 12px; margin-bottom: 1rem;
}

#content_aside form {
	text-align: center;
}


.aside_section {
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 24px; padding-bottom: 2rem;
}

.aside_section input[type='text']{
	width: 70%;
	padding: 6px 12px; padding: .55rem 1rem;
	box-sizing: border-box;
	border: 0px solid #2B6F99;
	border-radius: 10px;
	background-color: #ababab;
	box-shadow: inset 0px 0px 5px #888;
	position: relative;
	left: 5px;
}


.aside_section input[type='text']:focus {
	box-shadow: 0px 0px 12px white, inset 0px 0px 5px #888;
}

.aside_section input[type='submit']{
	margin-top: 6px; margin-top: .5rem;
	position: relative;
	height: 54px;
	width: 54px;
	border-radius: 27px;	
	left: -5px;
}

.aside_section input[type='submit']:hover {
	box-shadow: inset 0px 0px 20px rgba(255,255,255,.5), 2px 2px 10px black;
	background-color: #498EB8;
}

.aside_section input[type='submit']:active {
	position: relative;
	top: 1px;
	box-shadow: inset 0px 0px 20px rgba(255,255,255,.5), 2px 2px 5px black;
	background-color: #498EB8;
}

#action_sc {
	margin-bottom: 3rem;
}

#action_sc a{
	margin: 0 .5rem;
	border: 1px solid white;
	padding: .25rem .5rem;
}

#action_sc a:hover {
	border-bottom: 1px solid white;
}



/*							*\	
			FOOTER
\*							*/

#footer {
	width: 100%;
	padding: 24px; padding: 2rem;
}

#contact p{
	margin-bottom: 24px; margin-bottom: 2rem;
	margin-left: 1%;
}

#footer form#contact {
	width: 50%;
	min-width:250px; 
}

#footer input[type='text'], #footer input[type='email'], #footer textarea {
	width: 95%;
	margin-left: 1%;
	background-color: transparent;
	border: 1px dashed #888;
	padding: 6px; padding: .5rem;
	color: white;
	font-size: 16px; font-size: 1.2rem;
}	

#footer input[type='text']:focus, #footer input[type='email']:focus, #footer textarea:focus {
	border: 1px solid #d3d3d3;
}

#footer input[id='ph'] {
	max-width: 150px;
	float: left;
}

#footer input[type='submit'] {
	float: right;
	margin-right: 5px;
	width: 50px;
	height: 50px;
}

#footer label {
	display: block;
	margin-top: 12px; margin-top: 1rem;
	margin-left: 1%;
	font-size: 12px; font-size: 1rem;
	font-weight: 100;
}


/*							*\	
			LOGIN
\*							*/

#content_login {
	width: 250px;
	margin: 0 auto;
	padding: 2em 0;
	text-align: center;
}

#content_login input[type='text'], input[type='password']{
	padding: 1em;
	font-size: 1.2em;
	text-align: center;
	width: 80%;
	min-width: 100px;
}

#content_login input[type='text']:focus, input[type='password']:focus{
	border: 1px solid #999;
	box-shadow: inset 0px 0px 15px #888;
}