/* @override 
	http://localhost:8888/newcc/style.css
	http://cocoia.com/new/style.css
	http://www.cocoia.com/new/style.css
*/

body {

	margin:0px auto;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	background: #251717 repeat-x fixed center bottom;
}

a {
	border: none;
	text-decoration: none;
	color: inherit;
}



a:link {
	border: none;
	text-decoration: none;
	color: inherit;}

a:active {
	border: none;
	text-decoration: none;
	color: inherit;}
	
	
a:hover {
	border: none;
	text-decoration: none;
	color: inherit;}

a:visited {
	border: none;
	text-decoration: none;
	color: inherit;}

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

#WebsiteBody

{
	width: 961px;
	margin: 0px auto;
}
	
#ShowcaseBorder {
	position: relative;
	background-image: url(images/showcaseborder.jpg);
	width: 854px;
	height: 347px;
	padding-top: 14px;
	margin-right: auto;
	margin-left: auto;
}


#Showcase {
	position: relative;
	width:  830px;
	height: 344px;
	background: url(images/showcasebg.jpg) center;
	margin: 0 auto;
}

/* Header CSS */


#FeaturedProjects {
	height: 261px;
	width: 783px;
	background-image: url(images/featuredprojects.jpg);
}

.Firstproject {
	float:left;
	padding-right: 3px;
	padding-left: 3px;
}

.Secondproject {
	float:left;
	padding-left: 3px;
	padding-right: 3px;
}

.Thirdproject {
	float:left;
	padding-left: 3px;
	padding-right: 3px;
}


.Fourthproject {
	float:left;
	padding-right: 3px;
	padding-left: 3px;
}

.Fifthproject {
	float:left;
	padding-left: 3px;
	padding-right: 3px;
}

.Sixthproject {
	float:left;
	padding-left: 3px;
	padding-right: 3px;
}


#Projects {
	width: 781px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 70px;
}

#Headertext {
	margin: 0 auto;
	position: relative;
	top: 12px;
	z-index: 1000;
}

#WhiteSpace {
	height: 70px;
}

#WhiteSpaceAbout {
	height: 0px;
}

#Headertext h1 {
	font: 14px/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding-right: 70px;
	padding-left: 70px;
	color: #4f4f4f;
	margin: 0;
}

#News {
	
	margin: 0px auto;	
	width: 760px;
	height: 140px;
	position: relative;
	top: 27px;
}

#LeftNews {
	width: 300px;
	height: 120px;
	float: left;
	padding-left: 20px;
}

#RightNews {
	width: 300px;
	height: 120px;
	float: right;
	padding-right: 20px;
}


#LeftNews h3 {
	text-transform: uppercase;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #5b5b5b;
}

#RightNews h3 {
	text-transform: uppercase;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #5b5b5b;
}

#LeftNews p {
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #4d4d4d;
}

#RightNews p {
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #4d4d4d;
}

#Headertext h1 a {
	color: #2c2c2c;
}


#CocoiaLogo {
	width: 875px;
	margin: 0 auto 0px;
}

#BottomGradient {
	
	width: 855px;
	height: 357px;
	margin: 0px auto;
	position: relative;
	background: url(images/bottomgradient.jpg) repeat-x;
}

#BackButton p {
	margin-left: 20px;
}

p.BackButton {
	position: relative;
	color: #9aa9ad;
	font: 11px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-decoration: none;
	z-index: -1;
}

#BackHomeButton {
	width: 120px;
	margin-left: 190px;
	position: relative;
	padding-top: 28px;
}

#BackButton a img {
	position: relative;
	margin-left: 220px;
	margin-bottom: 20px;
	margin-top: 28px;
	float: none;
}

#TextArea p a {
	
	color: #9aa9ad;
	text-decoration: none;
}

#GetEstimate {
	
	width: 210px;
	position: relative;
	float: left;
	text-align: left;
	bottom: 30px;
}

p.MiddleAreaHeading {
	
	font: 12px "HelveticaNeue-Bold", “Helvetica Neue Bold”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #819180;
	text-align: left;
	margin-right: 20px;
	float: none;
	margin-left: 30px;
}

p.MiddleAreaHeading:hover {
	cursor: pointer;
	color: #bbc6a4;
}

p.MiddleAreaParagraph {

	font: 12px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #9aa9ad;
	text-align: left;
	margin-left: 30px;
}




#Testimonials {
	
	width: 210px;
	position: relative;
	float: left;
	margin-left: 22px;
	bottom: 30px;
}

#StockIcons {
	
	width: 180px;
	position: relative;
	float: left;
	margin-left: 25px;
	bottom: 30px;
}

#ContactMe {
	
	width: 180px;
	position: relative;
	float: left;
	padding-left: 25px;
	bottom: 30px;
}

#FreewareShowcaseBorder {
	
	position: relative;
	margin: 0 auto 0px;
	width: 855px;
	height: 450px;
	background: url(images/freewareshowcasebg.jpg) repeat-y;
	right: 1px;
}

