/* @group styles */

@font-face { font-family:'Webly'; src: url('/Styles/fonts/weblysleekuisl.ttf'); src: url('../fonts/weblysleekuisl.ttf'); }
@font-face { font-family:'Webly-Bold'; src: url('/Styles/fonts/weblysleekuisb.ttf'); src: url('../fonts/weblysleekuisb.ttf'); }
@font-face { font-family:'Webly-Italic'; src: url('/Styles/fonts/weblysleekuisli.ttf'); src: url('../fonts/weblysleekuisli.ttf'); }
@font-face { font-family:'Webly-Light'; src: url('/Styles/fonts/weblysleekuil.ttf'); src: url('../fonts/weblysleekuil.ttf'); }

*, body {
	margin: 0;
	padding: 0;
}

@-ms-viewport,
@viewport {
	width: device-width;
}

body {
	line-height: 1.5;
	font-size: 100%;
	margin: 66px 0 24px 0;
	background: #fff;
	color: rgba(0,0,0,0.7);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: Webly;	
}

i {
	font-style: normal;
	font-family:"Webly-Italic";
}
	
terms {
	color: #3f71c2;
	/*text-transform: uppercase;*/
	font-weight: bold;
	/*letter-spacing: 0.15em;*/
}

a {
	text-decoration: none;
	color: #3f71c2;
	font-family: "Webly-Light";
	background-color: rgba(210,221,228,0.0);	 /* blueish edge */
	-o-transition-property: color,background;
	-webkit-transition-property: color,background;
	-moz-transition-property: color,background;
	transition-property: color,background;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;	
	}
a:hover,
a:focus {
	color: #333;
	}
	
a:visited {
	background: none;
	font-weight: normal;
	}
	
h1 {
	/*font-family: "Lucida";*/
}
	
h4, cite, footer, .date, .social p, .org, .details {
				/*font-family: "Lucida";*/
				font-weight: normal;
}

h2, h3, nav, .previous a, .next a, .intrologo {
	/*font-family: "Lucida";*/
}

h1,h2,h3,h4 {
	text-rendering: auto;
}

header {
	border-bottom: 2px dotted #ccc;
	min-height: 180px;
	}
	
h1 {
	font-size: 2.05em;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #ccc;
	margin: 0 25% 0 0 ;
	padding: 0 0 1em 0;
	-webkit-font-smoothing: subpixel-antialiased;
	}
	
#home h1{
	margin: 0;
}
	
h1 a {
	font-weight: 300;
	}
	
h1 strong {
	color: #3f71c2;
	font-weight: 300;
	letter-spacing: 1px;
	}
	
h2 {
	font-size: 1.125em;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 1em 0;
	color: #3f71c2;
	text-transform: uppercase;
	letter-spacing: 2px;
	}
	
h2 a {
	font-weight: 600;
	}
	
application h2 {
	margin: 0 0 1.5em 0;
	}
	
h3 {
	font-family: "Webly-Light";
	font-size: 1.0em;
	line-height: 1.2;
	margin: 0 0 0.5em 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #3f71c2;
}

p+h3, ul+h3, ol+h3 {
	margin: 2em 0 0.25em 0;
	}
	
h3.date {
	margin: 0 0 1.5em 0;
	font-size: 0.81em;
	}
	
h4 {
	font-size: 0.875em;
	font-weight: bold;
	}
	
p, ul, ol, .lines, object, input, code {
	margin: 0 0 0.875em 0;
	}
	
p, ul, ol, cite, table, code, figcaption, #fusionads {
	font-size: 0.875em;
	text-align: justify;
	}
	
section p,
section ul,

/*selected states*/
	#default .n-apps a,
	#apps .n-apps a,
	#shop .n-shop a,
	#service .n-service a,
	#gallery .n-gallery a,
	#tag .n-gallery a,
	#downloads .n-downloads a,
	#iconreference .n-downloads a,
	#contact .n-contact a { 
		color: #333;
	}

.date {
	text-transform: uppercase;
	font-size: 0.875em;
	font-weight: bold;
	letter-spacing: 2px;
	}
	
.details {
	list-style: none;
	font-size: 0.75em;
	overflow: hidden;
	padding: 0;
	margin: 2em 0 1em 0;
	}
	
.details li {
	float: left;
	margin: 0 1em 0 0;
	line-height: 1.4;
	border-right: 1px solid #ccc;
	padding: 0 1em 0 0;	}
	
li.tags,
li.service {
	border-right: 0;
	padding: 0 1em 0 0;
	}
	
.posted b {
	font-size: 1em;
	letter-spacing: 1px;
	color: #b91d1d;	
	text-transform: uppercase;
	}
	
.prices b {
	font-size: 1em;
	color: #119b02;	
	letter-spacing: 1px;
	font-weight: normal;
	text-transform: none;
	}
	
.details span {
	display: block;
	text-transform: uppercase;
	font-weight: bold;
	color: #aaa;
	}
	
.logo {
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #222;
	}
	
