About

body {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
background-color: #e1e0db;
background-image: url(images/bg.jpg);
background-repeat: repeat;
font-size:13px;
line-height: 17px;
color:#000;
}

.contact {
background-image: none;
background-color:#e9e9e9;
}

a, a:visited, a:active {
color:#709399;
text-decoration: none;
}

a:hover {
color:#709399;
text-decoration: underline;
}

/* DOSSIER BACKGROUND */
/* —————————————– */

#wrapper {
width:969px;
margin:0 auto;
margin-top:60px;
margin-bottom:100px;
}

.wrapper-top {
width:969px;
height:19px;
margin:0 auto;
background-image:url(images/btop.jpg);
background-repeat:no-repeat;
}

.wrapper-mid {
width:969px;
margin:0 auto;
background-image:url(images/bmid.jpg);
background-repeat: repeat-y;
padding-bottom:40px;
}

.wrapper-bottom {
width:969px;
height:22px;
padding:0;
margin:0 auto;
background-image:url(images/bbottom.jpg);
background-repeat:no-repeat;
}

/* PAPER BACKGROUND */
/* —————————————– */

#paper {
width:828px;
margin:0 auto;
}

.paper-top {
width:828px;
margin:0 auto;
background-image:url(images/ptop.jpg);
background-repeat:no-repeat;
height:126px;
}

#paper-mid {
width:828px;
margin:0 auto;
background-image:url(images/pmid.jpg);
background-repeat:repeat-y;
display:block;
padding:0;
overflow: hidden;
padding-bottom:75px;
padding-top:7px;
}

.paper-bottom {
width:828px;
height:18px;
margin:0 auto;
background-image:url(images/pbottom.jpg);
background-repeat:no-repeat;
}

/* ENTRIES */
/* —————————————– */

.entry {
width:720px;
display: block;
padding-top:55px;
clear: both;
margin-left:4px;
}

h1 {
width:250px;
font-size:42px;
color:#315a60;
margin-bottom:3px;
clear:both;
}

h1 span {
font-size:21px;
display:block;
color:#315a60;
margin-top:-5px;
}

h2 {
width:180px;
height: 23px;
text-align: right;
float:left;
padding:0;
margin:0;
clear:both;
font-size:22px;
color:#315a60;
margin-bottom:-12px;
}

p {
width:500px;
margin-left:40px;
float:right;
}

p img {
float:right;
margin-left:20px;
padding-left:10px;
}

div.content {
clear: both;
padding:0;
margin:0;
overflow: hidden;
display:block;
padding-top:32px;
}

h3 {
width:180px;
text-align: right;
float:left;
padding:0;
clear:both;
font-size: 13px;
color:#709399;
}

h4 {
width:180px;
text-align: right;
float:left;
padding:0;
clear:both;
font-size: 11px;
color:#709399;
}

h5 {
width:180px;
text-align: right;
float:left;
padding:0;
clear:both;
font-size: 10px;
color:#709399;
}

h6 {
width:180px;
text-align: right;
float:left;
padding:0;
clear:both;
font-size: 9px;
color:#709399;
}

em {
font-family: Georgia, “Times New Roman”, serif;
font-style: italic;
color:#777777;
font-size:12px;
display: block;
padding-top:3px;
}

ol {
float:right;
width:500px;
margin-left:40px;
list-style: decimal;

}

ol li {
width:500px;
list-style-type: decimal;
list-style-position: inside;
}

dl {
float:right;
width:500px;
margin-left:40px;

}

dt {
float:left;
display: block;
width:500px;
color:#709399;
}

dd {
float:left;
display: block;
width:480px;
text-indent:20px;
}

ul.unordered {
float:right;
width:500px;
margin-left:40px;

}

ul.unordered li {
margin:0;
padding:0;
float:left;
display: block;
width:500px;
background-image:url(images/bullet.gif);
background-repeat: no-repeat;
padding-left:10px;
background-position: 0 .5em;
margin-top:0;
}

ul.info {
float:right;
width:500px;
margin-left:40px;
list-style-type: none;
}

ul.info li {
margin:0;
padding:0;
float:left;
display: block;
width:500px;
background-image:url(images/bullet.gif);
background-repeat: no-repeat;
padding-left:10px;
background-position: 0 .5em;
margin-top:12px;
}

