/* -------------------- CSS RESET -------------------- */ body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {margin: 0px; padding: 0px; border: 0px;} body {background-color:#ffe9c7; font-family: Akzidenz Grotesk, Helvetica Neue, Helvetica, Arial, Verdana, sans-serif; font-size: 1em;} ul, li {list-style: none; text-decoration: none;} a {color: #860606;text-decoration: none;} a:hover {color: #ffcc00;} h1, h2, h3 {font: Verdana, bolder; color: #380505;} h1 {font-size: 21px;} h2 {font-size: 18px;} h3 {font-size: 14px;} p {font-size: 0.85em; width: 250px; margin: 10px 5px 5px 5px; color: #380505;} .pic {width: 235px; height: 145px; border: medium outset #860606; margin: 5px 0 5px 0; text-indent: -9999px;} /*#rightcolumn ul.index_portfo li.th1a {background-image: url(images/portfo/glpst_th.jpg)}*/ .th1a {width: 235px; height: 145px; border: medium outset #860606; margin: 5px 0 5px 0;background-image: url(images/portfo/glpst_th.jpg); text-indent: -9999px;} .th2a {background-image: url(images/portfo/smlogo_th.gif)} .th3a {background-image: url(images/portfo/rtch_th.jpg)} #portfolio ul.samples li a.th1 {background-image: url(images/portfo/fsh_pst_th.jpg);} #portfolio ul.samples li a.th2 {background-image: url(images/portfo/skt_pst_th.jpg)} #portfolio ul.samples li a.th3 {background-image: url(images/portfo/gtfld_th.jpg)} #portfolio ul.samples li a.th4 {background-image: url(images/portfo/beach_th.jpg)} #portfolio ul.samples li a.th5 {background-image: url(images/portfo/wrkbt_th.jpg)} #portfolio ul.samples li a.th6 {background-image: url(images/portfo/jwlry_th.jpg)} #portfolio ul.samples li a.th7 {background-image: url(images/portfo/glpst_th.jpg)} #portfolio ul.samples li a.th8 {background-image: url(images/portfo/tosc_th.jpg)} #portfolio ul.samples li a.th9 {background-image: url(images/portfo/flap_th.jpg)} #portfolio ul.samples li a.th10 {background-image: url(images/portfo/cont_th.jpg)} #portfolio ul.samples li a.th11 {background-image: url(images/portfo/bonn_th.jpg)} #portfolio ul.samples li a.th12 {background-image: url(images/portfo/sns_th.jpg)} #portfolio ul.samples li a.th13 {background-image: url(images/portfo/smlogo_th.gif)} #portfolio ul.samples li a.th14 {background-image: url(images/portfo/opp_th.jpg)} #portfolio ul.samples li a.th15 {background-image: url(images/portfo/rtch_th.jpg)} .napp {display:block; width: 80px; height: 55px; margin: 5px 0 20px 0; background-image: url(images/napp.png); background-repeat: no-repeat; text-indent: -9999px;} .twitterbird {display: block; width: 130px; height: 50px; background-image: url(images/follow.png); background-repeat: no-repeat; text-indent: -9999px;} #page-wrap {background-image: url(images/background.jpg); background-repeat:repeat-x;} /* Lay out the page structure with a container */ #container {background: none; width: 960px; /* Width of the container minus the left padding below */ margin: 0 auto; /* Aligns the container to the centre of the page */ padding: 0; /* Add some top and left padding */} #maincontent {width:680px; float: left;} #hireme {color: #860606; margin: 20px 0 0 0;} #hireme_about {color: #860606; margin: 0;} #sidebar {width: 280px; float: right;} #leftcolumn {width: 340px; float: left;} #rightcolumn {width: 340px; float:left;} #right_column ul.index_portfo li {display: inline;} #right_column ul.index_portfo li a {display: block; width: 235px; height: 145px; list-style: none; margin: 8px 0 0 30px; text-decoration: none; text-indent:-9999px; background-repeat: no-repeat;} /* -------------------- HEADER and NAV styling -------------------- */ #header {width: 960px; height: 75px; margin: 0 0 40px 0;} #header h1 a {display: block; /* Anchors are inline by default, change it to block... */ width: 400px; height: 75px; /*...Which then allows us to specify width and height (according to the image) */ margin: 0; font-size: 2em; text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */ background-image:url(images/logo.png);} /*NAV styling */ #nav {height: 30px; width: 960px;} #nav ul.nav {list-style: none; float: right; margin: -25px 0 0 0;} #nav ul.nav li {display: inline; margin: 0 1px 0 0; /* Space out the links with some right margin */} #nav ul.nav li a {display: block; float: left; /* Float them side by side */ height: 30px; width: 100px; margin: 0 15px 0 0; font-size: 18px; text-decoration: none; /* Style up the link text, remove the default underline */} /* -------------------- end HEADER and NAV styling -------------------- */ #sidebar ul.connect {list-style: none; float: left; margin: 15px 10px 10px 10px;} #sidebar ul.connect li {display: inline; margin: 0 5px 0 0; /* Space out the links with some right margin */} #sidebar ul.connect li a {display: block; float: left; /* Float them side by side */ height: 50px; width: 48px; margin: 0 10px 0 0; background-image: url(images/socmedia_sprite.png); /* Add the icon sprite */ background-repeat: no-repeat; text-indent: -9999px;} #sidebar ul.connect li a.blog {background-position: -2px -2px;} #sidebar ul.connect li a.twitter {background-position: -51px -2px;} #sidebar ul.connect li a.linkedin {background-position: -102px -2px;} #sidebar ul.connect li a.facebook {background-position: -151px -2px;} #twitter {margin: 40px 0 5px 0;} #twitter_update_list {font-size: 0.85em; line-height: 1.25; margin: 10px 0 10px 0;} #twitter_update_list li {margin: 0 0 8px 0;} #blog {margin: 40px 0 5px 0;} #blog_prev_list {margin: 10px 0 10px 0;} #blog_prev_list ul li {font-size: 0.75em; margin: 8px 0 10px 0;} /* -------------------- ABOUT styling -------------------- */ #about_left {width: 240px; float: left;} #about {width: 325px; float: left; padding: 0 5px 0 20px;} #resume {margin: 10px 0 0 0;} .sig {margin: 20px 0 0 15px;} .place {margin: 5px 0 0 0; font-family: Helvetica, Verdana, Arial, sans serif; font-weight: bolder; font-size: 14px; color: #860606;} .position {margin: 3px 0 3px 0; font-style:oblique; font-weight: bolder; font-size: 13px; color: #380505;} .date {margin: 0 0 15px 0; font-size: 12px; color: #380505;} #CV ul.res {margin: 15px 0 0 5px;} ul.skills li {font-size: 14px; margin: 6px 0 0 10px;} .about_body li {padding: 0 0 0 10px;} .about {width: 320px;} /* -------------------- SAMPLES styling -------------------- */ #portfolio { width: 600px; margin: 15px auto; } #portfolio ul.samples {list-style: none; float: left; margin: 0 10px 20px 10px;} #portfolio ul.samples li {display: inline; margin: 0;} #portfolio ul.samples li a {display: block; float: left; height: 145px; width: 235px; margin: 10px 20px; background-repeat: no-repeat; text-indent: -9999px;} /* -------------------- CONTACT FORM styling -------------------- */ #contact_form_holder {margin: 40px 0 0 0;} /* -------------------- FOOTER styling -------------------- */ #footer {clear: both; margin: 30px 0 0 0;} #footer p.copyright {clear: both; width: 960px; padding: 5px 0 5px 0; font-size: 0.7em; text-align: center;} /* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */ .clear:after {content: ""; display: block; visibility: hidden; clear: both;} .clear {zoom: 1;} /* Clearfix IE fix */