/*  
Name: charles kevin template
Author: ckevin
Date: 15/01/2007
*/

/***Misc Tags***/

* {
 margin: 0px;
 padding: 0px;
}

body {
 background: #000000 url(images/headergrunge.jpg) repeat-x;
 font-family: Century Gothic;
 font-size: 20px;
 padding-left:5px;
 color: #fff;}
 
a img{ border: 0px; margin: 0px; padding: 0px;}

a { text-decoration: none;}

#main_menu .aactive {
	background-color:#3F4A3E;
	background-image: url("images/backgrounds/link.jpg");
}

input {
 background: #333;
 font-family: Monotype.com;
 font-size: 0.7em;
 padding: 3px;
 color: #f4f4f4;
 border: 2px solid #555;}
	
button {
 background: #222;
 font-family: Monotype.com;
 font-size: 0.7em;
 padding: 2px;
 color: #f4f4f4;
 border: 2px solid #444;
 height: 2em;} 


/**** Span class's *****/

.hidden { text-indent: -9000px;}
.br { clear: both;}
.egg { color: #FFFFCC;}
.small { font-size: x-small;}
.large { font-size: xx-large;}
.right { float: right;}
.left { float: left;}
.center { margin: 0 auto; text-align: center;}
.headshot {border-left:3px solid #000000;border-right:3px solid #000000;border-bottom:3px solid #000000;margin-top: 25px;float: left;margin-left: 54px}




/**** Site Container ****/

#container { width: 1000px;}


/***Header***/
 
#logo { float: left;}

#logo h1 { 
 margin-top: 100px;
 margin-left: 175px;
 font-size: 1em;
 letter-spacing: .2em;}

#logo h2 { 
 margin-top: 5px;
 margin-left: 175px;
 font-size: .8em;
 letter-spacing: 0.1em;
 padding-bottom:5px;
 border-bottom:2px solid #9999cc;}

#search {
 margin-top: 60px;
 float: right;}
 
#search button { margin-left: 5px; padding: 0 2px 2px 2px;}

/***left Side Bar***/

#navlist { float: left; width: 150px; margin-top: 10px; margin-left: 5px;}

 
#navlist ul {
 list-style: none;
}

#navlist li a{
 display: block;
 height: 20px;
 width: 130px; 
 padding: 7px;
 margin: 5px;
 background: inherit;
 border-right: 4px solid #9999cc;
font-weight: ;
 color: #9999cc;
 text-transform: lowercase;
 font-size: 0.7em;letter-spacing: 0.1em;}
 
#navlist li a:hover {
 color: #CC33FF;
 background: #333;
 border-right: 4px solid #ff3333;font-weight: bold;}
 
#navlist li b{
 display: block;
 height: 80px;
 width: 130px; 
 padding: 7px;
 margin: 5px;
 background: inherit;
 border-right: 4px solid #9999cc;
 color: #9999cc;
 text-transform: lowercase;
 font-size: 0.6em;letter-spacing: 0.1em;}
 
#navlist li b:hover {
 color: #CC33FF;
 background: #333;
 border-right: 4px solid #ff3333;font-weight: bold;}

#navlist li .active {
 color: #CC33FF;
 background: #333;
 border-right: 4px solid #444; font-weight: bold;}

#notes { float: left; width: 100px; margin-top: 30px; margin-left: 5px; margin-bottom: 10px;
font-size: .6em; letter-spacing: -0.1em;}


/***article***/

#article { float: left; width: 180px; margin-top: 34px; margin-left: 20px; }

#article a { color:#6699CC; font-weight: bold;}

#article a:hover { 
 color: #000000; 
 background: #ff6600; 
 font-weight: bold;}

#article p {line-height: 1.3em; font-size: 0.6em; margin-bottom: 20px; color: #f4f4f4;}

#article h3 {
color: #FFFFCC;
font-size: .8em;
letter-spacing: 0.1em;
margin-bottom: 10px;
}

#article h4 {
color: #FFFF99;
font-size: 0.6em;
letter-spacing: 0.1em;
margin-bottom: 4px;
}


/***Content***/

#content { float: left; width: 600px; margin-top: 34px; margin-left: 30px; }

#content a { color:#ff3333; font-weight: bold;}

#content a:hover { 
 color: #000000; 
 background: #ff6600; 
 font-weight: bold;}
 
#content p {line-height: 1.4em; font-size: 0.65em; margin-bottom: 20px; color: #f4f4f4;}

#content blockquote { color: #ff6600; font-size: 0.8em; font-style: italic; font-weight: bold; text-align: left; width: 600px; margin-top: 20px; margin-bottom: 5px;}

#content h3 {
text-indent: 5px;
color: #FFFFCC;
font-size: .8em;
letter-spacing: 0.1em;
margin-bottom: 10px;
}

#content h4 {
color: #FFFF99;
font-size: 0.6em;
letter-spacing: 0.1em;
margin-bottom: 4px;
}

/***Blog***/

#Blog { float: left; width: 600px; margin-top: 13px; margin-left: 30px; }

#Blog a { color:#ff3333; font-weight: bold;}

#Blog a:hover { 
 color: #000000; 
 background: #ff6600; 
 font-weight: bold;}
 