#FreewareShowcase {
	
	background-image: url(images/featuredfreeware.jpg);
	margin: 0px auto;
	height: 441px;
	width: 829px;
}

#Footer {
	position: relative;
	width: 960px;
	height: 400px;
	background: url(images/footerbg.jpg) no-repeat;
	margin: 0px auto;
}

#Navigation {
	width: 636px;
	height: 28px;
	margin: 0px auto;
	position: relative;
}

div.TabText a img {
	float: none;
	padding-top: 7px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

div.TabText {
	width: 70px;
	height: 22px;
	margin: 3px auto 0px;
	
}

div.TabTextAbout {
	width: 70px;
	height: 22px;
	margin: 3px auto 0px;
	
}

div.TabTextVision {
	width: 70px;
	height: 22px;
	margin: 3px auto 0px;
	
}

div.TabTextProjects {
	width: 70px;
	height: 22px;
	margin: 3px auto 0px;
	
}

div.TabTextAbout a img {
	float: none;
	padding-top: 7px;
	margin-right: auto;
	position: relative;
	margin-left: 13px;
}

div.TabTextVision a img {
	float: none;
	padding-top: 7px;
	margin-right: auto;
	position: relative;
	margin-left: 13px;
}

div.TabTextProjects a img {
	float: none;
	padding-top: 7px;
	margin-right: auto;
	position: relative;
	margin-left: 7px;
}

div.TabTextContact a img {
	float: none;
	padding-top: 7px;
	margin-right: auto;
	position: relative;
	margin-left: 6px;
}


div.TabTextContact {
	width: 70px;
	height: 22px;
	margin: 3px auto 0px;
	
}

#Navigation span {
	z-index: -1000;
	visibility: hidden;
}


.ActiveTab {
	float: left;
	width: 102px;
	height: 28px;
	background: url(images/activetab.jpg) no-repeat;
	padding-left: 2px;
	padding-right: 2px;
}

.NonActiveTab {
	
	float: left;
	width: 102px;
	height: 28px;
	background: url(images/nonactivetab.jpg) no-repeat;
	padding-right: 2px;
	padding-left: 2px;
	position: relative;
}

#Header {
	background-image: url(images/header.jpg);
	width: 783px;
	height: 48px;
	margin: 0px auto;
}

#HeaderContact {
	background-image: url(images/headercontact.jpg);
	width: 783px;
	height: 48px;
	margin: 0px auto;
}

#HeaderVision {
	width: 783px;
	height: 48px;
	margin: 0px auto;
	background-image: url(images/headervision.jpg);
	position: relative;
	right: 1px;
}

#HeaderAbout {
	background-image: url(images/headerabout.jpg);
	width: 783px;
	height: 48px;
	margin: 0px auto;
	position: relative;
	right: 1px;
}



#HeaderClientArea {
	background-image: url(images/headerclientarea.jpg);
	width: 783px;
	height: 48px;
	margin: 0px auto;
	position: relative;
}

#HeaderProjects {
	background-image: url(images/headerprojects.jpg);
	width: 783px;
	height: 48px;
	margin: 0px auto;
	position: relative;
	right: 1px;
}

#FirstRow {
	width:923px;
	margin-top: 110px;
	padding-left: 2px;
	padding-right: 2px;
}

#SecondRow {
	width: 923px;
	padding-right: 2px;
	padding-left: 2px;
	height: 200px;
	z-index: 1001;
}


#MainBody {
	margin: 0px auto;
	width: 783px;
	height: 512px;
	background: url(images/bodybg.jpg) repeat-y;
}

#Cuteimage {
	
	height: 45px;
	width: 45px;
	background: url(images/abouticon.gif) no-repeat center center;
	float: left;
	margin-top: 10px;
}

div#AboutContainer {
	margin-top: 20px;
	margin-left: 40px;
	margin-right: 20px;
}

#MainBodyContact {
	margin: 0px auto;
	width: 783px;
	height: 112px;
	background: url(images/bodybg.jpg) repeat-y;
}


#MainBodyClientArea {
	margin: 0px auto;
	width: 783px;
	height: 112px;
	background: url(images/bodybg.jpg) repeat-y;
}

#MainBodyAbout {
	margin: 0px auto;
	width: 783px;
	height: 350px;
	background: url(images/bodybg.jpg) repeat-y;
}

#MainBodyFooter {
	margin: 0px auto;
	width: 960px;
	height: 224px;
	position: relative;
	right: 0px;
	background: url(images/mainbodyfooter.jpg) no-repeat center center;
}

#MainBodyFooterBlank {
	margin: 0px auto;
	width: 960px;
	height: 224px;
	background: url(images/mainbodyfooterblank.jpg) no-repeat;
	z-index: -100;
	position: relative;
	right: 0px;
}

#Form {
	width: 460px;
	margin: 0px auto;
	position: relative;
	top: 50px;
	z-index: 1000;
	border: 1px solid #c8c8c8;
	padding: 30px;
}

