/* global */
html{height: 100%;}

body
{ padding: 0; margin: 0; font-size: 0.9em; background: #fff; color: #191967; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; }

p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1
{ letter-spacing: 0.1em;
  font-weight: normal;
  padding: 16px 0 5px; 
  margin: 0 0 12px; 
  border-bottom: 1px solid;
  font-size: 150%;
}
h2 { font-size: 150%; font-weight: normal; letter-spacing: 0.1em; margin: 0 0 12px; padding: 16px 0 5px; border-bottom: 1px solid; }
img
{ border: 0px; 
  margin: 0px; 
  padding: 0px;
}

a{outline: none;}

/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
  border-color: #40403E;
}

/* unordered list */
ul
{ margin: 2px 0px 18px 16px;
  padding: 0px;
}

ul li
{ list-style-type: square;
  margin: 0px 0px 6px 0px; 
  padding: 0px;
}

/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* margin lefts / margin rights - to centre content */
#logo, #menu, #site_content
{ margin-left: auto; 
  margin-right: auto;
}

/* logo */

#logo, #logo h1
{ background: #fff;
  color: #4d5c80;
}

#logo
{ background-image: url(../images/logo_alternate.jpeg); background-repeat: no-repeat; position: relative; left: -20px; width: 900px; height: 120px; margin-top: 0; padding-top: 0; }

