/* ******************************************************************************************************************** *

Kevin Green Portfolio Site CSS

Structure:

display | position | float | overflow | width | height | border | margin | padding | list-style | background | align | font


** ******************************************************************************************************************** */

/* ----------------------------------------------------------------------------------------------------------------------

HEADER

	clear:both; seems to be needed to make sure the whole button area is clickable, otherwise its just the text.
	
	
------------------------------------------------------------------------------------------------------------------------- */

#splash_topspace {position:static; width:1024px; height:8px; margin:0; padding:0; color:#000000; float:left;}
#splash_logospace {position:static; width:1024px; height:360px; margin:0; padding:0; color:#000000;float:left;}
#splash_edges {width:100%;height: 100%; margin:0px 0 0 0; _text-align:left; background-color #000000; background:url("design/Banner_splash_edges.jpg") 0 0 repeat-x;}
#splash_main {width:1024px;height: 100%; margin:0px auto 0 auto; _text-align:left; background:  url("design/Banner_splash.jpg") 0 0 no-repeat;}

#header_spacer {position:static; width:1024px; height:96px; margin:0; padding:0; color:#000000;float:left;}

#main {width:1024px;height: 100%; margin:0px auto 0 auto; _text-align:left; background:  url("design/Banner_image.jpg") 0 0 no-repeat;}
#edges {width:100%;height: 100%; margin:0px 0 0 0; _text-align:left; background:  url("design/Banner_edges.jpg") 0 0 repeat-x;}

/* scrollbar aways on to eliminate browser shift */
html {overflow-y: scroll;}

body 
{
height: 101%; /* hack to make sure the scrollbar is allways on.- not sure if this is superceded by overflow - y ? */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;
color: #808080;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
font-size: 0.9em;
text-align: left;
padding:0;
}
	
/* Pictures ---------------------------------------------------------------------------------- */

.imgleftnarrow
{
float:left;
width:608px;
margin-right:16px;
}

.imgleftwide
{
float:left;
width:1024px;
}

/* container for multi column block - dont mix percents and pixels! ------------------------ */

.colbreak
{
position:static;
clear:both;
width:1024px;
}

.multicol
{
width:1024px;
clear:both;
overflow:hidden;
}

.colone
{
float:left;
width:192px;
margin-right:26px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
color: #F8080;
background-color: #000000;
}

.coltwo
{
float:left;
width:390px;
margin-right:26px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
color: #F8080;
}

.colthree
{
float:left;
overflow:hidden;
width:390px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
color: #F8080;
}

.coltwothree
{
float:left;
overflow:hidden;
width:806px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
color: #F8080;
}

.colrightspace
{
float:left;
width:106px;
margin-right:26px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
color: #F8080;
}

.topofpage
{
position: absolute;
left:0px;
top:px;
}

/* main menu tabs -----------------------------------------------------------------------------------  */

ul.tabsmain 
{
  float:right;
  margin:0px;
  padding:0px;
  background:#000000
  list-style-type: none;
}

/* width here sets the witdth of each button*/

ul.tabsmain li 
{
  display:inline;
  float: left;
  width: 128px;
  height:22px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 20px;
  margin-top: 0px;
  padding:0px;
  text-decoration:none;
}

ul.tabsmain li a 
{
outline: 0;
display:block;
width: 128px;
height:22px;
margin:0px;
padding:0px;
padding-top:2px;
padding-bottom:0px;
padding-right:0px;
padding-left: 5px;
background: url("design/tabs_main_link.jpg") 0 0 no-repeat; 
color: #B0B0B0;
text-decoration:none;
}

ul.tabsmain li:hover a 
{

width: 128px;
height:22px;
margin:0px;
padding:0px;
padding-top:2px;
padding-bottom:0px;
padding-right:0px;
padding-left: 5px;
background: url("design/tabs_main_hover.jpg") 0 0 no-repeat; 
color: #000000;
text-decoration:none;
}

ul.tabsmain li#active a 
{

width: 128px;
height:22px;
margin:0px;
padding:0px;
padding-top:2px;
padding-bottom:px;
padding-right:0px;
padding-left: 5px;
Background:url("design/tabs_main_active.jpg") 0 0 no-repeat; 
color: #000000;
text-decoration:none;
}



/* ******************************************************************************************************************** *

SUB MENU TABS LIST

Display inline is probably needed here as well as float left for browser compatibility 

Height here adds space bellow filled with background colour. so if floating buttons are required  then don't set a background colour 
  
Margin adds space around the whole navigation bar  


** ******************************************************************************************************************** */

ul.tabssub 
{
display:inline;
float:left;
overflow:hidden;
width:1024px;
height: 22px;
list-style-type: none;
padding:0px;	
margin:0px;
margin-left: 30px;
}

/* ----------------------------------------------------------------------------------------------------------------------

SUB MENU LIST ITEM

  Changing the height here makes no difference if display:inline is set unless there is a float left set after the inline 
  
  setting margin left puts a margin to the left of each item including the first one 
  
  setting display:inline won't work if the width is not set in the ul. as it will be 100%  
  
  sticking in padding here won't stretch the image backgroudnd out so add the background as well 
  
  float the list item left to make a horizontal nav bar
  
  Overflow:hidden; is needed to stop the background bleeding into the margin when the anchor is set to display:block;

------------------------------------------------------------------------------------------------------------------------- */

