/*
Theme Name: Ninj4
Theme URI: http://www.g2markup.com
Description: Theme for G2Markup, 2010.
Author: Guido Vargas
Author URI: http://www.g2markup.com
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}

table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
form legend {display: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ol, ul {list-style: none;}
hr {display: none; visibility: hidden;}

:focus {outline: 0;}

/* Common */

body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	background: #222;
	font-size: 1em;
}

h2 {
	font-size: 1.4em;
	padding-bottom: 10px;
}

h3 {
	font-size: 1.1em;
	padding-bottom: 10px;
}


p { padding-bottom: 10px; }

#wrapper ul {
	margin-left: 40px;
	padding-bottom: 10px;
}

#wrapper li {
	list-style: square;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

a {
	color: #60ACD8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Navigation */

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#f2eade;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #eadbc8;
    text-decoration:none;
    text-align:center;
    padding-top:60px; 
}
ul#navigation li a:hover{
     background-color:#eadbc8;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url(images/home.png);
}
ul#navigation .about a{
    background-image: url(images/about.png);
}
ul#navigation .testimonials a      {
    background-image: url(images/testimonials.png);
}
ul#navigation .portfolio a      {
    background-image: url(images/portfolio.png);
}
ul#navigation .blog a   {
    background-image: url(images/blog.png);
}
ul#navigation .i-heart a     {
    background-image: url(images/i-heart.png);
}
ul#navigation .contact a    {
    background-image: url(images/contact.png);
}

/* Content */

#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}

#mask {
	width:500%;
	height:100%;
	}

.item {
	width:20%;
	height:100%;
	float:left;
}
	
	
.content {
	width:960px;
	height:500px;
	top:50%;
	left: 50%;
	margin-left: -480px;
	margin-top: -250px;
	background: url(images/slide-bg.jpg) no-repeat;
	position:relative;
	}
	
#about .content, #i-heart .content {
	background: url(images/slide-bg2.jpg) no-repeat;
}
	
.col-left {
	padding: 40px 20px 40px 40px;
	width: 420px;
	float: left;
}

.col-right {
	padding: 40px 40px 40px 20px;
	width: 420px;
	float: left;
}



	.selected {
		background:#fff;
		font-weight:700;
	}

	.clear {
		clear:both;
	}

.works, .testimonialss {
	padding: 40px;
}

.work {
	width: 200px;
	height: 120px;
	float: left;
	padding: 8px;
}

.work img {
	border: 2px solid #000;
}

.work p {
	font-size: 0.7em;
	text-align: center;
}

.testimonialss h4 {
	font-size: 1.8em; text-align: center;
}

.testimonialss p {
	font-size: 0.8em; text-align: right; padding-right: 100px;
}