/*
Website Name: MojoShowcase	
Website URI: http://www.mojoshowcase.com
Version: 1.0
Designed and Developed by: Tony Geer (http://www.tonygeer.com)

INDEX:
1. Layout
2. HTML tags
2. Utility Classes
3. Masthead
4. Navigation
5. Content 
6. Additional
7. Blog posts
8. Contact form
9. Comments
10. Footer
*/


/*=LAYOUT
---------------------------------------------------------------------------------*/

body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: #777;
	background: #fff url(../img/bg_body.jpg) repeat center top;
	}
	
.wrapper {
	width:870px;
	margin:0 auto;
	position: relative;
	}
	
#masthead {
	position: relative;
	}
	
#primary {
	float: left;
	width: 645px;
	padding: 50px 0;
	}	
	
#secondary {
	float: right;
	width: 195px;
	padding: 50px 0;
	}
	
#footer {
	
	}

/*=HTML tags
---------------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6 { 
    color: #111; 
    font-weight : normal;
	}

h2 { 
	margin-bottom : 1em;
	}

h3 {
	font-size : 1.5em;
	line-height : 1;
	margin-bottom : 1em; 
	}

h4 {
	font-size : 1.2em;
	line-height : 1.25;
	margin-bottom : 1.25em; 
	}
	
p, ul, ol {
	font-size: 14px;
	line-height: 1.6em;
	}
	
html.wf-active p, html.wf-active ul, html.wf-active ol {
	font-size: 15px;
	}	
	
a, a:visited {
	color: #509bc7;
	}

a:hover, a:active {
	color:#4d778d;
	}
	
strong {
	color: #000;
	}
	
blockquote {
	color:#7b7b7b;
	padding:0 18px;
	margin:25px 45px;
	border-left:3px solid #CCC;
	font:italic 1em Georgia, "Times New Roman", Times, serif;
	letter-spacing:.03em;
	}	
		
	
/* =UTILITY CLASSES
---------------------------------------------------------------------------------*/	

.amp {
	font-style: italic;
	font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-size: 1.2em;
	}
				
.left {
	float: left;
	}
	
.right {
	float: right;
	}		
	
p#pagination {
	font-size: 13px;
	color: #aaa
	}	
		
	
/*=MASTHEAD
---------------------------------------------------------------------------------*/	
#masthead {
	height: 100px;
	background: url(../img/bg_masthead.gif) no-repeat center bottom;
	}
	
html.wf-active #mojonetwork p {
	font-size: 13px;
	}	
	
#mojonetwork strong {
	color: #666
	}	

#masthead .wrapper {
	margin-bottom: 40px;
	}

#masthead hgroup h1 {
	background: #000 url(../img/logo.png) no-repeat left top;
	width: 270px;
	height: 90px;
	text-indent: -9999px;
	position: absolute;
	top: -20px;
	left: 0px;
	background-color: #ed217c !important;
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: colours;
	-webkit-animation-timing-function: ease;
	text-rendering: optimizeLegibility;
	}
	
@-webkit-keyframes colours {
	  0% {background-color: #ed217c;}
	 33% {background-color: #b20d57;}
	 100% {background-color: #c00689;}
	 100% {background-color: #ed217c;}
	}	
	
#masthead hgroup h1 a{
	width: 270px;
	height: 90px;
	position: absolute;
	top: -20px;
	left: 0px;
	}	
	
#masthead hgroup h2 {
	position: absolute;
	text-transform: lowercase;
	left: 99px;
	top: 44px;
	color: #777;
	font-size: 16px;
	}
	
html.wf-active #masthead hgroup h2  {
	font-size: 17px;
	}	

#masthead ul#social {
	position: absolute;
	right: 0;
	top: -23px;
	display: inherit;
	margin: 0;
	padding: 0;
	}
	
#masthead ul#social li {
	display: inline;
	margin-left: 11px;
	width: 16px;
	height: 16px;
	}	
	
#masthead ul#social li a {
	opacity:0.6;
	-webkit-transition-duration: .33s;
	-webkit-transition-property: opacity;
	-moz-transition-duration: .33s;
	-moz-transition-property: opacity;
	transition-duration: .33s;
	transition-property: opacity;
	width: 16px;
	height: 16px;
	}	
	