.intrologo {
	text-transform: uppercase;
	font-size: 90%;
	letter-spacing: 0.15em;
}	

footer {
	color: #666;
	font-size: 0.75em;
	}
	
/* @end */

/* @group Responsive Typesetting */
	
@media screen and (max-width: 500px) {
	nav ul{font-size: 0.75em;}}
	
@media screen and (max-width: 800px) {
	body { font-size: 95%; }}
	
@media screen and (min-width: 1024px) {
	body { font-size: 105%; }}
	
		
/* @end */

/* @group Layout */

/*html5 elements*/	
application,section,nav,header,footer,figure,figcaption {
	display: block;
	}
	
/*Borders*/
#te, #le, #re, #be {
	position: fixed;
	z-index: 10;
	background-color: #d2dde4;
	display: block;
}

#te {
	height: 10px;
	left: 0;
	right: 0;
	top: 0;
	padding: ;
}

#te b {
	display: block;
	height: 10px;
	position: absolute;
	left: 74%;
	right: 8%;
	background: url("../images/mosaicpatch.gif");
	}

#be {
	height: 20px;
	left: 0;
	right: 0;
	bottom: 0;
}
#le {
	width: 10px;
	left: 0;
	bottom: 0;
	top: 0;
}

#re {
	width: 10px;
	top: 0;
	right: 0;
	bottom: 0;
}
/*Main Layout*/
.page {
	margin: 0 6%	
	}
	
.logo {
	margin: 0 0 1em 78%;
	background-image: url(../images/applogo.png);
	background-repeat:no-repeat;
	padding: 14px 0 2px 0;
	text-indent: 40px;
	}
	
nav {
	overflow: hidden;
	width: 22%;
	float: right;
	margin: 0 0 0 3%;
	}

header {
	position: relative;
	margin: -40px 0 1em 0;
	padding: 0 0 1em 0;
	width: 70%;
	}
	
.icon {
	float: right;
	width: 25%;
	text-align: center;
	margin-left: 2em;
	}
	
.icon img {
	width: 100%;
	height: auto;
	}
	
#content {
	width: 100%;
	padding: 0 0 3em 0;
	}

#main {
	width: 72%;
	float: left;
	padding: 0 0 2em 0;
	}
	
#side {
	float: right;
	width: 22%;
	}
	
footer {
	clear: both;
	border-top: 2px dotted #ccc;
	padding: 1.5em 0 3em 0; 
	}
footer p {
	margin: 0;
	}

/* 01 home Section*/	

.home+#side {
	display: none;
}

#main.home {
	width:100%;
}

#default header,
#home header {
	border: 0;
}


#default .home application {
	width:50%;
	float:  left;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
	-o-transition-property: width,height;
	-webkit-transition-property: width,height;
	-moz-transition-property: width,height;
	transition-property: width,height;
	 -o-transition-duration: 0.2s;
	 -webkit-transition-duration: 0.2s;
	 -moz-transition-duration: 0.2s;
	 transition-duration: 0.2s;	
	}

.home application {
	border: 0;
}

#default .home application h2 {
	margin: 0;	
	padding-top:75%;
}

#default .home application h2 a{
	text-indent: -999em;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	padding: 1em ;
}

#default .home application h2 a:hover{
	text-indent: 0;
	font-family:'Webly-Light';
	font-size: 1.0em;
	font-weight: normal!important;
	vertical-align: middle;
	text-align: center;
	background: rgba(93,132,195,0.8);
	color: #fff;
}

#default .home application .body {
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;	
}

.home application .body span {
	margin-left: 10px;
	font-size: 0.9em;
	line-height: 1;
	margin: 0px;
}

.home application .body {
	padding: 0;
	margin: 0;	
}

.home application img {
	margin: 0;
}

.home .centered img {
	margin: 0 auto;
}
	
/* 03 Mosaizerian */

application {
	margin: 0 0 1em 0;
	padding: 0 0 0.5em 0;
	border-bottom: 2px dotted #ccc;
	color: rgba(0,0,0,0.7);
	}

application img {
	height: auto;
	max-width: 100%;
	display: block;
	margin: 2em auto;
	}
	
figure {
	margin: 1em 0;	
}

application figure img {
	margin: 0;
}
	
application img.fr {
	float: right;
	margin: 0 0 1.5em 1.5em;
	width: auto;
}

.fl {
	float: left;
	margin: 0 0.5em 0.5em 0;	
}

.fr {
	float: right;
	margin: 0 0 0.5em 0.5em;	
}
.appicon {
	border-radius: 9px;
	-webkit-border-radius: 9px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 1px rgba(0,0,0,0.7);
}
	
application object,
application embed,
application iframe,
application .youtube-player {
	width: 100%;	
	}
	
.video object,
.video embed,
.video iframe,
.video .youtube-player {
	width: auto;	
	}
	
.photo img {
	margin: 0 0 0.5em 0;
	}
	
.backanforth {
	overflow: hidden;
	border-bottom: 2px dotted #ccc;
	margin: 0 0 0.8em 0;
	}
	