ul.skills {
margin:0;
padding:0;
float:right;
width:500px;
margin-left:40px;
margin-top:-6px;
list-style-type: none;

}

ul.skills li {
margin:0;
padding:0;
float:left;
width:156px;
background-image:url(images/bullet.gif);
background-repeat: no-repeat;
padding-left:10px;
background-position: 0 .5em;
margin-top:6px;
}

ul.works {
margin:0;
padding:0;
float:right;
width:500px;
margin-left:40px;
list-style-type: none;
}

ul.works li {
margin:0;
padding:0;
float:left;
}

ul.works li img {
padding:4px;
background-color:#fff;
width:95px;
height:95px;
border:1px solid #b7c9cc;
margin-right:20px;
margin-bottom:16px;
}

ul.works li img:hover {
border:1px solid #315a60;
cursor: pointer;
}

img.portrait {
background-image:url(images/frame.jpg);
background-repeat: no-repeat;
width:109px;
height:109px;
padding-top:20px;
padding-left:11px;
padding-right:11px;
padding-bottom:36px;
margin-left:50px;
float:left;

}

/* SELF INFORMATION */
/* —————————————– */

.self {
width:250px;
float:left;
padding-top:11px;
margin-left:38px;
margin-bottom:15px;
}

.self ul {
padding-top: 10px;
}

.self ul li.ad {
background-image:url(images/icn-ad.gif);
}

.self ul li.mail {
background-image:url(images/icn-mail.gif);
}

.self ul li.tel {
background-image:url(images/icn-tel.gif);
}

.self ul li.web {
background-image:url(images/icn-web.gif);
}

.self ul li {
background-repeat: no-repeat;
padding-left:26px;
background-position: 0 .1em;
height:25px;
display:block;
margin-top:-2px;
}

/* SOCIAL ICONS */
/* —————————————– */

.social {
width:135px;
float:right;
padding-top:10px;
}

.social ul {
list-style: none;
}

.social ul li {
float:left;
width:21px;
height:24px;
margin:0;
padding:0;
margin-left:6px;
}

/* TIPSY */
/* —————————————– */

.tipsy { padding: 5px; font-size: 10px; background-repeat: no-repeat; background-image: url(images/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #1c363a; color: #fff; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; margin-bottom:20px; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

/* COLORBOX */
/* —————————————– */

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0; display:none;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

#cboxOverlay{background:#666;}

#colorBox{}
#cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) 0 0 no-repeat;}
#cboxTopCenter{height:25px; background:url(images/border1.png) 0 -50px repeat-x;}
#cboxTopRight{width:25px; height:25px; background:url(images/border1.png) -25px 0 no-repeat;}
#cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) 0 -25px no-repeat;}
#cboxBottomCenter{height:25px; background:url(images/border1.png) 0 -75px repeat-x;}
#cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) -25px -25px no-repeat;}
#cboxMiddleLeft{width:25px; background:url(images/border2.png) 0 0 repeat-y;}
#cboxMiddleRight{width:25px; background:url(images/border2.png) -25px 0 repeat-y;}
#cboxContent{background:#fff;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#315a60;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#000;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:url(images/loading.gif) 5px 5px no-repeat #fff;}
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/* GO TO TOP */
/* —————————————– */

#message {
display: block;
display: none;
z-index: 999;
opacity: .8;
position: fixed;
top: 100%;
margin-top: -40px;
right: 0%;
margin-right:10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
width: 77px;
line-height: 20px;
height: 20px;
padding: 5px;
background-color: #1c363a;
font-size: 11px;
text-align: center;
}

#message a {
color: #fff;
}

/* ELEMENTS */
/* —————————————– */

table {
width: 500px;
margin-left:40px;
float:right;
border-collapse: collapse;
border-bottom:1px dashed #999;
border-top:1px dashed #999;
}

table td {
padding: 10px;
padding-top:0;
border-right:1px dashed #999;
}

table td:hover {
background-color: #f2f2f2;
}

table th {
padding: 10px;
padding-top:0;
color:#709399;
text-align: left;
border-right:1px dashed #999;
}

table td.center {
text-align: center;
}