#Blog p {line-height: 1.2em; font-size: 0.5em; margin-bottom: 20px; color: #f4f4f4;}

#Blog h3 {
text-indent: 5px;
color: #999;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
 
/***description***/

#description { float: left; width: 800px; margin-top: 35px; margin-left: 20px;}

a img{ border: 0px; margin: 0px; padding: 00px;}

#description a { color:#ff3333; font-weight: bold}

#description a:hover { 
 color: #000000; 
 background: #ff6600; 
 font-weight: bold;}

#description p {line-height: 1.3em; font-size: 0.6em; margin-bottom: 10px; color: #f4f4f4;}

#description h3 {
color: #FFFFCC; 
font-size: .8em;
margin-bottom: 5px;
font-weight: bold;
}

#description blockquote { color: #ff6600; font-size: 0.8em; font-style: italic; font-weight: bold; text-align: left; width: 800px; margin-top: 20px; margin-bottom: 5px;}

/***descriptionimg***/

#descriptionimg { float: left; width: 800px; margin-top: 0px; margin-left: 45px;}

a img{ border: 0px; margin: 0px; padding: 0px;}

#descriptionimg a { 
color:#FFFFCC; 
line-height: 1.1em; 
font-size: .6em; 
margin-bottom: 10px; 
font-weight: }

#descriptionimg a:hover { 
font-weight: bold;}

#descriptionimg p {line-height: 1em; font-size: 0.6em; margin-bottom: 10px; color: #FFFFCC;}

#descriptionimg h3 {
color: #FFFFCC; 
font-size: .6em;
line-height: 1em;
margin-bottom: 5px;
font-weight: bold;
}

#middlecontent {
padding-top: 0em;
padding-bottom: 0em;
text-align: left;
width:100%;
}

/***picturelist***/

#picturelist {
width:800px;
margin-top:10px;
margin-bottom:10px;
text-align:left;
margin-right:auto;
margin-left:auto;
}

#picturelist li {
list-style:none;
float:left;
margin-right:10px;
margin-bottom:10px;
color:#777777;
}

#picturelist img{
display:block;
}

#picturelist img:hover{
border:0px solid #FFFFCC;
}

#picturelist a{
color:#777777;
text-decoration:none;
}

#picturelist a:hover{
color:#FFFFCC;
}

/***paginglist***/

#paginglist {
height:30px;
list-style:none;
}

#paginglist li {
display:inline;
}

#paginglist li a {
font-size: 0.8em;
font-weight:bold;
color: #D00073;
text-decoration:none;
}

#paginglist li a:hover{
border-bottom:5px solid #D00073;
}


/***thumbnailcontainersize***/

#photocontainer {
    position:relative; 
    width:150px; 
    height:200px; 
    margin:0px 
    background:##000000 ;
    } 

/* Removing the list bullets and indentation */
#photocontainer ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    } 

/* Remove the images and text from sight */
#photocontainer a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:0px; 
    left:5px; 
color: #FFFFCC; 
font-size: .6em;
line-height: 1.3em;
font-weight: bold;

    overflow:hidden; 
    background:#330000;
    }

/* thumbnail block */
#photocontainer a.gallery, #photocontainer a.gallery:visited {
    display:block; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 1px 1px 1px; 
    text-align:left; 
    cursor:default;
    }
/* change the thumbnail border color */
#photocontainer a.gallery:hover {
    border:1px solid #777777; 
    }
/* styling the :hover span */
#photocontainer a.gallery:hover span {
    position:absolute; 
    width:600px; 
    height:500px; 
    top:0px; 
    left:170px; 
    color:#777777; 
    background:#000000;
    }
#photocontainer a.gallery:hover img {
    border:1px solid #777; 
    float:left; 
    margin-right:0px;
    }
#photocontainer a.slidea {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slideb {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidec {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slided {
    background:url(images/sunset.jpg); 
   height:30px; 
    width:30px;
    }
* html #photocontainer a.slided {
    height:30px; 
    width:30px;
    }
#photocontainer a.slidee {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidef {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
* html #photocontainer a.slidef {
    height:30px; 
    width:30px;
    }
#photocontainer a.slideg {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slideh {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidei {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidej {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidek {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
* html #photocontainer a.slidek {
    height:30px; 
    width:30px;
    }


#photocontainer a.slidel {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidem {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.sliden {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slideo {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidep {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slideq {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }

#photocontainer a.slider {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slides {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidet {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slideu {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidev {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }
#photocontainer a.slidew {
    background:url(images/sunset.jpg); 
    height:30px; 
    width:30px;
    }

/* set the size of the unordered list to neatly house the thumbnails */
#photocontainer ul {
    width:120px; 
    height:400px;
    margin:0px; 
    
    }
#photocontainer li {
    float:left;
margin-left: 20px;
    }
#photocontainer a.slideb:hover img, #photocontainer a.slidei:hover img {
    float:left;
    }



/***Footer***/

#footer {
 text-align: .left;
 color: #666;
 margin-top: 30px;
 margin-left: 10px;
 margin-bottom: 10px;
 font-size: 0.45em;
 }
 
#footer p { color: #666;}
 
#footer a { color: #666;}
 
#footer a:hover { color: #f4f4f4;}