/* CSS Document */

/* General CSS */

* { margin : 0; padding : 0; }
html {background-image: url(../images/bg.jpg); background-position:center top;}
body { font-family: "Courier New", Courier, monospace; font-size: 12px; text-align : center;}
h1, h2, h3 { font-weight : bold; text-transform : uppercase; }


/* Container CSS */
div#container {position : relative; width : 960px; margin : 0 auto; text-align : left;}


/* Header CSS */
div#header { text-align : left; position: relative; width: 960px; height:70px; }
h1 { z-index : 3; position : absolute; left : 26px; top : 20px; width: 264px; height : 40px; background : url(../images/h1.png) no-repeat; }
h1 a { display : block; width: 264px; height : 40px; text-indent : -9999px; }
div#menu {height: 40px; margin: 0; padding: 0; position:absolute; right:80px; top:30px;  text-indent: -9999px; }
div#menu ul {   list-style: none; line-height: normal;}
div#menu li {display: inline; margin-left:20px;}

li#mn_1 {background:url(../images/portfolio-m-nav.png) no-repeat; width:121px; height:28px; position:absolute; right:213px; top: -9px;}
li#mn_2 { background:url(../images/about-m-nav.png) no-repeat; width:121px; height:28px; position:absolute; right:78px; top:-3px; }
li#mn_3 {background:url(../images/contact-m-nav.png) no-repeat; width:121px; height:28px; position:absolute; right:-51px; top: -12px;}

li#mn_1 a, li#mn_2 a, li#mn_3 a {display:block; width:121px; height:28px;}

li#mn_1 a:visited, li#mn_1 a:link {background:url(../images/portfolio-m-nav.png) no-repeat;}
li#mn_2 a:visited, li#mn_2 a:link {background:url(../images/about-m-nav.png) no-repeat;}
li#mn_3 a:visited, li#mn_3 a:link {background:url(../images/contact-m-nav.png) no-repeat;}

li#mn_1 a:hover, li#mn_1 a:active, li#mn_1 a:focus {background:url(../images/portfolio-m-nav-h.png) no-repeat;}
li#mn_2 a:hover, li#mn_2 a:active, li#mn_2 a:focus {background:url(../images/about-m-nav-h.png) no-repeat;}
li#mn_3 a:hover, li#mn_3 a:active, li#mn_3 a:focus {background:url(../images/contact-m-nav-h.png) no-repeat;}


/* Content CSS */
div#content { background:url(../images/home-line.gif) center top no-repeat; width:960px; height:602px; position: relative; margin-top:-15px;}

/* Content Projects CSS */
div#content-projects { background:url(../images/projects-line.gif) center top no-repeat; width:960px; height:1812px; position: relative; margin-top:-13px;}

div#content-projects h2 { background:url(../images/here_some_of_my_recent_work.png) no-repeat; text-indent: -9999px; width:349px; height:26px; position:absolute; top:30px; left:61px;}

div#content-projects ul {margin: 0; padding: 0; list-style: none; line-height: normal; width:960px;}
div#content-projects li { display: inline; padding-left:60px; padding-top:45px;}

li#ph2_1{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:60px; left:50px;}
li#ph2_2{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:60px; left:500px;}
li#ph2_3{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:350px; left:50px;}
li#ph2_4{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:350px; left:500px;}
li#ph2_5{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:650px; left:50px;}
li#ph2_6{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:650px; left:500px;}
li#ph2_7{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:950px; left:50px;}
li#ph2_8{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:950px; left:500px;}
li#ph2_9{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:1230px; left:50px;}
li#ph2_10{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:1230px; left:500px;}
li#ph2_11{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:1520px; left:50px;}
li#ph2_12{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:1520px; left:500px;}

div#content-projects li p { line-height:20px;}
p#cli_1, p#cli_2 { font-weight:bold;}

.cli2{ font-weight:bold;}

/* Content Contact CSS */
div#content-contact { background:url(../images/contact-line.gif) center top no-repeat; width:926px; height:608px; position: relative; margin-top:-15px; margin-left:15px;}


/* Content welcome CSS */
div#content-welcome { background:url(../images/welcome-line.gif) left top no-repeat; width:375px; height:395px; position: relative; margin-top:40px; text-align:center; margin-left:260px; padding-top:35px;}
h2#thanks-start {background:url(../images/thanks.png) no-repeat; width:349px; height:51px; text-indent: -9999px;}

div#content-welcome ol {width:436px; line-height: 35px; font-size: 20px; font-weight: bold; padding-top: 40px; text-align:left; margin-left:80px;}



/* Content Up CSS */
div#content-up { width:960px; position:relative;}

div#welcome { width:436px; line-height: 30px; font-size: 16px; font-weight: bold; padding-top: 20px; position:absolute; top:25px; left:80px }
div#contact-details { width:436px; line-height: 30px; padding-top: 20px; position:absolute; top:25px; left:80px }
div#what-say {width:318px; position:absolute; height: 301px; background:url(../images/what-say.png) no-repeat; text-indent: -9999px; z-index:3; left:590px; top: 4px; }
div#my-photo { width:318px; position:absolute; height: 301px; background:url(../images/my-photo.png) no-repeat; text-indent: -9999px; z-index:3; left:590px; top: 4px;}
div#follow { width:271px; position:absolute; height: 257px; background:url(../images/follow.png) no-repeat; z-index:3; left:590px; top: 4px; }

