/* HTML ELEMENTS
 ***********************************************/

body {
    background: url("/themes/mrlion/images/brown_bar.jpg") repeat-y left;
    color: #004A83;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

img {
    border: 0;
}

a {
    color: #CA061D;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

dl {
    width: 33em;
}

dt {
    font-size: 1.2em;
}

dd {
    margin: 0;
    margin-bottom: 20px;
}

cite {
    font-size: 1.2em;
    color: #CA061D;
    font-style: normal;
    font-weight: bold;
}

strong {
    color: #CA061D;
}

h2 {
    font-size: 1.2em;
    font-weight: normal;
}

/* IE fix */
* html h2 {margin: 0;}


/* DOCUMENT DIVISIONS
 ***********************************************/

#header {
    background: #7bbbd6 url("/themes/mrlion/images/header_bg_colour.jpg");
    height: 128px;
}

#header img {
    margin: 20px 0 0 20px;
}

#content {
    background: url("/themes/mrlion/images/shade_white.jpg") repeat-x top;
    padding: 20px;
    padding-left: 200px;
}

* html #content {
    padding-top: 40px;
}

#content p {
    width: 33em;
    margin: 0;
    margin-top: 12px;
}

#copyright {
    position: absolute;
    top: 420px;
    color: #7F4825;
    width: 153px;
    text-align: center;
    font-weight: bold;
}


/* MAIN MENU
**************************************************/

#menu {
    background: url("/themes/mrlion/images/shade_brown.jpg") no-repeat;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    position: absolute;
    top: 128px;
    width: 160px;
    _padding-top: 30px;
}

#menu li {
    display: inline;
    margin: 0;
    padding: 0;
    height: 40px;
}
    
#menu li a {
    background-position: -135px top;
    background-repeat: no-repeat;
    display: block;
    height: 40px;
    line-height: 92px;
    margin: 13px;
    overflow: hidden;
    width: 132px;
}

#menu li a:hover {
    background-position: -270px top;
}

#home #menu_home a,
#portfolio_page #menu_portfolio a,
#contact #menu_contact a,
#links #menu_links a,
#credits #menu_credits a  {
    background-position: left top;
}

#home #menu_home a:hover,
#portfolio_page #menu_portfolio a:hover,
#contact #menu_contact a:hover,
#links #menu_links a:hover,
#credits #menu_credits a:hover  {
    background-position: left top;
}

/* menu item styles */

li#menu_home a {
    background-image: url("/themes/mrlion/images/button_home.jpg");
}

li#menu_portfolio a {
    background-image: url("/themes/mrlion/images/button_portfolio.jpg");
}

li#menu_contact a {
    background-image: url("/themes/mrlion/images/button_contact.jpg");
}

li#menu_links a {
    background-image: url("/themes/mrlion/images/button_links.jpg");
}

li#menu_credits a {
    background-image: url("/themes/mrlion/images/button_credits.jpg");
}


/* HOME PAGE STYLES 
**************************************************/

.extra {
    left: 53em;
    position: absolute;
    top: 190px;
}

#gallery_latest img {
    display: block;
    margin-bottom: 30px;
}


/* CONTACT PAGE STYLES 
**************************************************/

#contact_details {
    margin-top: 20px;
}

#contact_details {
    font-size: 1.2em;
    padding: 10px 10px 10px 0;
}

#contact_details label {
    color: #8DA5C5;
    font-weight: bold;
    margin-right: 10px;
}


/* PORTFOLIO PAGE STYLES 
************************************************/

#portfolio {
    clear: both;
    list-style: none;
    margin-top: 60px;
    padding: 0;
    width: 610px;
}

ul#portfolio {
    margin-left: -20px;
    width: 650px;
}

ul#portfolio li {
    float: left;
    display: inline;
    margin: 5px 20px;
    width: 176px;
}

ul#portfolio h3 {
    margin: 0;
    font-size: 1.2em;
}

ul#portfolio a {
    color: #004A83;
}

ul#portfolio a:hover {
    color: #CA061D;
    text-decoration: none;
}

ul#portfolio_navigation {
    height: 24px;
    left: 200px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 167px;
    width: 610px;
}

ul#portfolio_navigation li {
    display: inline;
    margin: 0;
    padding: 0;
    height: 39px;
}
    
ul#portfolio_navigation li {
    background-image: url("/themes/mrlion/images/portfolio_navigation.jpg");
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 40px;
    margin: 0 9px 10px 0;
    overflow: hidden;
    width: 54px;
}

ul#portfolio_navigation li a {
    background-image: url("/themes/mrlion/images/portfolio_navigation.jpg");
    background-repeat: no-repeat;
    display: block;
    line-height: 92px;
    height: 40px;
}

div#portfolio h3, div#portfolio p {
    margin: 0;
    pading: 0;
}

div#portfolio {
    margin-top: 70px;
}

div#portfolio p {
    color: #D99856;
}


/* PORTFOLIO NAVIGATION STYLES
 ***********************************************/

ul#portfolio_navigation {
    background-position: 0 0;
}


ul#portfolio_navigation .previous a {
    background-position: 0 -80px;
}
 
ul#portfolio_navigation .previous a:hover {
    background-position: 0 -40px;
}

ul#portfolio_navigation .thumbnails {
    background-position: -54px 0;
}

ul#portfolio_navigation .thumbnails a {
    background-position: -54px -80px;
}

ul#portfolio_navigation .thumbnails a:hover {
    background-position: -54px -40px;
}

ul#portfolio_navigation .next {
    background-position: -108px 0;
}

ul#portfolio_navigation .next a {
    background-position: -108px -80px;
}

ul#portfolio_navigation .next a:hover {
    background-position: -108px -40px;
}