/* CSS Document */

/*<>FONTS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

@font-face {
    font-family: 'OpenSansLight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'OpenSansSemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansBold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpenSansExtrabold';
    src: url('fonts/OpenSans-ExtraBold-webfont.eot');
    src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
  font-family: "twentyone";
  src:url("fonts/twentyone.eot");
  src:url("fonts/twentyone.eot?#iefix") format("embedded-opentype"),
    url("fonts/twentyone.ttf") format("truetype"),
    url("fonts/twentyone.svg#twentyone") format("svg"),
    url("fonts/twentyone.woff") format("woff");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "twentyone" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "twentyone" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-group:before {
  content: "a";
}

.icon-email:before {
  content: "b";
}

.icon-address:before {
  content: "c";
}

.icon-phone:before {
  content: "d";
}

.icon-envelope:before {
  content: "e";
}

.icon-fax:before {
  content: "f";
}

.icon-mobile:before {
  content: "g";
}

.icon-home:before {
  content: "h";
}

.icon-navicon:before {
  content: "i";
}

.icon-arrow-r:before {
  content: "j";
}

.icon-arrow-l:before {
  content: "k";
}

.icon-arrow-u:before {
  content: "l";
}

.icon-arrow-d:before {
  content: "m";
}

.icon-navicon-2:before {
  content: "n";
}

.icon-mobile-2:before {
  content: "o";
}

.icon-contact:before {
  content: "p";
}

.icon-search:before {
  content: "q";
}

.icon-pinterest:before {
  content: "r";
}

.icon-googleplus:before {
  content: "s";
}

.icon-skype:before {
  content: "t";
}

.icon-twitter:before {
  content: "u";
}

.icon-linkedin:before {
  content: "v";
}

.icon-youtube:before {
  content: "w";
}

.icon-instagram:before {
  content: "x";
}

.icon-facebook:before {
  content: "y";
}

.icon-vimeo:before {
  content: "z";
}

.icon-flickr:before {
  content: "A";
}

.icon-star:before {
  content: "B";
}

.icon-share:before {
  content: "C";
}

.icon-cloud:before {
  content: "D";
}


/* Base structure
-------------------------------------*/

html {
	height: 100%;
	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
}

body {	
	min-height: 100%;
	margin: 0;
	font-family: 'OpenSansLight';
	background: #e0157e;
}


body, button, input, select, textarea {
	font: 1em/1.625;
	color: #222; /* Full black on white is too much contrast, #222 is a better default */
}

p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, figure, figcaption, button, hr {
	margin: 0 0 1.625em;
}

nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

nav li {
    display:inline;
}


/* Text 
-------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	font-family: 'OpenSansBold';
}

h1 {
	font-size: 5em; /* 48px */
	line-height: 1.1471em;
	margin: 0 0 0.3824em;
	color: #fff;
}

h2 {
	font-size: 2em; /* 32px */
	line-height: 1.2381em;
	margin: 0 0 0.619em;
	color: #fff;
	font-family: 'OpenSansLight';
}

h3 {
	font-size: 1.5em; /* 24px */
	line-height: 1em;
	margin: 0 0 1em;
	color: #444;
}

h4 {
	font-size: 1.25em; /* 20px */
	line-height: 1em;
	margin: 0 0 1em;
	color: #666;
}



small {
	font-size: 0.625em; /* 10px */
	margin: 0 0 2.6em;
}

/* Links
---------------------------------------- */

a, a:visited {
	text-decoration: none;
	color: #fc0000;
}

a:hover {
	text-decoration: underline;
}

a:hover img {
	text-decoration: none;
}

a:focus {
	outline:none;
}

a:hover, a:active {
	outline: none;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	max-width: 100%; /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
	/* _width: 100%; /* IE6 doesn't support max-width, so we just use width. If the image is larger than the container, just uncomment this. If it is smaller than the container, uncomment and change the 100% value to an absolute one */
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	border: 0;
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input {
	*overflow: auto;
}



/*Clearr Fix
-----------------------------------------*/
.clearfix:before,  .container:after { 
    content: ""; 
    display: table; 
}
.clearfix:after { 
    clear: both; 
}

/* IE 6/7 */
.clearfix { 
    zoom: 1; 
}

/* Firefox*/
header { padding-top: .001em }

/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width: 100%;
	max-width: 48em;
	padding:1em;
	overflow:hidden;
}
	/* ----------- basic ----------- */
	#basic{
		border:solid 2px #DEDEDE;
	}
	#basic h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#basic p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #dedede;
		padding-bottom:10px;
	}
	#basic label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#basic .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#basic input{
		float:left;
		width:200px;
		margin:2px 0 30px 10px;
	}
	#basic textarea{
		float:left;
		width:200px;
		margin:2px 0 30px 10px;
		}
	#basic button{ 
		clear:both;
		margin-left:150px;
		background:#888888;
		color:#FFFFFF;
		border:solid 1px #666666;
		font-size:11px;
		font-weight:bold;
		padding:4px 6px;
	}


	/* ----------- stylized ----------- */
	#stylized{
		border:solid 1px #eee;
		background:#fff;
	}
	#stylized h1 {
		font-size:1.25em;
		font-weight:bold;
		margin-bottom:0.5em;
		text-transform:none;
		color: #e0157e;
	}
	#stylized p{
		font-size:1em;
		color:#666666;
		margin-bottom:1.5em;
		border-bottom:solid 1px #eee;
		padding-bottom:0.75em;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:12em;
		float:left;
	}

	#stylized label span {
		display: block;
		color: #e0157e;
		display:block;
		font-size:0.75em;
		font-weight:normal;
		text-align:right;
	}

	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #eee;
		margin:2px 0 20px 10px;
		padding:1em;
	}

	#stylized textarea{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #eee;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:150px;
		width:125px;
		height:31px;
		background:#e0157e url(button.png) no-repeat;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
		border:0;
	}

	.form-element {
		width:90%;
		clear: all;
		margin-bottom: 1em;
	}

	.form-element label {
		width: 40%;
	}

	.form-element input, .form-element textarea{
		width: 60%;
	}
	
	
/* -------------------------------------*/

#log {
	width: 400px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
	font-size: 0.75em;
	font-weight:bold;
	color: #fff;

}
 
#log_res {
	overflow: auto;
}
 
#log_res.ajax-loading {
	padding: 20px 0;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}


.main {
	width: 80%;
	margin: 2em auto;
}

h2.site-type {
	font-family: 'OpenSansExtrabold';
	margin:2rem 0;

}


.site {
	width: 28%;
	margin-right:0.5%;
	display: inline-block;	
	background: rgba(255,255,255,0.9);
	vertical-align: top;
	height:30rem;
	padding:3rem 1.5rem;
	clear: both;
	position: relative;
	border-radius: 4px;
}

.site > div {
	margin-bottom: 1rem;
}

.site-title {
	font-size: 1.25rem;
	height:50px;
	border-bottom:1px solid #eee;
	margin-bottom: 1rem;
}
.site-link {
	background: #e0157e;	
	padding:0.5rem;
	display: inline-block;
	border-radius: 4px;
	position: absolute;
	right:2rem;
	bottom:2rem;
}

.site-link a {
	color: #fff;
	text-transform: uppercase;
	font-size: 80%;
	font-family: 'OpenSansRegular';
	letter-spacing: 1px;
}

.site-updates {
	font-size: 90%;
}

.site-updates span {
	font-family: 'OpenSansSemibold';
	padding-right: 0.5rem;
}



/* Print styles 
-----------------------------------------*/

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}