#Form form textarea {
	width: 454px;
}

#Form form p {
	font: bold 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	color: #575757;
}

#Buttons {
	position: relative;
	width: 460px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	top: 280px;
}

#DownloadIconSet {
	float: left;
}

#FreeWareIcons {
	float: right;
}

#FreewareListHeader {
	width: 853px;
	height: 78px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid//images/freewarelistheader.jpg);
	z-index: 1;
}

#UIDesignListHeader {
	width: 853px;
	height: 78px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/uidesignheader.jpg);
	z-index: 1;
}

#IconDesignListHeader {
	width: 853px;
	height: 78px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid//images/icondesignheader.jpg);
	z-index: 1;
	}



#Estimateheader {
	
	width: 853px;
	height: 78px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/estimateheader.jpg);
	z-index: 1;
}

p.FreewareHeader {
	font-size: 10px;
	text-align: center;
	position: relative;
	z-index: -1;
	visibility: hidden;
}

#Templatebody form p {

	font: 12px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #9aa9ad;
	text-align: left;
	margin-left: 30px;
	margin-bottom: 4px;
}

#Templatebody form {
     width: 470px;
     height: 320px;
     position: relative;
	margin: 60px auto 0px;
}

#Templatebody form textarea {
	width: 455px;
	background-color: #adb7b9;
}

#Templatebody form input {
	background-color: #adb7b9;
	border: 1px solid #dce8ea;
}



#SendNow {
	width: 100px;
	height: 33px;
	margin: 0px auto;
}




#SendNow input.button {
	width: 114px;
	height: 27px;
	background-color: transparent;
		background-image: url(images/sendbutton.jpg);
	cursor: pointer;
	z-index: 1;
	border-style: none;
	margin: 0px auto 0px;
}

#FreewareList form textarea {
	position: relative;
	left: 30px;
}



#FreewareListHeader p.FreewareHeader {
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: relative;
	text-align: center;
	z-index: -1;
	visibility: hidden;
}

#FreewareList {
	width: 853px;
	height: 428px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/freewarelistbg.jpg);
}

#UIDesignList {
	width: 853px;
	height: 328px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/freewarelistbg.jpg);
	
}



#IconDesignList {
	width: 853px;
	height: 608px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/freewarelistbg.jpg);
}

#PrevChevron {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 260px;
	left: 30px;
}
	

#NextChevron {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 260px;
	left: 795px;
}

#Templatebody {
	width: 853px;
	height: 628px;
	position: relative;
	margin: 0px auto;
	background-image: url(http://www.cocoia.com/newid/images/freewarelistbg.jpg);}
/**** Carousel ****/

	.carousel-component .carousel-list li { 
	    width: 670px; /*500 + 2 + 2 + 1 + 1 */
	}

	.carousel-component .carousel-list li a { 
	    display:block;
	    outline:none;
	    -moz-outline:none; 
	}


	.carousel-component .carousel-list li.active a { 
	}

	.carousel-component .carousel-list li img { 
	display:block;
	position: relative;
	margin: 0 auto;
}

	.carousel-component .carousel-prev { 
	    position:absolute;
	    top: 180px;
	    z-index:3;
	    cursor:pointer; 
	}

#bd {
	margin: 0 auto;
}

	.carousel-component .carousel-next { 
	    position:absolute;
	    top: 180px;
	    z-index:3;
	    cursor:pointer; 
	    right:5px; 
	}



#voetje {
	
	position: relative;
	overflow: hidden;
	width: 855px;
	height: 229px;
	z-index: 1;
	right: 8px;
	color: #a22d0c;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 0px auto;
}

#cocoia {
	 width: 160px;
	float: left;
	margin-left: 80px;
}


#icondesigner {
	 width: 190px;
	float: left;
	margin-left: 8px;
}


#iconresource {
	 width: 180px;
	float: left;
	margin-left: -14px;
}


#cocoiablog {
	 width: 170px;
	float: left;
}


#voetje ul {
	
	list-style-type: none;
	width:200px;
	line-height: 18px;
}

#voetje li {
	width:190px;
	list-style-type: none;
	color: #FFF;
	font: 12px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#FooterBox {
	background: url(images/footerbox.jpg) no-repeat;
	width: 708px;
	height: 43px;
	margin: 0px auto;
}

#FooterBox p {
	padding: 13px 10px 10px;
	color: #694f4d;
	font: 11px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}

#voetje li a {
	width:190px;
	list-style-type: none;
	color: #e9c6c6;
	font: 12px "HelveticaNeue-Light", “Helvetica Neue Light”, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#voetje li a:hover {
	list-style-type: none;
	color: #FFF;
}

#voetje p {
	
	width: 170px;
	text-indent: 40px;
	color: #FFF;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#voetje p a {
	
	width: 170px;
	text-indent: 40px;
	color: #FFF;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#Blogsticky {
	
 	position: absolute; 
 	width: 70px;
	height: 70px;
	z-index: 100;
	left: 800px;
}