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

* Done by Wilfredstudios Sdn Bhd - www.wilfredstudios.com

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



/*@import "lightwindow.css";*/



/* Body & Structure */
body { 
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

img { border: 0px; }

.clr { clear: both; }




/* Text & Format */

h1 { font-size: 14px; font-weight: normal; color: #323232; line-height: 150%; }
h2 { font-size: 16px; color: #00529b; }
h3 { font-size: 12px; font-weight: bold; color: #00529b; line-height: 150%; }
h4 { font-size: 12px; font-weight: bold; color: #00529b; line-height: 150%; }
h5 { font-size: 12px; font-weight: normal; color: #323232; }
h6 { margin-top: 25px; font-size: 16px; color: #00529b; }
p { font-size: 12px; color: #323232; line-height: 140%; }
a { font-weight: normal; color: #00529b; }
a:hover { font-weight: normal; color: #323232; }
ol { ne-height: 150%; }
ul { list-style-image: url(../images/bullet_go.png); font-size: 12px; color: #323232; line-height: 140%; padding-left: 20px; margin: 0px; }
li { margin: 12px 0; }



/* Banner IE Fixes */

#navpanel {
    /* IE 5.0/Win and other lesser browsers will use this */
    position: absolute;
    right: 0px; 
    bottom: 0px;
    width:100%;

}
body > div#navpanel {
     /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
     position: fixed;
}

/* HOME PAGE */

#home {
    position: absolute;
    top: 0px;
    left: 0px;
    width : 100%;
    height : 100%;
}

/* ABOUT PAGE */

#aboutpage {
    background: transparent url('img/about-johnnietey.jpg') center 75px no-repeat;
}

#aboutcontainer {
    margin: none;
    padding: none;
    width: 100%;
    height: 750px;
    text-align: left;
}

#aboutnav {
    position:absolute;
    padding-left: 100px;
    top: 610px;
    width: 500px;
    text-align:left;
}

#aboutnav a {
    color : black;
    text-decoration : none;
    font-family: "Century Gothic";
    font-weight: bolder;
    font-size: 12pt;
}

#aboutnav a:hover {
    color : black;
    text-decoration : none;
    font-family: "Century Gothic";
    font-weight: bolder;
    font-size: 12pt;
}

/* WORKS PAGE */

.workheadersmall {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 9pt;
    padding-top: 13px;
    padding-left: 2px;
    text-decoration:none;
    color: black;
}

.workheadersmall:hover {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 9pt;
    padding-top: 13px;
    padding-left: 2px;
    text-decoration:none;
    color: black;
}

.worktitle {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 16pt;
    text-decoration:none;
    color: black;
}

.workheader {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 12pt;
    margin-top: 9px;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration:none;
    color: black;
}

.workheader:hover {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 12pt;
    margin-top: 9px;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration:none;
    color: black;
}

.workheaderhilite {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 12pt;
    margin-top: 9px;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration:none;
    color: white;
    background-color : red;
}

.workheaderhilite:hover {
    display:inline;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 12pt;
    margin-top: 9px;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration:none;
    color: white;
    background-color : red;
}

.workitem {
    display:inline;
    font-family: "Century Gothic";
    font-weight: normal;
    font-size: 7.5pt;
    color: #555555;
    background-color: transparent;
    padding: 0px 2px 0px 2px;
    text-decoration:none;
}

.workitem:hover {
    color: white;
    background-color: #ED1C24;
    text-decoration:none;
}

.workitemhilite {
    /* same as workitem:hover effect, needed for javascript onmouseover */
    display:inline;
    font-family: "Century Gothic";
    font-weight: normal;
    font-size: 7.5pt;
    color: white;
    background-color: #ED1C24;
    text-decoration:none;
    padding: 0px 2px 0px 2px;
}

.workitemhilite:hover {
    color: white;
    background-color: #ED1C24;
    text-decoration:none;
}

.thumbnails {
    margin-right: 10px;
    margin-bottom: 10px;
    width:65px;
    height:65px;
}

.worksimage {
    border: none;
    margin-bottom : 30px;
}


/* AWARDS AND CAPTIONS */

.contentaward {
    margin-top : 20px;
    margin-left : 0px;
    font-family : "Century Gothic";
    font-weight : bold;
    font-size : 12pt;
}

.contentparagraph {
    margin-top : 10px;
    font-family : "Century Gothic";
    font-weight : normal;
    font-size : 11pt;
}

.contenttitle {
    font-family : "Century Gothic";
    font-weight : bold;
    font-size : 12pt;
}

.contenttranslation {
    margin-top: -20px;
    margin-bottom: 20px;
    font-style : oblique;
    font-family : "Century Gothic";
    color : #333333;
    font-size : 11pt;
}

.contentcaption {
    font-style : oblique;
    font-family : "Century Gothic";
    color : #333333;
    font-size : 11pt;
}

.pinklink {
    color : #ff0000;
    text-decoration: none;
    font-weight: bold;
}

.pinklink:hover {
    color : #ffffff;
    background-color : #ff0000;
    text-decoration: none;
    font-weight: bold;
}