/* @group Browser overrides */

html {overflow: -moz-scrollbars-vertical;}

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    line-height: 15px;
	padding: 0;
	margin: 0;
	color: #6c6b68;
	background: url(../images/body_back.gif) repeat-y 0 0;
}


p {
	font-size: 12px;
	line-height: 15px;
	margin: 0;
	padding: 0;
	color: #6c6b68;
	
}

small {
	font-size: 12px;
}


ul, ol {
	list-style-type:none;
}

ul, ol, li, fieldset, form, body, h1, h2, h3, h4, a {

	font-weight : normal;
	border : medium none;
	margin : 0;
	padding : 0;

}

a {
	text-decoration: none;
	color: #00A0C6;
}

.small-link {
	
}

.grey-link {
	color: #c3c3c3;
	text-decoration: underline;
}


a:hover {
	color: #FF1A00;
}

select {
	color: #464643;
}

/* this fixes a bug in safari. it ignores the margin unless a div has height. this applies height then removes it */

/* @group Clear / Float */

.cleaner {
        clear: both;
	width: 0;
	height: 0;
}
.cleaner-alt {
    margin: -1px -1px 0px 0px;
    height: 0px;
    clear: both;
    overflow:hidden;
 }

.float {
    float:left;
}
.float-right {
	float:right;
}

/* @end */

/* @group Pop */

#pop {
	margin: 10px;
	text-align: left;
}

#pop image {
	border: 1px solid #e3e3e3;
}


#pop #close {

}

#pop #close a {
	height: 29px;
	width: 29px;
	display : block;
	background: url(../images/close_button.gif) no-repeat 0 0;
	margin-bottom: 10px;
}

#pop #close a:hover {
	background-position:0px -30px;
}


/* @end */

#wrap {
	width: 700px;
	text-align: left;
	padding-left: 60px;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
	/* background: url(../images/guides.gif) repeat-y 60px 41px;*/
}

#wrap #content {
	padding-top: 0;
}

/* @group Header */

#wrap #header {
	padding-bottom: 22px;
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
}

#wrap #header h1 {

}

#wrap #header #logo {

}

#wrap #header #logo {
	background :url(../images/logo.gif) no-repeat scroll 0%;
	height : 61px;
	width : 61px;
	padding-top: 12px;
}

#wrap #header #logo a {
	display : block;
	height : 61px;
	text-indent : -5000px;
	width : 61px;

}

#wrap #header #logo-text {
	
	padding-left: 10px;
	color: #FF1A00;
	width: 138px;
	padding-right: 31px;
	padding-top: 5px;
	border-top: 1px solid white;
}

#wrap #header #logo-text h1 {
	font-size: 1em;
	line-height: 15px;
}



/* @end */

/* @group Navigation */

#wrap #header #navigation {
	width: 460px;
}

#wrap #header #navigation .column {
	width: 220px;
	border-bottom: 1px solid #e3e3e3;
}

#wrap #header #navigation .gutter {
	width: 19px;
	display: block;
	height: 24px;
	border-top: 1px solid #e3e3e3;
	margin-right: 1px;
}

#wrap #header #navigation a {
	color: #868581;
}

#wrap #header #navigation a:hover {
	color: #FF1A00;
}

#wrap #header #navigation ul li {

	margin: 0pt 1px 0pt 0pt;
	border-top: 1px solid #e3e3e3;
	width : 219px;
	line-height : 15px;
	padding: 5px 0 4px 0;
	text-indent: 5px;
}

#wrap #header #navigation ul li:hover {
	/*background-color: #f9f9f9;*/
}

#wrap #header #navigation ul li a {

	display:block;	
}

#wrap #header #navigation .selected {
	color: #ff1a00;
}


/* @end */

/* @group Separations */

#wrap .separation {
	height: 4px;
	background: #ff1a00 url(../images/separation.gif) repeat;
	font-size: 1px;
	margin-bottom: 1px;
}