#logo h1
{ font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 4.5em;
  text-transform: lowercase;
  font-weight: normal;
  padding: 0 0 0 14px;
  border: 0;
  float: left;
  letter-spacing: 0;
}
#logo.portfolio { background-image: none; }
.name { color: #8f9eb3; font-size: 1.75em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; font-style: italic; line-height: 0.75em; text-align: right; position: relative; right: -12px; margin: 0 0 12px; padding: 2.5em 0 0; }
.descr { color: #737980; font-size: 0.65em; font-family: Georgia, "Times New Roman", Times, serif; font-style: normal; line-height: 1em; text-transform: none; text-align: right; }
#links
{ margin: 12em 0.75em 2em 0;
  font-size: 0.7em;
  text-align: right;
  padding: 10em 1em 2em 0;
  text-transform: lowercase;
}
#links a, #links a:hover
{ padding: 0 0 0.1em;
  text-decoration: none;
}

#links, #links a:hover, #links a.selected, #links a.selected:hover
{ background: transparent;
  color: #666e80;
}
#links a
{ background: transparent;
  color: #4d5c80;
}
/* navigation menu */
#menu
{ height: 30px; width: 900px; border-bottom: 2px solid #5c6f9a; background: #fff; color: #eee; border-top-color: #5c6f9a; border-right-color: white; border-left-color: white; }

#menu ul{margin: 0px auto;} 

#menu li
{ float: left; 
  margin: 0px; 
  padding: 0px;
  list-style: none;
} 

#menu li a 
{ display: block;
  float: left;
  height: 24px;
  text-decoration: none; 
  padding: 6px 19px 0;
  border-right: 4px solid #fff;
  font-weight: bold;
}

#menu li a, .side_menu_item a
{ background: #cfdae7;
  color: #003;
  border-color: white;
} 

#menu li a:hover, #menu li a.selected, #menu li a.selected:hover
{ background: #5c6f9a;
  color: white;
  border-color: white;
} 

#colours
{ height: 0px;
  text-align: right;
  padding: 16px 16px 0px 300px;
}

/* main content */
#site_content
{ width: 898px;
  overflow: hidden;
  border-right: 1px solid #5c6f9a;
  border-bottom: 1px solid #5c6f9a;
  border-left: 1px solid #5c6f9a;
  background: #fff;
  height: 650px;
  padding-bottom: 1em;
  border-top-color: #5c6f9a; }
  
#site_content.short
{ width: 898px;
  overflow: hidden;
  border-right: 1px solid #5c6f9a;
  border-bottom: 1px solid #5c6f9a;
  border-left: 1px solid #5c6f9a;
  background: #fff;
  height: 600px;
  padding-bottom: 1em;
  border-top-color: #5c6f9a; }
  
#site_content.long { background: #fff; width: 898px; height: 1400px; border-top-color: #5c6f9a; border-right: 1px solid #5c6f9a; border-bottom: 1px solid #5c6f9a; border-left: 1px solid #5c6f9a; }
/* side menu */
#side_menu
{ color: #cfdae7; font-size: 0.8em; background-image: url(../images/blobs.png); padding: 22px 3px 10px 19px; float: left; width: 200px; margin: 0; }

#side_menu2
 { color: #cfdae7;
   font-size: 0.8em;
   background-image: url(../images/blobs.png);
   background-repeat: no-repeat;
   margin: 6px 0 0;
   padding: 22px 3px 10px 19px;
   width: 200px;
   height: 580px;
   float: left; }
   
#side_menu3
 { color: #cfdae7;
   font-size: 0.8em;
   background-image: url(../images/blobs_lighter.png);
   background-repeat: no-repeat;
   margin: 6px 0 0;
   padding: 22px 3px 10px 19px;
   width: 200px;
   height: 580px;
   float: left; }

.side_menu_item
{ width: 170px; padding: 6px 0 12px; height: 70px; margin: 0; }

.side_menu_item a
{ float: left; 
  width: 146px; 
  height: 54px; 
}

.side_menu_item img 
{ display: block; 
  margin: 2px;
}

.side_menu_item a.selected, .side_menu_item a:hover, .side_menu_item a.selected:hover
{ background: #eee;
  color: #cfdae7;
}

.info
{ padding-top: 4px;
  float: left;
}

/* page content */
#content
{ font-size: 0.9em; text-align: left; width: 650px; height: 600px; float: left; margin: 0 0 1em; padding: 1em 0 1.5em 1.25em; }
#content p { color: #191967; margin: 0; padding: 0 1em 0.7em 0; }
#content, #content a:hover
{ background: transparent;
  color: #7d8fb3;
}
#content a
{ background: transparent;
  color: #5b0000;
}
#content a, #content a:hover{text-decoration: none;}

#content h1
{ background: transparent; color: #750000; font-size: 1.3em; border-color: #40403e; }
#content h2 { font-size: 1.3em; background: transparent; border-color: #40403e; }
#content ul { color: maroon; margin: 0 0 1.1em 18px; padding: 0 0 0 1em; }
#content li { }
.sub
{ font-size: 0.8em; letter-spacing: 0.1em; color: gray; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; text-transform: lowercase; text-align: right; float: right; margin: 0; padding: 22px 0 0; }
/* page content alternate */
#content2 { font-size: 0.9em; background-image: url(../images/front_page.jpeg); background-repeat: no-repeat; background-position: right bottom; text-align: left; padding: 12px 0 18px 14px; width: 650px; height: 570px; float: left; }
#content2 p { color: #00004e; margin: 0; padding: 0 1em 0.7em 0; }
#content2, #content2 a:hover
{ color: #7d8fb3; }
#content2 a
{ background: transparent;
  color: #5b0000;
}
#content2 a, #content a:hover{text-decoration: none;}
#content2 h1
{ background: transparent; color: #750000; font-size: 1.3em; border-color: #40403e; }
#content2 ul { color: #3a3a5a; margin: 0 0 1.1em 18px; padding: 0 0 0 1em; }
#content2 li { }
.float1 { position: relative; right: 0; bottom: 0; width: 50%; height: 300px; float: right; margin: 0; padding: 0; }
/*video styles */
.project { position: relative; left: -235px; width: 650px; clear: both; margin: 0 0 3em 10px; padding: 6px 0 2em; }
.video { width: 425px; float: right; margin: 0 0 6em 6px; padding: 6px 0 1em; }
.description { color: #cfdae7; font-size: 0.9em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: normal; line-height: 1.1em; text-align: left; margin: 0; padding: 3px 20px 0 0; position: relative; top: 0; left: 0; width: 190px; float: left; }
.description h1 { color: #6c7b9a; margin: 0 0 3px; padding: 0 0 4px; }
.description h2 { color: #6c7b9a; margin: 0 0 3px; padding: 6px 0 4px; }
.description p { line-height: 1.3em; margin: 0; padding: 0 0 2em; }
/* form */
form
{ font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; margin: 3px 0 0; padding: 0; }

form#contact{ color: #191967; height: 220px; }

.row1
{ color: #191967; width: 450px; clear: both; padding-bottom: 0.25em; }

.row1 span.formlabel 
{ color: #3a3a5a; float: left; width: 15%; text-align: right; padding-top: 0.45em; }

.row1 span.forminput
{ float: right; text-align: left; width: 83%; padding-bottom: 0.25em; } 

#contact input, #contact textarea
{ width: 299px; font-size: 100%; border: solid thin silver; overflow: auto; margin: 2px; background: #e6ecf3; color: #000; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; padding: 3px 4px; }
#contact input.submit
{ font-size: 0.9em; width: 5em; margin: 8px 0 0 68%; height: 2.15em; cursor: pointer; color: #003; text-transform: capitalize; border: outset thin silver; }
/* CSS Image Viewer from CSSplay (www.cssplay.co.uk) */
#gallery { background: white; width:640px; height:500px; padding:10px; text-align: left; position:relative; }
#gallery b.default { background-color: white; position:absolute; left:10px; top:10px; width:548px; height:500px; text-align:left; }
#gallery b.default img { background-color: white; display:block; margin:0 auto 10px; }
#gallery ul { background-color: white; list-style:none; padding:0; margin:0; width:120px; position:relative; float:right; }
#gallery ul li { background-color: #fff; display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px; }
#gallery ul li a { background-color: white; display:block; width:50px; height:50px; text-decoration:none; border-color:#eee #555 #333 #ddd; border-style: solid; border-width: 1px; }
#gallery ul li a img { background-color: white; display:block; width:50px; height:50px; border:0; }
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#5c6f9a;}
#gallery ul li a:hover b { background: white; position:absolute; left:-548px; top:0; width:548px; height:500px; text-align:left; z-index:20; }
#gallery ul li a:hover img { background-color: white; margin:0 0 10px 30px; width:auto; height:auto; float: left; border: solid 1px silver; }
#gallery ul li a:hover img.bkgrnd { background-color: white; padding: 2px; border-style: none; }
#gallery ul li a:active, #gallery ul li a:focus { background: silver; white-space:normal; border-color:#555 #ddd #eee #333; }
#gallery ul li a:active b, #gallery ul li a:focus b { background: white; position:absolute; left:-548px; top:0; width:548px; height:500px; text-align:left; z-index:10; }
#gallery ul li a:active img, #gallery ul li a:focus img{ background-color: white; margin:0 0 10px 30px; width:auto; height:auto; float: left; border: solid 1px silver; }
#gallery ul li a:active img.bkgrnd { background-color: white; padding: 2px; border-style: none; }
#gallery ul li a:focus img.bkgrnd { background-color: white; padding: 2px; border-style: none; }
/*span (text)*/
#gallery b.default span { display:block; color:#cfdae7; font-weight:normal; font-size:0.9em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.4em; background: #fff; position: absolute; top: 0; bottom: -200px; width:190px; height: 550px; margin:0 auto; }
#gallery ul li a span { background: #fff; padding: 1em; display:none; }
#gallery ul li a:hover span { display:block; color:#cfdae7; font-weight:normal; font-size:0.9em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.4em; position: absolute; top: 0; left: -220px; width:190px; height: 550px; margin:0 auto; }
#gallery ul li a:hover span p { line-height: 1.4em; margin: 0; padding: 0 0 1.5em; }
#gallery ul li a:hover span h1 { color: #6c7b9a; margin: 0 0 3px; padding: 0 0 4px; }
#gallery ul li a:active span, #gallery ul li a:focus span { display:block; color:#cfdae7; font-weight:normal; font-size:0.9em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.4em; position: absolute; top: 0; left: -220px; width:190px; height: 550px; margin:0 auto; }
#gallery ul li a:active span p { line-height: 1.4em; margin: 0; padding: 0 0 1.5em; }
#gallery ul li a:active span h1 { color: #6c7b9a; margin: 0 0 3px; padding: 0 0 4px; }
#gallery ul li a:focus span p { line-height: 1.4em; margin: 0; padding: 0 0 1.5em; }
#gallery ul li a:focus span h1 { color: #6c7b9a; margin: 0 0 3px; padding: 0 0 4px; }