@import url(base-forms.css);

html
{
	height:100%;
}
body
{
	margin:0;
	height:100%;
	color:#404040;
}
body *
{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
body a:not(.button):not(.tab)
{
	color:#0065b7;
	text-decoration:none;
}
body a:not(.button):hover
{
	color:#000;
}


/*	header
*/

#page-header
{
	position:relative;
	/* min-height:260px; */
	background-color:#f2f2f2;
	background-color:#f9f9f9;
	
	padding-top:50px;
}

#page-header-top
{
	/* position:relative; */
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	
	background-color:#54a585;
	background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,0));
	
	z-index:1000;
}
#page-logo
{
	position:absolute;
	bottom:-2px;
	left:40px;
}
#page-title
{
	padding:10px 0 0 80px;

	color:white;
	font-size:18px;
	font-weight:500;
	text-shadow:0 1px 1px rgba(0,0,0,.15);
}

#page-header-tagline
{
	width:100%;
	min-height:50px;
	background-color:#0065b7;
	padding:10px 20px;
	
	color:white;
	font-size:21px;
	font-weight:300;
	text-align:center;
}
#page-header-intro
{
	font-style:italic;
	font-size:19px;
	font-weight:300;
	text-align:center;
	
}
#page-header-intro > div
{
	max-width:740px;
	margin:auto;
	padding:30px 20px 35px 20px;
}


/*	body
*/

#page
{
	margin:auto;
	padding:0 15px 50px 15px;
	padding-bottom:50px;
	/* padding-top:40px; */
	width:900px;
	max-width:100%;
}

#page > .header
{
	margin:40px -15px 0 -15px;
	padding-bottom:5px;
	border-bottom:1px solid rgba(0,0,0,.5);	

	font-weight:500;
	font-size:16px;
}

.samples
{
	margin:16px 0;
}
.sample
{
	position:relative;
	float:left;
	width:50%;
}
.sample img
{
	width:100%;
}
.sample div
{
	position:absolute;
	left:10%;
	width:80%;
	bottom:50px;
	
	padding:10px;
	background-color:rgba(255,255,255,.8);	
	
	color:#0065b7;
	font-weight:500;
	text-align:center;
}
.sample:hover div
{
	background-color:#0065b7;
	color:white;
}


/*	forms
*/

form > .submit
{
	padding-top:20px;
	text-align:center;
}
form a.submit
{
	background-color: #54a585;
	border-color: rgba(0,0,0,.3);
}
form a.submit:hover
{
	border-color: rgba(0,0,0,.6);
	background-color: #4b9477;
}
form ul
{
	padding:0;
}
form .ui-autocomplete li.ui-menu-item
{
	color:#404040;
}
form .ui-autocomplete li.ui-menu-item.ui-state-focus
{
	color:#0065b7;
	background-color:#f9f9f9;
}


/*	modals
*/

div.modal
{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;

	background-color:rgba(255,255,255,.9);
	z-index:10000;
	
	transition:opacity .25s ease 0s;
	
	overflow-y:auto;
	
	text-align: center;
}
div.modal.remove
{
	opacity:0;
}
div.modal:before
{
	/*	vertically centers dialogue within modal */
	content:'';
	display:inline-block;
	height:100%;
	max-height:100vh;
	vertical-align:middle;
}
div.modal .dialog
{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	
	margin:0;
	padding:10px;

	width:400px;
	max-width:96%;

	text-align:left;
}
div.modal .dialog .head
{
	padding-bottom:12px;
	border-bottom:1px solid rgba(0,0,0,.3);

	font-size:18px;
	font-weight:500;
	line-height:normal;
}
div.modal .dialog .body
{
	padding:15px 0 20px 0;
	font-size:16px;
	line-height:20px;
}
div.modal .dialog .footer
{
	margin-bottom:40px;
	padding-top:15px;
	border-top:1px solid rgba(0,0,0,.3);

	text-align:right;
}








/*	responsive layout
*/

@media (max-width:930px)
{
	#page > .header
	{
		padding-left:15px;
	}
}

@media (max-width:600px)
{
	.sample
	{
		width:100%;
	}

}