#wrap .separation-thin {
	height: 1px;
	background: #e3e3e3 url(../images/separation.gif) repeat;
	font-size: 0;
	margin-bottom: 5px;
}

#wrap .separation-invisible {
	height: 1px;
	font-size: 0;
	margin-bottom: 5px;
}

#wrap .separation-short {
	height: 1px;
	font-size: 0;
	margin-bottom: 18px;
	background-color: #ff1a00;
	width: 49px;
}



/* @end */

/* @group HOME */

/* @group Home / About */

	#wrap #content #home-about #blurb {
		width: 219px;
		padding-right: 21px;
		text-align: right;
		padding-top: 38px;
	}
	
	#wrap #content #home-about #blurb p {
		font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
		margin-bottom: 1px;
		text-align: right;
	}
	
	#wrap #content #home-about #main-feature {
		width: 460px;
		background: url(../images/home-about.gif) no-repeat 0 0;
		height: 229px;
		text-indent : -5000px;
		padding-bottom: 1px;
	}

/* @end */

/* @group Projects listing */

#wrap #content #project-listing {
	margin-left: 240px;
	padding-bottom: 26px;
	margin-top: 15px;
}

#wrap #content #project-listing .row {
	width: 460px;
	margin-bottom: 1px;
}

#wrap #content #project-listing .row .project {
	width: 219px;
	padding-bottom: 14px;
}


#wrap #content #project-listing p,#wrap #content #project-listing strong, #wrap #content #project-listing a {
	font-weight: normal;
}

/* @end */

/* @group News Listing */

#wrap #content #news-listing {
	margin-left: 240px;
	padding-bottom: 25px;
	margin-top: 15px;
}

#wrap #content #news-listing p, #wrap #content #news-listing strong, #wrap #content #news-listing a, #wrap #content #news-listing small {
	font-weight: normal;
}

#wrap #content #news-listing .title {
	width: 240px;
}

#wrap #content #news-listing .date {
	color: #c3c3c3;
}

#wrap #content #news-listing p {
	padding-top: 15px;
	padding-bottom: 15px;
}



/* @end */



/* @end */


#wrap #content #left-column {
	width: 219px;
	padding-right: 21px;
}

#wrap #content #right-column {
	width: 460px;
}

#wrap #content .multicolumn-left {
	width: 219px;
	padding-right: 21px;
}
#wrap #content .multicolumn-right {
	width: 219px;
}

/* @group ABOUT */


#wrap #content #about {
	padding-bottom: 40px;
}

#wrap #content #about #title {
	margin-bottom: 1px;
	width: 219px;
	background-image: url(../images/about_title.gif);
	height: 134px;
	margin-top: 80px;
	margin-left: 0;
}
	
#wrap #content #about #message {
	background: url(../images/about_tagline.gif) no-repeat 0 0;
	height: 139px;
	text-indent : -5000px;
	padding-bottom: 1px;

}

#wrap #content #about #sub-title {
	padding-top: 19px;
	padding-left: 240px;
	color: #464643;
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 25px;
}

#wrap #content #about p {
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	text-align: left;
	padding-bottom: 15px;
}

#wrap #content #about p a {
	color: #6c6b68;
	text-decoration: underline;
}

#wrap #content #about #signature {
	padding-top: 27px;
	padding-bottom: 4px;
}

#wrap #content #about small {
	font-style: italic;
	font-size: 11px;
}

/* @end */


#wrap #content .icon-p,
#wrap #content .icon-p-on,
#wrap #content .icon-a,
#wrap #content .icon-m {
	width: 18px;
	height: 18px;
	padding-right: 11px;
}

#wrap #content .icon-p {
	background: url(../images/icon_p.gif) no-repeat;
}
#wrap #content .icon-p-on {
	/*background: url(../images/icon_p_on.gif) no-repeat;*/
}
#wrap #content .icon-a {
	background: url(../images/icon_a.gif) no-repeat;
}
#wrap #content .icon-m {
	background: url(../images/icon_m.gif) no-repeat;
}

/* @group Media Bar */

