/*----------------------------------------------- */
/* CSS RESET
/*----------------------------------------------- */

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,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;font-family:inherit;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}


/*----------------------------------------------- */
/* GENERAL
/*----------------------------------------------- */

body {
	background: #181D25 url(images/background.jpg) repeat-y;
	font: 12px/18px arial, Helvetica, sans-serif;
	color: #181D25;
	text-align: center;
}

p { margin-bottom: 1em;}
a { color: #4c5870; text-decoration: none; }
a:hover { color: #46c4f3; }
.clear { clear: both; }
strong { font-weight: bold; }
em { /*font-style: italic;*/ /*color: #666;*/ }
del { text-decoration: line-through; }
.buttonstyle a { display: block; font-size: 10px; font-weight: bold; text-transform: uppercase; text-align: center; color: #ccc; background-color: #495669; line-height: 25px; text-indent: 0; height: 25px; width: 50px;  padding: 0 0 0 3px; }
.buttonstyle a:hover { color: #fff; background-color: #46c4f3; }


/*----------------------------------------------- */
/* SIDEBAR
/*----------------------------------------------- */

#sidebar { width: 250px; color: #ccc; position: absolute; height: 100%; text-transform: uppercase; background-color: #181D25; float: left; /*display: inline;*/ left: 0; }
#logo a { display: block; margin: 0 auto -30px auto; width: 250px; height: 195px; text-indent: -9999px; outline: none; background: url(images/lucie_logo.jpg) no-repeat; }
#divider_port { width: 210px; height: 31px; margin: 15px 0 10px 20px; background: url(images/divider_port.jpg) no-repeat; text-indent: -9999px; }
#divider_info { width: 210px; height: 23px; margin: 4px 0 4px 20px; background: url(images/divider_info.jpg) no-repeat; text-indent: -9999px; }
.nav { margin-left: 20px; }
.nav li a { width: 210px; height: 35px; display: block; line-height: 38px; text-indent: 15px; font-weight: bold; outline: none; letter-spacing: 2px; margin-top: 4px; background-color: #495669; color:#fff; } 
.nav li a:hover { background-color: #46c4f3; color: #fff; }
.legal { color: #666; font-size: 11px; text-transform: none; margin: 12px 0 0 20px; }

/*----------------------------------------------- */
/* Content
/*----------------------------------------------- */

#wrapper { width: 640px; margin-left: 280px; float: left; display: inline; }
#content { margin: 0 auto; }
.boxtop { background: url(images/box_top.png) no-repeat 0 top; height: 17px; width: 640px; }
.boxmid { background: url(images/box_mid.png) repeat-y; padding: 30px 50px; }
.boxbottom { background: url(images/box_bottom.png) no-repeat 0 bottom; height: 27px; width: 640px; }
#intro { margin-top: 30px; color: #888; }
#welcome { background: url(images/welcome.jpg) no-repeat; width: 200px; height: 60px; margin: 0 auto; text-indent: -9999px; }
#skills { background: url(images/skills.jpg) no-repeat; width: 200px; height: 44px; margin: 0 auto; text-indent: -9999px; }
#intro h3 { color: #373737; font-size: 28px; text-align: center; margin: 3px 0 8px 0; line-height: 33px; }
#intro h3 a { outline: none; }
#intro p { margin-bottom: 5px; text-align: center; line-height: 16px; }
#nav_top { width: 620px; height: 35px; margin: 0 auto; }
.title { width: 620px; height: 35px; background-color: #181D25; line-height: 35px; color: #fff; text-indent: 12px; font-size: 16px; margin: 20px auto; text-transform: uppercase; clear: both; position: relative; }
.gotop { width: 50px; margin: 5px 8px 5px 5px;  position: absolute; top: 0; right: 0;}

/*----------- Portfolio ------------*/

ul.portfolio  { margin-left: 6px; line-height: 14px; }
.portfolio li  { float: left; width:194px; height:243px; background: url(images/port_frame.png) no-repeat; margin: 0px 2px 10px 0px; padding-left: 14px; position: relative; }
.portfolio img { margin: 12px 0 3px 0px; }
.extra_content { position: absolute; top: 0px; left: 14px; z-index:-1 }
.portfolio p { width: 180px; margin: 0; }
.port_title { font-weight: bold; }
.port_desc { font-size: 11px; color: #666; }

/*----------- About ------------*/

.textcol {
	float: left;
	display: none;
	width: 200px;
	margin: 0 10px 20px 10px;
}
.textcol li {
	list-style-type: disc;
	margin: 0 0 1em 16px;  /*list-style-image: url(images/star_blue.png);*/
}


/*----------- Contact ------------*/

#contact_area { margin: 30px 0; padding-bottom: 1200px; }
#contact_form { width: 360px; color: #3d3d3d; float: left }
#contact_form input, textarea { width: 360px; padding: 5px 5px; background-color: #ebebeb; margin-bottom: 15px; font-size: 13px; }
#contact_form textarea { height: 135px; width: 360px; }
input#send_btn { margin-bottom: 0; width: 85px; height: 25px; border: none; cursor: pointer; background-color: #46c4f3; text-transform: uppercase; font-weight: bold; font-size: 11px; color: white; }
#send_btn:hover { background-color: #656565 }
label { font-weight: bold; display: block; margin-bottom: 3px; }
#contact_info { float: left; margin-left: 40px; width: 140px }
.message { display:none; padding: 0px 0px; margin: 0 0px 20px 0px; }
#alert b { /* color: #373737 */ }
#alert li { /* color: #ec008c; */ list-style-type: disc; margin-left: 15px; }

/*----------- End ------------*/

#end {  background: url(images/the_end.jpg) no-repeat; width: 170px; height: 70px; margin: 20px auto; text-indent: -9999px; outline: none; }
.endbtn a { margin: 0 auto 40px auto; width: 50px; }