/* General */
* { margin: 0; padding: 0;}
.clear { clear: both;}
p { padding-bottom: 1em; line-height: 1.3em;}
a{ outline: none; color: #00d8ff; text-decoration: none; border-bottom: 1px dotted #00d8ff; font-weight: bold;} a:hover{ color: #ff2068; border-bottom: 1px dotted #ff2068;}
h3 { color: #2e3d42; padding-bottom: 20px; font-size: 18px; font-weight: bold;}
body { background: black url(../images/bg.jpg) top center repeat-x; text-align: center; font-family: helvetica, arial, tahoma; font-size: 13px; color: #5b686d; }
#wrapper { width: 950px; margin: 0 auto 50px; text-align: left; }
.left { width: 45%; float: left;}
.right { width: 45%; float: right;}


/* Header */
#logo { margin: 40px 0 45px 50px; float: left; }

/* Main Nav */
ul#main_nav { float: right; margin: 45px 0 0 0; color: white; font-size: 18px; background: url(../images/bg_menu.png) right no-repeat; padding: 12px 6px; }
ul#main_nav li{  display: inline; font-size: 18px; border-left: 1px solid #4e152b; padding: 0 10px; }
ul#main_nav li a{ color: white; text-decoration: none; font-weight: normal; border: 0;}
ul#main_nav li.home{ border: none;}
ul#main_nav li.home a:hover, ul#main_nav li.home_active{ color: #fdea26;}
ul#main_nav li.about a:hover, ul#main_nav li.about_active{ color: #00d8ff; }
ul#main_nav li.services a:hover, ul#main_nav li.services_active{ color: #bc159e; }
ul#main_nav li.realisations a:hover, ul#main_nav li.realisations_active{ color: #8ceb12;  }
ul#main_nav li.contact a:hover, ul#main_nav li.contact_active{ color: #ff2068; }

/* Intro */
#intro { background: url(../images/bg_intro.png) no-repeat; padding: 35px 40px; font-size: 26px; color: white; font-weight: lighter; line-height: 1.5em; }
#intro a{ text-decoration: none; font-weight: normal; border: none;}
#intro a:hover{ text-decoration: none;}
#intro a.about{ color: #00d8ff;} #intro a.about:hover{ border-bottom: 1px dotted #00d8ff}
#intro a.realisations{ color: #8ceb12;} #intro a.realisations:hover{ border-bottom: 1px dotted #8ceb12;}
#intro a.contact{ color: #ff2068;} #intro a.contact:hover{ border-bottom: 1px dotted #ff2068;}

/* Content */
#content { background: #f6f6f6 url(../images/colorline.jpg) top no-repeat; padding: 25px 0; }
.half_col { width: 445px; padding: 0 15px; float: left; }
.third_col { width: 285px; padding: 0 15px; float: left; }
.third_col div.hr{ height: 2px; background: url(../images/small_hr.gif) no-repeat scroll center; margin-bottom: 1em; } div.hr hr { display: none;}
.two-thirds_col { width: 600px; padding: 0 15px; float: left; }
.full_content { padding: 0 15px; }
.frame { border: 1px solid white; background: #ededed; padding: 20px; margin-bottom: 25px;}
.inside_frame { padding: 20px; background: #f6f6f6;}

/* Footer */
#footer { background: #dde0e0 url(../images/bg_footer.gif) top repeat-x; color: #5b686d; line-height: 1.5em; }
#footer h3{	color: #ff2068; padding-bottom: 5px; font-size: 14px;}
#footer div.project, #footer div.coords, #footer div.copy { background-color: #dde0e0; width: 285px; height: 70px; float: left; padding: 20px 15px; border-left: 1px solid #ffffff; border-right: 1px solid #d6d6d6;}
#footer div.copy{ border-right: 0;}
#footer .smaller{ font-size: 11px;}
#footer a{ color: #2e3d42; text-decoration: none; font-weight: bold; border-bottom: 1px dotted #2e3d42;}

/* Services*/

.service_frame { width: 250px; padding: 0 15px; float: left; height: 275px; }
.service_frame h3 { display: block; font-size: 18px; font-weight: normal; padding: 10px 0 0 0; }
.service_frame ul { padding: 10px 0 0 20px; }
.service_frame li { padding: 2px 0 0 2px; }
a.green { border: 0px;}
a.green:hover { border: 0px; }
a.green img { padding: 25px 81px 0 81px;  }

#services h2 { display: block; font-size: 20px; font-weight: normal; padding: 0 0 5px 5px; margin: 0;color: #2e3d42;}
#services h3 { margin: 0; padding: 0; font-weight: bold; font-size: 14px; color: #5b686d;}
#services .description { float: left; width: 405px; margin-right: 30px;}
#services .description p { padding: 20px 10px;}
#services .description img { background: url(../images/services_frame.gif) no-repeat; padding: 9px;}
#services .frame ul { padding-left: 445px; list-style: none; }
#services .frame ul li { padding: 0 0 0 75px; list-style: none; margin-top: 15px;}
#services .frame ul li { background: url(../images/services_icons.gif) no-repeat;}
#services .frame ul li.website1 { background-position: 10px 0; }
#services .frame ul li.website2 { background-position: 10px -100px; }
#services .frame ul li.website3 { background-position: 10px -200px; }
#services .frame ul li.applications1 { background-position: 10px -300px; }
#services .frame ul li.applications2 { background-position: 10px -400px; }
#services .frame ul li.applications3 { background-position: 10px -500px; }
#services .frame ul li.ecommerce1 { background-position: 10px -600px; }
#services .frame ul li.ecommerce2 { background-position: 10px -700px; }
#services .frame ul li.ecommerce3 { background-position: 10px -800px; }
#services .frame ul li.seo1 { background-position: 10px -900px; }
#services .frame ul li.seo2 { background-position: 10px -1000px; }
#services .frame ul li.seo3 { background-position: 10px -1100px; }
#services .frame ul li.hosting1 { background-position: 10px -1200px; }
#services .frame ul li.hosting2 { background-position: 10px -1300px; }
#services .frame ul li.hosting3 { background-position: 10px -1400px; }


/* Realisations*/
.realisation_thumb { background: url(../images/thumb_frame.gif) no-repeat; padding: 4px;}
.realisation_thumb img { border: 5px solid white; }
.realisation_frame h3 { display: block; font-size: 18px; font-weight: normal; padding: 10px 0 0 0; }

/* Index*/
#index #content .blog a{ color: #00d8ff; text-decoration: none; border-bottom: 1px dotted #00d8ff; font-weight: bold;} #index #content .blog a:hover{ color: #ff2068; border-bottom: 1px dotted #ff2068;}
#index #content .blog .date{ font-size: 11px; display: block; padding: 5px 0 5px 0;}
#index .frame{ margin-bottom: 0px;}

/* Button*/
a.button { background: transparent url(../images/bg_button.gif) no-repeat scroll top right; display: block; float: right; font-size: 12px; font-weight: bold; color: #5b686d; height: 24px; margin-right: 6px;  margin: 20px 0; padding-right: 18px; /* sliding doors padding */ text-decoration: none; border-bottom: 0px; }
a.button span { background: transparent url(../images/bg_button_span.gif) no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; color: #5b686d; } 
a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ border: none; }
a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ border: none; } 

/* Form */
form div{ margin: 5px 0; }
form label { display:none; }
form label.security { position:absolute; display:block; background:#2e3d42; width: auto; padding: 5px 10px; text-align:center; color:#fff; border:1px solid #fff;}
form input { border:1px solid #e9e9e9; padding:5px; color:#757575; width: 98%; font-family: helvetica, arial, tahoma; font-size: 12px; }
form input.security { margin-left: 15%; width: 83%; }
form textarea { border:1px solid #e9e9e9; width: 98%; padding:5px; color:#757575; font-family: helvetica, arial, tahoma; font-size: 12px; }
form .questions label { display:block; width: 98%; font-family: helvetica, arial, tahoma; font-size: 12px; background: #dde0e0; padding: 5px 5px; color:#2e3d42; border:1px solid #e9e9e9; border-bottom: 0; margin-top: 15px;}
form .questions input{ border-top: 0;}
form h3 { padding-bottom: 0px;}
form p.warning { margin: 10px 0; padding: 5px; font-weight: bold; color: #b7b9b9; border-top: 1px solid #f6f6f6;}
form .frame h3{ margin-bottom: 15px; }

#ask_quote{ margin-top: 15px;}
#ask_quote h3{ font-size: 24px; }
#ask_quote p{ padding-bottom: 0;}
#ask_quote .inside_frame { text-align: center; padding: 20px; background: #f6f6f6;}
#ask_quote .inside_frame a.button { float: none; margin: 25px 70px 0 70px;}

div#gallery{ background: #f0f0f0 url(images/bg_grey.gif) bottom repeat-x; padding: 0px;}
div#gallery h1{ padding: 20px 10px 10px 40px; margin-bottom: 0;}
div#gallery div{ padding: 0px; background: none;}

.slider { width: 27px; float: left; margin-top: 40px;}
.slider_left { margin-right: 25px;}
.slider_right { float: right;}

#sliding_container { width: 27px; width: 855px; margin-bottom: 20px; float: left; overflow: hidden;}
#sliding_content{ background: yellow; height: 150px; width: 2000px;}

#sliding_content ol{ list-style: none;}
#sliding_content li{ background: url(../images/vignette.png) no-repeat; padding: 8px; float: left; margin-right: 15px;}
#sliding_content li img{ display: block; margin-bottom: 5px;}