#wrap #content .media-bar {
	padding-left: 211px;
	padding-top: 11px;
	padding-bottom: 0;
}

#wrap #content .media-bar .title {
	padding-top: 3px;
	color: #c3c3c3;
	line-height: 15px;
	font-size: 11px;
}

/* @end */

/* @group Medias Listing */

#wrap #content #medias-listing {
	margin-left: 240px;
	margin-bottom: 11px;
	margin-top: 15px;
}

#wrap #content .media {
	width: 219px;
	margin-bottom: 15px;
}

#wrap #content .gutter {
	margin-right: 21px;
}


#wrap #content #medias-listing .icon a {
	
	width: 31px;
	height: 34px;
	display: block;
	margin-right: 18px;
	background: url(../images/icon_media.gif) no-repeat 0 0;
}

#wrap #content #medias-listing .icon-pdf a {
	
	width: 31px;
	height: 34px;
	display: block;
	margin-right: 18px;
	background: url(../images/icon_pdf.gif) no-repeat 0 0;
}

#wrap #content #medias-listing .doc {
	width: 170px;
}

#wrap #content #medias-listing #acrobat {
	width: 219px;
}

#wrap #content #medias-listing #acrobat p {
	color: #c3c3c3;
}

#wrap #content #medias-listing #acrobat small {
	font-size: 12px;
}
/* @end */

/* @group Footer */

#wrap  #footer {
}

#wrap #footer .separation {
	background-color: #e3e3e3;
}

#wrap #footer #wupo {
	margin-bottom: 20px;
}

#wrap #footer #wupo #logo a {
	width: 47px;
	height: 47px;
	background: url(../images/logo_wupo.gif) no-repeat 0 0;
	margin-bottom: 8px;
	margin-top: 1px;
	display: block;
}

#wrap #footer #wupo #text {
	color: #c3c3c3;
	width: 102px;
}

#wrap #footer #wupo #text strong {
	font-weight: normal;
	color: #6c6b68;
}

#wrap #footer #copyright {
	width: 460px;
	margin-top: 89px;
	color: #c3c3c3;
}

#wrap #footer #copyright-back {
	width: 460px;
	margin-top: 44px;
	color: #c3c3c3;
}


#wrap #footer #text {
	margin-top: 16px;
}


/* @end */

/* ITALIC FOR THE MAC */

.small-link   {
	font-style: italic;
}

.red-link {
	color: #ff1a00;
}

/* @group PROJECTS */

/* @group Browser */

#projects-browser {
	width: 699px;

}

#projects-browser #dropdown {
	width: 169px;
	margin-right: 1px;
	border-top: 1px solid #e3e3e3;
	padding-top: 9px;
	padding-bottom: 22px;
}

#projects-browser #pbox {
	width: 70px;
	padding-top: 11px;
}

#projects-browser #browser {
	
	width: 459px;
}

#projects-browser #browser .separation {
	margin-bottom: 10px;
}

#projects-browser #browser #project-name {
	width: 369px;
	padding-right: 21px;
	color: #464643;
	padding-bottom: 10px;
}
#projects-browser #browser #project-name h2 {
	color: #ff1a00;
	line-height: 15px;
	font-size: 11px;
}
#projects-browser #browser #previous a,
#projects-browser #browser #next a,
#projects-browser #browser #previous .desactivated,
#projects-browser #browser #next .desactivated {
	height: 29px;
	width: 29px;
	display : block;
}
#projects-browser #browser #previous a {
	background: url(../images/arrow_prev.gif) no-repeat 0 0;
	padding-right: 11px;
}
#projects-browser #browser #previous .desactivated {
	background: url(../images/arrow_prev_disabled.gif) no-repeat 0 0;
	padding-right: 11px;
}
#projects-browser #browser #next a {
	background: url(../images/arrow_next.gif) no-repeat 0 0;
}
#projects-browser #browser #next .desactivated {
	background: url(../images/arrow_next_disabled.gif) no-repeat 0 0;
}
#projects-browser #browser #previous a:hover,#projects-browser #browser #next a:hover {
	background-position:0px -30px;
}