ul.tabssub li 
{
float:left;
overflow:hidden;
margin-right:2px;

}

/* ----------------------------------------------------------------------------------------------------------------------

SUB MENU LIST ITEM ANCHOR

 Display:block: fills the whole box area with the background image or colour not just the text area. needs overflow:hidden 
 on the list item or margins don't appear
 
 Don't use float left on the anchor buggers up the margins 
 
 both float left and  display:block; make the item full width in mise 6

 note: the padding here makes the image area wider 
 height; to set the height of the image needs float:left; space bellow filled with background colour 
 
 Don't use margins
 margin-right seems to stretch out the image - maybe something to do with the repeat-x  
 margin-left puts a margin on the left and stretches out on the right 
 

 
------------------------------------------------------------------------------------------------------------------------- */

ul.tabssub li a 
{
outline: 0;
display:block;
float:left;
height: 22px;
padding:4px 20px 4px 20px;
color:#A0A0A0;
text-decoration:none;
}

/*
 ul.tabssub li a {display:block; position:relative; padding:7px 15px; border:0; background:url("design/tabs_sub_link.jpg") 0 0 repeat-x; color:#B5C4E3; font-weight:bold; text-decoration:none; cursor:pointer;}
*/

ul.tabssub li:hover a
{

Background: url("design/tabs_sub_hover.jpg") top left repeat-x;
color:#000000;
text-decoration:none;
}

ul.tabssub li#sactive a 
{
Background: url("design/tabs_sub_active.jpg") 0 0 repeat-x; 
color:#fff;
text-decoration:none;
}

/* toplink  --------------------------------------------------------------------------------------------- */

/* note no padding on the class */
.toplink
{
float: right;
width: 200px; 
height:32px;
margin:0px;
padding:0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left: 0px;
background:#000000 url("design/up_button_link.jpg") top right no-repeat; 
color: #808080;
}

.toplink a 
{
outline: 0;
height:32px;
float: right;
margin:0px;
padding:0px;
padding-top:8px;
padding-bottom:0px;
padding-right:30px;
padding-left: 0px;
text-align: right;
background:#000000 url("design/up_button_link.jpg") top right no-repeat; 
color: #b0b0b0;
}


.toplink a:visited
{
outline: 0;
float: right;
height:32px;
margin:0px;
padding:0px;
padding-top:8px;
padding-bottom:0px;
padding-right:30px;
padding-left: 0px;
text-align: right;
background:#000000 url("design/up_button_link.jpg") top right no-repeat; 
color: #b0b0b0;
}

.toplink a:hover  
{
float: right;
height:32px;
margin:0px;
padding:0px;
padding-top:8px;
padding-bottom:0px;
padding-right:30px;
padding-left: 0px;
background:#000000 url("design/up_button_hover.jpg") top right no-repeat; 
color: #FFF;
}

.toplink a:active 
{
float: right;
height:32px;
margin:0px;
padding:0px;
padding-top:8px;
padding-bottom:px;
padding-right:30px;
padding-left: 0px;
Background:#000000 url("design/up_button_hover.jpg") top right no-repeat; 
color: #FFF;
}



/* anchor attributes  ----------------------------------------------------------------------------------- */

a
{
    outline: 0;
    width: 100%;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
    text-decoration:none;
    font-weight: normal;
}
 
a:link {

    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
    font-weight: normal;
    text-decoration:none;
    color: #d0d0d0;
}

a:visited {
    width: 100%;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
    font-weight: normal;
    text-decoration:none;
    color: #d0d0d0;
 }

a:hover {
    width: 100%;
    font-weight: normal;
    text-decoration:none;
    color:#FFFFFF	;
    }

a:active {
    font-weight: normal;
    text-decoration:none;
    color:#FFFFFF;}




/* HEADLINE STYLING ***************************************************************************************************** */

/* ----------------------------------------------------------------------------------------------------------------------

HEADING 1

All kinds of crazy compatibility issues here margin above appears not to work in MISE 8 seems to 
be something to do with following floated and cleared div - adding float left seems to fix it

------------------------------------------------------------------------------------------------------------------------- */


h1 
{
  float:left;
  width:1024px;
  padding-top: 16px;
  padding-bottom: 6px;
  border-bottom:1px solid #424C55; 
  margin-top: 0px;
  margin-bottom: 16px;
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif;
  line-height: 100%
  font-size: 2em;
  font-weight: normal;
  color: #b0b0b0;
  letter-spacing:2px
}
        

h2 
{
  width:100%;
  padding-bottom: 6px;
  border-bottom:1px solid #424C55; 
  margin-top: 16px;
  margin-bottom: 16px;
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  color: #b0b0b0;
  letter-spacing:2px
}

h3 
{
  width:100%;
  padding-bottom: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
  font-family: Arial, Helvetica, SunSans-Regular, sans-serif;
  font-size: 1.2 em;
  font-weight: normal;
  color: #ffffff;
}

strong
{
  font-weight: normal;
  color: #fff;
}

address
{
  width:1024px;
  margin-top: 1em;
  padding-top: 1em;
  margin-bottom: 3em;
  border-top:1px solid #404040; 
 }

address:after
{
  content:"Kevin Green 2010 - 2011.";
}