p#bg-txt1 { font-size:12px; font-weight:normal; line-height: 20px;}
p#bg-txt2 { font-size:12px; font-weight:normal; line-height: 20px; margin-top:15px;}

h2#background {background:url(../images/background.png) no-repeat; text-indent: -9999px;}
h2#intouch {background:url(../images/intouch.png) no-repeat; text-indent: -9999px;}
h2#follow-me {text-indent:-9999px;}

div#follow p a {display:block; width:181px; height:58px; text-indent:-9999px;}

p#follow1 a:link, p#follow1 a:visited {background:url(../images/linked-in.png) no-repeat; position:absolute; left: 23px; top: 90px;}
p#follow2 a:link, p#follow2 a:visited {background:url(../images/design-firms.png) no-repeat; position:absolute; left: 79px; top: 133px;}
p#follow3 a:link, p#follow3 a:visited {background:url(../images/coroflot.png) no-repeat; position:absolute; left: 37px; top: 190px;}


p#follow1 a:hover, p#follow1 a:active, p#follow1 a:focus {background:url(../images/linked-in-h.png) no-repeat;}
p#follow2 a:hover, p#follow2 a:active, p#follow2 a:focus {background:url(../images/design-firms-h.png) no-repeat;}
p#follow3 a:hover, p#follow3 a:active, p#follow3 a:focus {background:url(../images/coroflot-h.png) no-repeat;}


/* Content Down CSS */
div#content-down { width:960px; position:relative;}

div#content-down ul {margin: 0; padding: 0; list-style: none; line-height: normal;}
div#content-down li { display: inline; padding-left:60px; padding-top:45px;}
div#content-down li p { line-height:20px;}
p#cli_1, p#cli_2 { font-weight:bold;}
h2#project1-h2 {background:url(../images/featured-projects.png) no-repeat; text-indent: -9999px; width:216px; height:26px; position:absolute; top:313px; left:61px;}

li#ph_1{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:330px; left:60px;}
li#ph_2{ background:url(../images/projects-bg.png) no-repeat; width:441px; height:240px; position:absolute; top:330px; left:500px;}

p#edu-b1 {font-weight:bold; line-height:11px;}
p#edu-b2 {font-weight:bold; margin-bottom:10px; line-height:11px;}
p#thanks {position:absolute; top:248px; left:-4px; width: 756px; line-height:20px;}

div#education { width:292px; position:absolute; top:315px; left:84px;}
div#knowledge { width:292px; position:absolute; top:315px; left:376px;}
div#skills { width:292px; position:absolute; top:330px; left:669px;}

h2#education-h {background:url(../images/educations.png) no-repeat; text-indent: -9999px; margin-bottom:10px;}
h2#knowledge-h {background:url(../images/knowledge.png) no-repeat; text-indent: -9999px; margin-bottom:10px;}
h2#skills-h {background:url(../images/skills-services.png) no-repeat; text-indent: -9999px; margin-bottom:10px;}
h2#langauges-h {background:url(../images/langages.png) no-repeat; text-indent: -9999px; margin-top:20px; margin-bottom:10px;}

div#knowledge ul, div#skills ul { list-style-type:disc; margin: 0; padding: 0 0 0 11px; }

div#knowledge li, div#skills li { display:list-item; line-height:20px;  padding: 0 0 0 7px; list-style-image:url(../images/bullet.png);}

div#contact-form { position:absolute; width:757px; top: 10px; left: 85px;}

form#contact {position:absolute; top:300px; width: 755px; left: -3px;}

div#name-area{width:390px; position:absolute; top: 10px;}
div#email-area{width:360px; position:absolute; left: 385px; top: 10px;}
div#message-area{width:755px; position:absolute; top: 85px;}


div#name-area div { background:url(../images/text-field.png) no-repeat; width:300px; height:40px; padding:12px 0 10px 20px; position:absolute; top:-12px; left:70px;}
div#name-area input { width:260px; background:none; border:0px; font-family: "Courier New", Courier, monospace; font-size: 12px;}

div#email-area div { background:url(../images/text-field.png) no-repeat; width:300px; height:40px; padding:12px 0 10px 20px; position:absolute; top:-12px; left:73px;}
div#email-area input { width:260px; background:none; border:0px; font-family: "Courier New", Courier, monospace; font-size: 12px;}

div#message-area div { background:url(../images/text-area.png) no-repeat; width:689px; height:158px; padding:15px 0 10px 20px; position:absolute; top:-12px; left:73px;}
div#message-area textarea {width:650px; background:none; border:0px; font-family: "Courier New", Courier, monospace; font-size: 12px; 	height: 135px;}

div#submit-area{width:85px; position:absolute; top: 250px; font-family: "Courier New", Courier, monospace; font-size: 12px; left: 686px;}

div#thanks-contact { background:url(../images/thanks-contact.png) no-repeat; width:562px; height:62px; text-indent: -9999px; position:absolute;  margin-top:400px; margin-left:200px;}





/* Footer CSS */
div#footer { text-align:center; width:960px; position:relative;/* padding-bottom:20px; top:665px;*//* left:84px;*/}
div#footer ul { margin-top:10px; }
div#footer li { display:inline; padding-right:10px;}

li#linkf-1 {}
div#footer a, div#footer a:link, div#footer a:visited { color:#000000; text-decoration:underline; }
div#footer a:hover, div#footer a:active, div#footer a:focus { color:#666; text-decoration:none; }
div#footer p { margin-top:10px; line-height:20px; margin-bottom:30px;}