.disclaimer {
	overflow: hidden;
	border-bottom: 2px dotted #ccc;
	margin: 0 0 1.5em 0;
	font-size: 0.65em;
	}	

	.caption {
	text-align: right;
	margin: -1.5em 0 2em 0;
	color: #555;
	font-family:"Webly-Italic";
}
		
/*Side items*/

section{
	margin: 0 0 1em 0;
	background-repeat: no-repeat;
	background-position: 0 0.5em;
	}
	
#side section{
	margin: 0 0 3em 0;
	}
		
/* @end */

/* @group Layouts for resolutions */

/*layouts smaller than 600px, iPhone and mobiles*/
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {

		html {
		background-color: #d2dde4;
		padding: 12px;}
		
		#be, #te, #le, #re { display: none;}
		body { margin: 0; padding: 16px; font-size: 110%;}
		.page { margin: 0; }
		.logo {
			margin: 0 auto;
			background-position: left center;
			text-align: center;
			width:  5.5em;
			height: 1.5em;
			line-height: 1;
			padding: 1.2em 0 0 0;
		}
		header {
			overflow: hidden;
			margin: 0 0 1em 0; 
			min-height: 1em;
			width: auto;
			}
		h1{font-size: 1.5em;}
		h2 {text-align: center;}
		nav {
			margin: 1em 0;
			width: auto;
			float: none;
			text-align: center;
		}
		nav li {
			display: inline;
		}
		nav a {
			display: inline;
			margin: 0 0.2em;
			line-height: 2;
			letter-spacing: 0;
		}		
		nav li:last-child a {
			margin: 0;
		}
	
		#side {
			float: none;
			width: auto;
		}
		
		#main {
			width: 100%;
			float: none;
			padding: 0 0 2em 0;
		}
		#side {
			border-top: 2px dotted #ccc;
			padding: 1.5em 0 3em 0;
		}
		#goodies #side {border-top: 0;}
		#side section {margin: 0 0 1em 0;}
		
		section p,.fusionentire { font-size: 0.875em; }
		.thumbs li {width: 46%;}
		.postcard {
			width: 100%;
			margin: 0 0 1em 0;
			float: none;
	}
	.vcard p {
	display: inline;
	padding: 0 0.25em 0 0;
	}
	.vcard p:after {
	content: "/";
	padding: 0 0 0 0.25em;
	color: #999;
	}
	/*50% is 4 on a row*/
	#default .home application {width: 50%;}
	}

@media screen and (min-width: 920px) {
	/*layouts larger than 900px*/
	nav, 
	.logo, 
	footer {	
		width: 16%;
		position: fixed;
		right: 8%;
		z-index: 100;
		}
	#te b {
		left: 76%;
		right: 8%;
	}
	header {margin: 0 0 1em 0;width: auto;}
	h1 { padding: 0;}
	.logo { top: 40px; }
	nav { top: 255px; bottom: 20px; background: url(../images/corner-small.png) no-repeat left bottom; }
	nav a {
		float: none;
		text-align: left;
		margin: 0.2em 0;
		width: auto;
	}
	/*selected states*/
	#default .n-apps a,
	#apps .n-apps a,
	#shop .n-apps a,
	#service .n-service a,
	#gallery .n-gallery a,
	#downloads .n-downloads a,
	#iconreference .n-downloads a,
	#contact .n-contact a,
	#content { width: 76%; }
	.body { padding: 0 0 0 3.8em;}
	}
	footer {
		bottom: 2px;
		padding: 0;
		border: 0;
	}
	.icon img { width: auto; }
	.needs li {
	margin: 0 0 0.75em -3.8em;
	padding: 0 0 0 3.8em;
	background-position: 1em 0;
	}
	/*33% is 4 on a row*/
	#default .home application {width: 25%;}
	#home #main { margin: -25px 0 0 0;}
	}
	
	
@media screen and (min-width: 1480px) {

	body { font-size: 115%;}
	#side, .icon { width: 32%; }
	#main { width: 60%; }
	
	#side section {
		width: 46%;
		margin: 0 8% 2em 0;
		float: left;
	}
	
	#side section:nth-child(odd) { clear: left; }
	#side section:nth-child(even) { margin: 0 0 2em 0; }
	section.fusion, section.emaillink, section.clients { border: 0; padding: 0;}
	.emaillink { text-align: left;}
	.thumbs li {width: 21%;}
	/*25% is 4 on a row*/
	#default .home application { width: 25%; }
	.page { margin: 0 8% 0 12%; }	
	}
	
/*Just iPhone*/
@media only screen and (max-device-width: 480px) {
	h2 {
	letter-spacing: 0;
	text-transform: capitalize;
	}
}
	
/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		html {background-color: #d2dde4;padding: 12px;}
		#be, #te, #le, #re { display: none;}
		body { margin: 0; padding: 66px 24px 24px 24px;}
		.page { margin: 0; }	
		a, .posted b {font-weight: normal!important;}
		h1 {color: #ccc;}
		footer {clear: both;position: static;}
	}

/* @end */