table td.last {
background: none;
}

table th.center {
text-align: center;
}

table th.last {
background: none;
}

table tr {
border-left:1px dashed #999;
border-top:1px dashed #999;
}

table tr.caption {
border-left:1px dashed #999;
}

blockquote {
border-left:3px solid #709399;
padding-left:8px;
width:489px;
margin-left:40px;
float:right;
}

abbr, acronym {
border-bottom:1px dashed #709399;
}

strong {
font-weight: bold;
}

small {
font-size:70%;
}

big {
font-size:1.2em;
}

/* CONTACT */

fieldset, legend {
float:right;
width:500px;
padding:0;
margin:0;
margin-left:40px;
}

h1.warn {
color:#315a60;
font-size:18px;
margin-top:30px;
padding:50px;
text-align: center;
}

#contactform {
width:320px;
height:370px;
margin:0 auto;
padding:50px;
overflow: hidden;
}

label {
float:left;
width:40px;
height:28px;
margin-bottom:10px;
clear:both;
color:#315a60;
}

input {
width:228px;
float:right;
height:18px;
margin-bottom:10px;
border-top:1px solid #c8c8c8;
border-left:1px solid #c8c8c8;
border-right:1px solid #dadada;
border-bottom:1px solid #f2f2f2;
background-color: #e4e4e4;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 13px;
padding:5px;
outline: none;
}

input:focus {
background-color: #dddddd;
border-top:1px solid #c8c8c8;
border-left:1px solid #c8c8c8;
border-right:1px solid #dadada;
border-bottom:1px solid #f2f2f2;
}

textarea {
border-top:1px solid #c8c8c8;
border-left:1px solid #c8c8c8;
border-right:1px solid #dadada;
border-bottom:1px solid #f2f2f2;
background-color: #e4e4e4;
width:228px;
float:right;
margin-bottom:10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 13px;
padding:5px;
outline: none;
}

textarea:focus {
background-color: #dddddd;
border-top:1px solid #c8c8c8;
border-left:1px solid #c8c8c8;
border-right:1px solid #dadada;
border-bottom:1px solid #f2f2f2;
}

.submit-button {
background: transparent url(images/submit.jpg) no-repeat 0 0;
display: block;
clear: both;
width:90px;
height: 33px;
border:none;
float:left;
margin-left: 80px;
text-indent: -9999px;
outline: 0;
cursor: pointer;
padding:0;
}

.submit-button:hover {
background: transparent url(images/submit.jpg) no-repeat 0 -33px;
outline: 0;
border: none;
}

label.error {
clear: both;
padding:0;
margin-top:-5px;
color:#709399;
font-size: 1.0em;
font-style: italic;
font-weight: normal;
margin-left:80px;
width:238px;
}


John Smith

John Smith
Interactive Designer


OBJECTIVE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim viverra nibh sed varius. Proin bibendum nunc in sem ultrices posuere. Aliquam ut aliquam lacus.


EDUCATION

Sep 2005 – Feb 2007

Academy of Art University, London
Master in Communication Design

Sep 2001 – Jun 2005

University of Art & Design, New York
Bachelor of Science in Graphic Design


EXPERIENCE

May 2009 – Feb 2010

Agency Creative, London
Senior Web Designer

  • Vestibulum eu ante massa, sed rhoncus velit.
  • Pellentesque at lectus in libero dapibus cursus. Sed arcu ipsum, varius at ultricies acuro, tincidunt iaculis diam.

Jun 2007 – May 2009

Junior Web Designer
Bachelor of Science in Graphic Design

  • Sed fermentum sollicitudin interdum. Etiam imperdiet sapien in dolor rhoncus a semper tortor posuere.
  • Pellentesque at lectus in libero dapibus cursus. Sed arcu ipsum, varius at ultricies acuro, tincidunt iaculis diam.


SKILLS

Software Knowledge

  • Photoshop
  • Illustrator
  • InDesign
  • Flash
  • Fireworks
  • Dreamweaver
  • After Effects
  • Cinema 4D
  • Maya

Languages

  • CSS/XHTML
  • PHP
  • JavaScript
  • Ruby on Rails
  • ActionScript
  • C++


WORKS

About Me