#projects-browser #separation-left {
	width: 169px;
	height: 1px;
	background-color: #e3e3e3;
}



/* @end */

#wrap #content #projects {
	padding-bottom: 29px;
	padding-top: 20px;
}

#wrap #content #projects #title {
	width: 219px;
	background-image: url(../images/projects_title.gif);
	text-indent: -5000px;
	height: 59px;
	margin-top: 0px;
	margin-left: 0;
}

#wrap #content #projects #article p {
	text-align: right;
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	
}

/* @group Projects Features */

#wrap #content #projects #features {
	padding-bottom: 0px;
}

#wrap #content #projects #features .row {
	width: 460px;
	margin-bottom: 1px;
}

#wrap #content #projects #features .row .project {
	width: 219px;
	padding-bottom: 10px;
}

#wrap #content #projects #features .row .project .thumbnail {
	margin-bottom: 5px;
}

#wrap #content #project-listing p,#wrap #content #project-listing strong, #wrap #content #project-listing a {
	font-weight: normal;
}

/* @end */

#project {
	padding-top: 10px;
	padding-bottom: 26px;
}

#project  p {
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	padding-bottom: 15px;
}	

#project  h4 {


	color: #464643;
	padding-top: 34px;
	margin-right: 50px;
	font-size: 12px;
    line-height: 15px;
}	

#project strong {
	font-weight: normal;
	font-style: normal;
	color: #464643;
}

/* @group APILIFE */


#project #apilife #illustration {
	height: 11px;
	padding-right: 50px;
	background: url(../projects/apilife_illustration.jpg) no-repeat;
	width: 169px;
	text-align: right;
	padding-top: 424px;
}

#project #apilife #title {

	background: url(../projects/apilife_title.gif) no-repeat;
	width: 219px;
	height: 209px;
	text-indent: -5000px;
	padding-top: 0;
	margin-top: 15px;
}


/* @end */

/* @group APIFOOD */

#project #apifood #illustration {
	height: 254px;
	padding-right: 50px;
	background: url(../projects/apifood_illustration.jpg) no-repeat;
	width: 699px;
	text-align: right;
	margin-top: 15px;
}

#project #apifood #title {

	background: url(../projects/apifood_title.gif) no-repeat;
	width: 219px;
	height: 254px;
	text-indent: -5000px;
	margin-top: 1px;
}

#project #apifood #description {

	padding-top: 16px;
	padding-bottom: 14px;
}

#project #apifood small {

	color: #c3c3c3;
}


/* @end */

/* @group APIBOX */

#project #apibox #illustration {
	height: 389px;
	padding-right: 50px;
	background: url(../projects/apibox_illustration.jpg) no-repeat;
	width: 459px;
	text-align: right;
	margin-top: 0;
}

#project #apibox #title {

	background: url(../projects/apibox_title.gif) no-repeat;
	width: 219px;
	height: 389px;
	text-indent: -5000px;
}

/* @end */

/* @group BWATCH */

#project #bwatch #illustration {

	width: 169px;
	margin-top: 20px;
}

#project #bwatch #title {

	background: url(../projects/bwatch_illustration.jpg) no-repeat;
	width: 699px;
	height: 239px;
	text-indent: -5000px;
	margin-bottom: 15px;
}

/* @end */

/* @group BPERFECT */

#project #bperfect #illustration {
	height: 344px;
	padding-right: 50px;
	background: url(../projects/bperfect_illustration.jpg) no-repeat;
	width: 459px;
	text-align: right;
	margin-top: 0;
	margin-bottom: 15px;
}

#project #bperfect #title {

	background: url(../projects/bperfect_title.gif) no-repeat;
	width: 219px;
	height: 164px;
	text-indent: -5000px;
}

#project #bperfect #description {
	margin-top: 11px;
	width: 169px;
}


/* @end */


/* @end */

/* @group GALLERY */


#gallery {
	padding-bottom: 75px;
}