#masthead ul#social li a:hover {
	opacity:0.9;
	}	
	
		
	
/*=NAVIGATION
---------------------------------------------------------------------------------*/
#masthead nav {
	position: absolute;
	right: 0;
	top: 44px;
	}
	
#masthead nav ul {
	margin: 0;
	padding: 0;
	}	

#masthead nav ul li {
	float: left;
	list-style: none;
	margin-left: 25px;
	font-size: 16px;
	}
	
html.wf-active #masthead nav ul li  {
	font-size: 17px;
	}	
	
#masthead nav li a.current {
	color: #777;
	font-weight: bold
	}	
	
	
/*=PRIMARY
---------------------------------------------------------------------------------*/	
#primary ul {
	margin-left: 0;
	}

.entry_home {
	margin-bottom: 20px;
	clear: both
	}

.entry_home h1 {
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	margin: 0 15px;
	padding: 10px 0;
	}	
	
html.wf-active .entry_home h1  {
	font-size: 16px;
	}	
	
.entry_home em {
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	margin-left: 5px;
	}
	
html.wf-active .entry_home em  {
	font-size: 13px;
	}	
		
.entry_home a {
	color: #57acf4;
	}	
	
.entry_home a:hover {
	color: #fff;
	}	
	
.screen { 
	width: 635px; 
	height: 500px; 
	position: relative; 
	margin-bottom: 40px;
	}
	
.screen img { 
	box-shadow:0px 0px 15px #ddd;
	 -webkit-box-shadow:0px 0px 15px #ddd;
	 -moz-box-shadow: 0px 0px 15px #ddd; 
	 background-color: #fff;
	 padding: 5px;
	}	
	
.caption { 
	float: left; 
	position: absolute; 
	bottom: -4px;
	left: 5px;
	background: #000; 
	width: 100%; 
	opacity: .77; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=77);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=77)";
	}		

.entry_sec h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	}
	
html.wf-active .entry_sec h1 {
	font-size: 22px;
	}	
	
.entry_sec h2 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #555
	}	
	
#primary ul#details {
	width: 345px;
	margin: 0 0 30px 0;
	padding: 0;
	border-top: 1px solid #ddd;
	}	
	
#primary ul#details li {
	border-bottom: 1px solid #ddd;
	list-style: none;
	padding: 4px 0;
	}
	
#primary ul#details li a {
	color: #555;
	}	
	
#primary ul#details li a:hover {
	color: #000;
	}	
	
img.icon {
	float: left;
	margin: 3px 8px 0 2px;
	opacity: 0.5;
	-webkit-transition-duration: .33s;
	-webkit-transition-property: opacity;
	-moz-transition-duration: .33s;
	-moz-transition-property: opacity;
	transition-duration: .33s;
	transition-property: opacity;
	}	
	
#primary ul#details li:hover img.icon {
	opacity:0.8;
	}		
	
.desc {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -.-1em;
	}	
	
.not_found h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
	margin-top: 30px;
	}	
	
.not_found img { 
	box-shadow:0px 0px 15px #eee;
	 -webkit-box-shadow:0px 0px 15px #eee;
	 -moz-box-shadow: 0px 0px 15px #ddd; 
	 margin-bottom: 30px;
	}	
	

/*=SECONDARY
---------------------------------------------------------------------------------*/	
	
	
	
/*=FOOTER
---------------------------------------------------------------------------------*/	
#final {
	background: url(../img/bg_masthead.gif) no-repeat center top;
	padding: 20px 0 30px 0;
	color: #888
	}
	
#final p {
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-top: -10px;
	}	
	
html.wf-active #final p {
	font-size: 13px;
	}		
	
ul#credits {
	text-align: center;
	list-style: none;
	margin-bottom: 0;
	}	
	
ul#credits li {
	display: inline;
	text-align: center;
	}	
	
ul#credits li a {
	opacity:0.5;
	-webkit-transition-duration: .33s;
	-webkit-transition-property: opacity;
	-moz-transition-duration: .33s;
	-moz-transition-property: opacity;
	transition-duration: .33s;
	transition-property: opacity;
	width: 235px;
	height: 50px;
	}
	
