/*Design for www.ruthjohn.co.uk
 
 by Ruth John
 
copyright Ruth John 2008*/


html, body {font-family: tahoma, arial, "sans serif";font-size:11px;margin:0;padding:0;border:none;background-color:#cccccc;color:#1e1e1e;text-align:left;}
a img {border:none;margin:0px;padding:0px;}
img {border:none;margin:0px;padding:0px;}
a, a:visited {color:#1e1e1e;text-decoration:none;font-weight:bold;}
a:hover, a:active {color:black;text-decoration:underline;}
textarea, input {float:left;font-family:tahoma, arial, "sans serif";font-size:11px;overflow:auto;border:1px solid #a3a3a3;padding:1px;background-color:#efefef;}
form {border:none;margin:0px;padding:0px;}
fieldset {margin:16px 0px;padding:10px;}
label {float:right;}
ul {padding:0;margin:0;list-style:none;}
h1, h2, h3, h4, h5, h6 {margin:0px;padding:0px;}
/*h1 {font-size:24px;font-weight:normal;letter-spacing:1px;}*/
h1, h2 {font-size:16px;font-weight:bold;letter-spacing:1px;margin:0px 0px 10px 0px;padding:0px 0px 5px 0px;border-bottom:1px solid #1e1e1e;}
h3 {font-size:11px;font-weight:bold;}
h4 {font-size:12px;font-weight:normal;letter-spacing:1px;}
h5, h6 {font-size:11px;margin:0px;}
p {margin:20px 30px 20px 30px;line-height:18px;}
p.center {text-align:center;}
table, table tr, table th, table td {border:none;margin:0px;padding:3px;}

#wrapper {width:770px;margin:20px auto;background:white url('page-bk.png') no-repeat top left;
        border:1px solid #909090;}

#header {background-color:transparent;height:145px;width:770px;position:relative;}
#header a {font-weight:normal;color:white;font-size:24px;letter-spacing:1px;display:block;width:200px;height:100px;padding:9px 0px 0px 18px;opacity: .7;filter: alpha(opacity=70);position:absolute;top:64px;left:60px;}
#header a:hover {text-decoration:none;}
#header a span {display:none;}
#header a.blue {background-image:url('bk_blue_big.gif');background-repeat:no-repeat;color:white;}
#header a.violet {background-image:url('bk_violet_big.gif');background-repeat:no-repeat;color:white;}
#header a.orange {background-image:url('bk_orange_big.gif');background-repeat:no-repeat;color:white;}
#header a.green {background-image:url('bk_green_big.gif');background-repeat:no-repeat;color:white;}

#navbar {position:relative;background-color:white;opacity: .7;filter: alpha(opacity=70);border-top:1px solid #a3a3a3;border-bottom:1px solid #a3a3a3;}
#navbar ul {width:770px;height:24px;}
#navbar ul li {display:inline;}
#navbar ul li a {text-align:center;display:block;height:24px;width:auto;margin:0px;padding:0px 20px;float:left;line-height:24px;font-weight:bold;color:black;background:transparent url('nav_bk.gif') repeat-x 0px 0px;}

#navbar ul li a.blue:hover, #navbar ul li a.bluea {background-position: 0px -30px;color:white;}
#navbar ul li a.violet:hover, #navbar ul li a.violeta {background-position: 0px -120px;color:white;}
#navbar ul li a.orange:hover, #navbar ul li a.orangea {background-position: 0px -90px;color:white;}
#navbar ul li a.green:hover, #navbar ul li a.greena {background-position: 0px -60px;color:white;}

#content {min-height:500px;background-image:url('bottombk.gif');background-position:left bottom;background-repeat:no-repeat;}

/*footer*/
#footer{position:relative;height:50px;width:770px;border-top:1px solid #a3a3a3;opacity: .7;filter: alpha(opacity=70);text-align:center;}
#footer p {line-height:14px;margin:10px 0px 0px 0px;}

div.screen{height:auto;background-color:white;opacity: .85;filter: alpha(opacity=85);border:1px solid #a3a3a3;margin:20px auto;padding:20px;}
.widthsmall {width:500px;}
.widthbig {width:700px;}

/*CV*/
dl {margin:0px 0px 30px 30px;line-height:18px;}
dt {padding:10px 5px 5px 0px;margin:0px 0px 0px 0px;font-weight:bold;}
dd {padding:0px 0px 5px 0px;margin:0px 0px 0px 30px;}

dd ul {padding:0px 0px 0px 30px;}
dd ul li {}

dl.skillsone {margin:0px 0px 30px 30px;line-height:18px;}
dl.skillsone dt {padding:10px 5px 5px 0px;margin:0px 0px 0px 0px;font-weight:bold;}
dl.skillsone dd {padding:0px 0px 5px 0px;margin:0px 0px 0px 30px;}
ul.skills {display:block;overflow:hidden;margin-bottom:6px;padding-left: 0px;}
ul.skills li {float:left;display:block;margin:0px;padding:0px 20px 0px 0px;font-weight:normal;}
/*dl.skills dd {float:left;display:block;margin:0px;padding:0px 16px 0px 0px;}*

/*PORTFOLIO showing work divs*/
div.onelink {overflow:hidden;height:auto;background-color:white;opacity: .92;filter: alpha(opacity=92);border:1px solid #a3a3a3;margin:15px;padding:15px;width:320px;float:left;}
/*a.example {display:block;}
a.example:hover {background-color:white;opacity: 1;filter: alpha(opacity=100);border:2px solid #2e2e2e;}*/
div.onelink img {border:1px solid #a3a3a3;float:left;}
div.onelink ul {display:block;float:left;padding:0px 0px 0px 6px;width:180px;}
div.onelink ul li {display:block;margin:0px;padding:5px;}
div.onelink ul li a {float:right;}
div.onelink ul li a span {display:none;}
div.lhover {background-color:#f4f4f4;cursor:pointer;cursor:hand;opacity: .92;filter: alpha(opacity=92);border:1px solid #909090;}


/*
 put long description at top then ilsts in columns after image
*/
div.preview {overflow:hidden;height:auto;background-color:white;border:1px solid #a3a3a3;margin:20px auto;padding:30px 20px 20px 20px;position:relative;}
div.preview a#back {position:absolute;top:10px;left:20px;}
div.preview a#site {position:absolute;top:10px;right:20px;}
div.preview img {clear:both;margin:0px 30px 20px 30px;border:1px solid #a3a3a3;position:relative:display:block;}
div.preview p {padding:5px 0px 0px 0px;}
div.lists {width:172px;float:left;padding:0px 20px 10px 20px;margin:0px 10px 10px 10px;clear:none;position:relative;display:block;overflow:hidden;}
div.lists h4 {padding:5px;border-bottom:1px solid #a3a3a3;}
div.lists ul {display:block;margin:0 auto;position:relative;padding:5px 0px 0px 0px;}
div.lists ul li {display:block;padding:2%;}

/*JAVASCRIPT*/
#javamenu {height:40px;width:180px;}
#animmenu {background-color:#efefef;z-index:1;display:block;}
#animmenu li {display:inline;padding:0px 10px 0px 0px;}

div.javaex {width:500px;margin:10px auto;background-color:#efefef;color:#1e1e1e;padding:20px;}
div.javaex a, div.javaex a:visited {color:#1e1e1e;font-weight:bold;text-decoration:underline;}
div.javaex a:hover, div.javaex a:active {color:#1e1e1e;font-weight:bold;text-decoration:none;}

#draglist {width:200px;border:1px solid #1e1e1e;margin:10px;padding:10px;float:left;}
.dragitem {width:20px;height:20px;background-color:white;border:1px solid #1e1e1e;display:block;float:left;list-style:none;text-align:center;margin:8px;padding:5px;cursor:move;}
#droparea {width:200px;height:144px;border:1px solid #1e1e1e;margin:10px;padding:10px;float:left;}

#clicktoview {width:460px;border-bottom:solid 1px #1e1e1e;margin: 0px auto;}
#clicktoview h5 {background-color:#efefef;padding:7px 15px;margin:0;border-top:1px solid #1e1e1e;cursor:pointer;}
#clicktoview h5:hover {background-color:#eaeaea;text-decoration:none;}
#clicktoview p {background:#ffffff;margin:0px;padding:10px 15px;}

/*CONTACT*/
input.button {padding:3px;font-weight:bold;border:1px solid #a3a3a3;}
input.button:hover {text-decoration:underline;cursor:pointer;cursor:hand;}
input.green {background-image:url('bk_green.gif');background-repeat:repeat-x;color:white;background-position:center;}
input.violet {background-image:url('bk_violet.gif');background-repeat:repeat-x;color:white;background-position:center;}

/*General classes*/
.texttop {vertical-align:text-top;}
.clear {clear:both;}

/*Checkboxes on admin*/
label.check {float:left;display:block;margin:0px 0px 10px 12px;padding:2px 0px 2px 2px;}
input.checkbox {float:left;display:block;}

/*CONTACT*/
div.columnone {height:auto;width:280px;float:left;}
div.columntwo {height:auto;width:280px;}

div.center {text-align:center;}
ul.cv-ex a {font-weight:normal;}
ul.cv-ex li#seeall a {font-weight:bold;}


* =Clearing
-------------------------------------------------------------*/


/* Class for self clearing - use this where ever possible */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* Class for clearing floats */
.clear {
	clear: both;
}


/*div that scrolls*/
/*.scrolediv {width:740px;height:300px;overflow:auto;background-color:white;margin-left:30px;border:2px solid #e3e4f0;top:110px;left:1px;position:absolute;}
.scrolediv table {margin-top:10px;width:90%;}
.scrolediv table.smaller {margin-top:10px;width:60%;}

/*access denied message*/
/*h2.deny {background-color:white;border:1px solid #52546f;  padding:2px;padding-top:15px;height:40px;width:180px;left:50%;top:50%;margin-left:-90px;margin-top:-100px;position:absolute;}*/