/* Styles for the ninja website should be in here */

/* -- Custom Page CSS -- */

.pageTitle {
	font-weight:bolder !important;
	position:absolute;
	top: 132px;
	left:155px;
}

/* MainPage */

#contentBox {
	width:490px;
	float:left;
}

#LeftBar, #Sidebar {
	width:265px;
	float:left;
	padding-left:5px;
}
#RightBar {
	width:570px;
	float:right;
}

#contactBar {
	font-size:105%;
	width:100%;
	float:right;
	position:absolute;
	top:81px;
	right:27px;
	z-index:555;
	height:46px;
}
#contactBar li {
	line-height:1.1em;
	float:right;
	display:inline;
	height:46px;
	margin:5px 15px;
}

#contactBar li#phone {
	padding-left:30px;
	background-repeat: no-repeat;
	background-image:url(../images/ninja/phoneIcon.png);
}
#contactBar li#phone span {
	color:#666;
	position:relative;
	top:10px;
}
#contactBar li a#mail {
	color:#666;
	width:125px;
	text-decoration:none;
	padding-left:30px;
	height:46px;
	display:block;
	background-repeat: no-repeat;
	background-image:url(../images/ninja/mailIcon.png);
}
#contactBar li a#mail:hover {
	color:#f26722;
	text-decoration:underline;
}
#contactBar li a#mail span{
	display:block;
	position:relative;
	padding-left:9px;
	top:10px;
}

/* ----------------------------
 * mainpage 3 service boxes
 *  */


ul#servicesChooser {
	border-top:1px solid #ccc;
	padding:15px 0 0 0;
	margin:0 0;
	position:relative;
	width:100%;
	height:100%;
	z-index:45;
}

ul#servicesChooser li {
	  width:33%;
	  margin:0;
	  display:inline-block;
	  position:relative;
	  left:7px;
}

ul#servicesChooser a {
	display:block;
	float:left;
	width:278px;
	height:237px;
	padding:0;
}
ul#servicesChooser a span.serviceHeading {
	display:none;
	position:absolute;
	left:-9990px;
}
ul#servicesChooser a span.serviceText {
	display:none;
	position:absolute;
	left:-9990px;
}
ul#servicesChooser a:hover {
	text-decoration:none;
}
ul#servicesChooser a#software {
	background:url(../images/ninja/software.png) no-repeat 0 -237px;
}
ul#servicesChooser a#software:hover, ul#servicesChooser a#software.on {
	background:url(../images/ninja/software.png) no-repeat 0 0;
}
ul#servicesChooser a#websites {
	background:url(../images/ninja/websites.png) no-repeat 0 -237px;
}
ul#servicesChooser a#websites:hover, ul#servicesChooser a#websites.on {
	background:url(../images/ninja/websites.png) no-repeat 0 0;
}
ul#servicesChooser a#branding {
	background:url(../images/ninja/branding.png) no-repeat 0 -237px;
}
ul#servicesChooser a#branding:hover, ul#servicesChooser a#branding.on {
	background:url(../images/ninja/branding.png) no-repeat 0 0;
}

#portfolioGlider {
	height:180px;
}

/*
 * PortfolioPage displays
 */
.portfolioElement {
	position:relative;
	top:1px;
}
.portfolioElement h5 {
	margin:5px 0 0 20px;
	padding:20px 0 5px 0;
}
.portfolioElement .Info {
	position:absolute;
	text-align:right;
	width:100%;
}
.portfolioElement .Info {
	display:inline-block;
}
.portfolioElement .Info span {
	color:#777;
	padding-right:35px;
}
.portfolioContent {
	width:45%;
	margin-top:5px;
}

.portfolioContent ul {
	margin:5px 5px 5px 25px;
		color:#666;
}

.odd.portfolioContent {

	float: left;
	padding-left:65px;

}

.even.portfolioContent{
	float: right;
	padding-right:65px;
}
.portfolioImage {
	padding-top:15px;
}
.portfolioImage img {
	padding:5px;
	border: 1px solid #ccc;
}
.odd.portfolioImage{
	float:right;
	padding-right:35px;
}
.even.portfolioImage{

	float:left;
	padding-left:35px;
}