@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------------------------------
James Kelly Screen Stylesheet

version:   1.0
date:      13/05/10
author:    James Kelly
email:     james.kelly@me.com
website:   http://www.jamesakelly.co.uk
-----------------------------------------------------------------------------*/

/* Clear Browser Defaults
-----------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
:link, :visited { text-decoration: none; color: white }
ul, ol { list-style: none }
h1, h2, h3, h4, h5, h6, pre, code { font-weight: normal; }
a img, :link img, :visited img { border: none; }
img, a { outline-style: none; }
/*---------------------------------------------------------------------------*/

/* Default Styles
-----------------------------------------------------------------------------*/
html, body { margin:0; padding:0; font-size:10px; line-height:20px; font-family:Arial, Helvetica, sans-serif; background-color:#000; text-align:center; color: #d8d8d8; }
.clear { clear:both; }
.right { float:right; }
.left { float:left; }
a:hover {text-decoration:underline;}
h1 {font-size:3em; line-height:.7333em;}
h2 { font-size:2em; line-height:1em;}
h3 { font-size:1.6em;}
h4 { font-size:1.8em;}
h5 { font-size:1.6em;}
p, li {font-size:1.1em;}
li { margin:0.7em 0;}
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
/*---------------------------------------------------------------------------*/

/* Template
---------------------------------------------------------------------------- */
#primary h1 {margin:2em 0 .5em 0; color:#fff;}
#primary h2 {margin:.5em 0 1em 0; }
#primary h3 { width: 75%; float:left; margin:.5em 0; line-height:100%; color:#888; }
#primary h4 { width:75%; float:left; margin:0 0 .5em 0; font-size:1.6em; }
#primary p { font-size:1.4em; margin: 0 0 .5em 0; width:75%; float:left; }
#primary p.date { text-align:right; width:25%; margin:0 0 .5em 0; float:right; }
.divide { border-bottom:.1em solid #1a1a1a; width:100%;}
.container { width:980px; margin:0 auto; text-align:left; clear:both; overflow:hidden; }
#topContainer { width:100%; color:black; height:2.5em; overflow:hidden; }
#topContainer p { display:inline; margin:.6em 0; }
#topContainer p span { font-weight:bold; }
#header { float:left; margin-top:2.5em; }
#header h2 { font-size:1.2em; text-align:right; line-height:23px; }
#nav { float:right; text-transform:uppercase; }
#nav li { border-right:.1em solid #1a212a; float:left; padding:3.8em 3em 0 3em; height:5.4em; font-size:1.2em; margin:0; }
#secondary { height:3.5em; }
#secondary ul { margin-top:.9em; }
#secondary li { border:.1em solid #1A1A1A; float:left; height:1.4em; margin:0; width:1.7em; }
#colourselector li { margin-right: 1em; }
#sub_slogan { width:980px; background:#00a0ea; height:6em; position:absolute; z-index:1; }
#slogan, #slogan3 { width:48%; }
#slogan3 { height:6em; float:left; }
#slogan2 { position:absolute; z-index:2; width:50%; }
#slogan { margin:1em 0 .555540em 0; font-size:4.5em; color:#fff; line-height:1.044434em; }
#slogan2 p.slog { font-size: 2.3em; line-height: 1.304340em; color: #000; }
.standardbutton { height: 1.42858em; padding: .3571em 0.71429em 0 0.71429em; color: black; font-size: 1.4em; font-weight: bold; position: relative; margin: 0 0 1em;}
#headercase { display:block; height:27.6em; width:45%; position:absolute; margin:5.2em 0 0 55em; z-index:2; }
#buttoncontainer { float: left; margin: 3em 0 0 0; }
#buttoncontainer a { color: black; }
#caseselect { float:right; }
#caseselect li { line-height: .9em; height: 1.3em; margin-left: 1em; font-weight: bold; width: 1.8em; padding-top: .3em; text-align: center; }
#casedescription { float: right; width: 35%; margin-top: .9em; }
#webstiecat { font-style: italic; float: left; margin-left: 1.5em; }
#websitename { float: left; }
/*---------------------------------------------------------------------------*/

/* Homepage
---------------------------------------------------------------------------- */
.third { width:33%; float:left; }
#primaryContainer { background:url(../img/gfx/headerbg.jpg); height:32.8em; }
.boxcontainer p { line-height:2em; }
.boxcontainer h2 { text-transform:uppercase; }
.boxcontainer { width: 30%; float: left; height:18em; border-left:.1em solid #fff; }
.boxinner { margin: 1em; }
#maincontent h1 { font-size: 1.1em; height: 1.818180em; padding: 0 0.727272em; display: block; float: left; line-height: 1.818180em; font-weight: bold; color: black; }
#boxskills { margin: 0 4.8%; }
#boxskills li { padding-left: 20px; }
/*---------------------------------------------------------------------------*/

/* Portfolio
---------------------------------------------------------------------------- */
.studybox {border-bottom:1px solid #1a1a1a; clear:both; padding:1em 0 1.3em 0; width:100%;}
.studybox ul { float:left; margin-right:15px; width:12.5em;}
.studybox li { float:left; margin:0 0 10px;}
.studybox img {float:left; width:125px; height:125px;}
.studybox img.main {width:580px; margin:0 1.5em 0 0; height:530px;}
.projectDesc {float:left; height:530px; width:245px;}
.projectDesc h2{text-transform:uppercase;}
.projectDesc h3{margin:5px 0;}
.projectDesc p {line-height:13px; width:100% !important; font-size:11px !important;}
.projectDesc a {display:block; text-align:right; width:100%; float:left;}
/*---------------------------------------------------------------------------*/

/* CV
---------------------------------------------------------------------------- */
#cvtop { display:none; }
.third .software { float:left; width:100%; }
.third .lang { float:left; width:35%; }
.third .pro { width:65%; float:left; }
.result { float:left; width:2%; }
.module { float:left; width:48%; }
.tech { float:right; width:50%; text-align:right; }
.mod { width:48%; float:left; margin-right:2%; margin-bottom:3px; }
.ccsmodules { width:100%; float:left; }
.ccs { width:20%; float:left; margin-bottom:3px; }
.ccs .module { width:70%; }
.ccs .result { width:30%; }
.ref { width:50%; float:left; }
h2 { page-break-after:always; }
/*---------------------------------------------------------------------------*/

/* Contact
---------------------------------------------------------------------------- */
#contactContainer { display: none; }
#contactContainer li { list-style-type: none; overflow: hidden; margin: 1.5em 0; }
#contactContainer ul { padding: 0; float: left; width:32% }
#contactContainer label { display: block; float: left; width:30%; font-size: 1.3em; cursor: pointer; margin: 0.230769em 0 0 0; }
#contactContainer input, #contactContainer textarea { display: block; float: left; padding: 0.153846em 0.384615em; font-family: verdana; font-size: 1.3em; height: 1.230768em; width: 65%; border: 0.076923em solid #9a9a9a; }
#contactContainer #contactcenter { margin: 0 1em;}
#contactContainer textarea { height: 4.230765em; }
#contactContainer .submit { float: right; height: 1.999998em; width: 100%; }
#contactThank { display: none; line-height: 41px; }
/*---------------------------------------------------------------------------*/

/* Footer
---------------------------------------------------------------------------- */
#copyright, #cv { margin-top: 3em; line-height: 1.9em; }
#copyright { padding-left: .1em; float: left; }
#bottombar { width: 100%; border-top: 0.090909em solid #1e2325; margin-top: 2.727270em; color: #5b5c5c; font-family: Arial; font-size: 1.1em; padding-left: 0.272727em; }
#cv { float: right; margin-right: 6em; background-position: 0 .4em; background-repeat: no-repeat; padding-left: 2.5em; position: relative; }
#cv img { position: absolute; bottom: .4em; right: 0; }
/*---------------------------------------------------------------------------*/