ul#credits li a:hover {
	opacity:0.9;
	}	
	
/*=TIPTIP
---------------------------------------------------------------------------------*/	
#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

#tiptip_holder.tip_top {
	padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
	padding-top: 5px;
}

#tiptip_holder.tip_right {
	padding-left: 5px;
}

#tiptip_holder.tip_left {
	padding-right: 5px;
}

#tiptip_content {
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px #000;
	padding: 4px 8px;
	border: 1px solid rgba(255,255,255,0.25);
	background-color: rgb(25,25,25);
	background-color: rgba(25,25,25,0.87);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	}

#tiptip_content strong {
	color: #fff;
	display: block;
	font-size: 13px;
	}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: rgb(25,25,25);
	border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: rgb(25,25,25);
	border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: rgb(25,25,25);
	border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: rgb(25,25,25);
	border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}

/*=FORMS
---------------------------------------------------------------------------------*/
		
fieldset {
	border: none; 
	position: relative; 
	padding: 0;
}		
		
fieldset div { 
	margin: 0 0 10px 90px;
	position: relative;
}

fieldset div label { 
	line-height: 1.1em; 
	margin: 8px 20px 0 -90px;
	width: 110px; 
	float: left;
	font-weight: bold;
	font-size: 12px;
}

fieldset div input, fieldset div textarea, fieldset div select {
	display: block; 
	line-height: 1;
}

fieldset abbr { 
	color: #7b0101; 
	font-size: 14px; 
	font-weight: bold; 
	line-height: 1; 
	padding: 0 1px; 
	vertical-align: middle;
}

fieldset label abbr { 
	display: block; 
	font-size: 14px; 
	padding: 0; 
	position: absolute; 
	top: 10px;
	right: 210px; 
	width: 16px;
	border: 0
}

input[type=text], textarea, input[type=password] {
	border-width: 1px; 
	border-style: solid; 
	/*border-color: #636d77 #a3b4c4 #c7d2de; */
	border-color: #ccc;
	padding: 5px; 
	width: 270px;
	background: -moz-linear-gradient(100% 100% 90deg, #f5f5f5, #fff);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f5f5f5));
	font-family: "Heletica Neue", Arial, sans-serif;
	font-size: 14px;
	}

textarea {
	height: 220px 
	}

input.button {
	padding: 8px 12px;
	background-color: #000;
	background: -moz-linear-gradient(100% 100% 90deg, #f5f5f5, #fff);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2e9d40), to(#228632));
	border: 2px solid #fff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	box-shadow:0px 0px 15px #c0a478;
	-webkit-box-shadow:0px 0px 4px #bbb;
	-moz-box-shadow: 0px 0px 4px #eee;
	}

form ul {
	margin-top: 20px;
	font-size: 11px;
	}
	
form ul li {
	list-style: none;
	padding: 0;
	margin: 0 0 0 90px;
	}	
	
.submit_form {
	margin-top: 50px;
	}	

/*=BUTTONS
---------------------------------------------------------------------------------*/	

.button {
	font-family: "Helvetica Neue", "Lucida Sans", Arial, Verdana, sans-serif;
	font-weight: bold;
	font-size: 14px;
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: 4px 15px;
	text-shadow: 0 1px 1px rgba(0,0,0,.5);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);

 }
 
.button:hover {
	text-decoration: none;
	}

.button:active {
	position: relative;
	top: 1px;
	}
 
.orange {
	color: #fff;
	border: solid 1px #ed217c;
	background: #e75294;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed63a0), to(#cf0b62));
	background: -moz-linear-gradient(top,  #ed63a0,  #cf0b62);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed63a0', endColorstr='#cf0b62');
	}
	
.orange:hover {
	background: #cf0b62;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf0b62), to(#cf0b62));
	background: -moz-linear-gradient(top,  #cf0b62,  #cf0b62);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf0b62', endColorstr='#cf0b62');
	}	
	
#submit_button {
	margin: 15px 0 0 130px;
	}