#gallery #title {

	background: url(../projects/title_merlan07.gif) no-repeat;
	width: 219px;
	height: 134px;
	text-indent: -5000px;
	padding-top: 0;
	margin-top: 50px;
}

#gallery #contact-sheet {
	width: 460px;
	margin-top: 20px;

}

#gallery #contact-sheet .thumbnail {
	border: 1px solid #e3e3e3;
	width: 219px;
	height: 109px;
	margin-bottom: 1px;
	padding: 4px;
}

#gallery #contact-sheet .thumbnail .number {
	width: 49px;
	height: 20px;
	padding-top: 89px;
	font-size: 11px;
}
.gutter-one {
	margin-right: 1px;
}

#gallery #contact-sheet .thumbnail:hover,
#gallery #viewer .thumbnail:hover {
	border-color: #ff1a00;

}


#gallery #article p {
	text-align: right;
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
}

#gallery #viewer {
	width: 460px;
	margin-top: 20px;

}

#gallery #viewer .thumbnail, #gallery #viewer .thumbnail-desactivated {
	border: 1px solid #e3e3e3;
	width: 219px;
	height: 64px;
	margin-bottom: 1px;
	padding: 4px;
}

#gallery #viewer .thumbnail .previous,
#gallery #viewer .thumbnail-desactivated .previous {
	width: 104px;
	height: 20px;
	padding-top: 44px;
	font-size: 11px;
}

#gallery #viewer .thumbnail-desactivated .previous {
	color: #e3e3e3;
}

#gallery #viewer .thumbnail .next,
#gallery #viewer .thumbnail-desactivated .next {
	width: 99px;
	height: 20px;
	padding-top: 44px;
	font-size: 11px;
	text-align: right;
	margin-right: 17px;
}

#gallery #viewer .thumbnail-desactivated .next {
	color: #e3e3e3;
}

#gallery #viewer #slide {
	margin-top: 20px;
}

#gallery #viewer #description {
	margin-top: 25px;
	margin-bottom: 11px;
}


/* @end */

.back {
	padding-top: 5px;
	padding-bottom: 25px;
	font-size: 12px;
}

/* @group CONTACT */

#contact {
	padding-bottom: 0;
}

#contact #title {

	background: url(../images/contact_title.gif) no-repeat;
	width: 219px;
	height: 134px;
	text-indent: -5000px;
	padding-top: 0;
	margin-top: 50px;
}

#contact-form #message p {
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	padding-top: 3px;
	padding-bottom: 11px;
	color: #ff1a00;
}


#contact #article p {
	text-align: right;
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	
}

#contact-form {
	margin-top: 35px;
	padding-bottom: 4px;
}

#contact-thanks {
	margin-top: 50px;
	padding-bottom: 4px;
}

#contact-thanks #message-title {
	background-image: url(../images/contact_thanks.gif);
	width: 459px;
	height: 104px;
}

#contact-thanks #message p {
	font: 13px/15px Arial, Helvetica, Geneva, sans-serif;
	width: 169px;
	padding-top: 4px;
	color: #464643;
}

#contact-thanks #back {
	margin-top: 16px;
}

#contact .input-box {
	width: 219px;
	padding-top: 4px;
	padding-bottom: 0;
	margin-bottom: 1px;
	height: 55px;
}

#contact .textarea-box {
	width: 459px;
	padding-top: 4px;
	padding-bottom: 0;
	margin-bottom: 21px;
}

#contact .label {
	margin-bottom: 5px;
}

#contact .field {
	width: 190px;
	border: 1px solid #e3e3e3;
	padding: 2px;
}

textarea {
	width: 99%;
	border: 1px solid #e3e3e3;
	padding: 5px;
}

#contact #send a {
	height: 22px;
	width: 179px;
	display : block;
	background: url(../images/arrow_send.gif) no-repeat 0 0;
	padding-top: 8px;
	padding-left: 40px;
}

#contact #send a:hover {
	background-position:0px -30px;
	color: #00a0c6;
}


/* @end */