@charset "utf-8";
/*
==============================================
* Filename: styles.css
* Version: 1.0.0 (2008-05-26) YYYY-MM-DD
* Website: http://www.nicolamagdalinis.co.uk/
* Author: Umut Ahmet
* Description: Main site styles.

============================================== 
== STRUCTURE: ================================
* Page width: 900 px
* Number of columns: 3

==============================================
== INDEX: ====================================
_colours
_defaults
_globals

_wrapper : Outer Wrapper
_header : Site Header
_container : Inner Wrapper
_content : Site Content
_footer : Site Footer

==============================================
== _colours: =================================

* Off Black - #212121
* Silver - #DADADA
* Off White - #F9F9F9
* Light Grey - #F5F5F5
* Orange - #FF920A

============================================== 
== _defaults: ==============================*/

html { 
    margin: 0; 
    padding: 0;
    }
    body {
        /*font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family; */
        font: normal 12px/1.8 Helvetica, Verdana, Arial, Tahoma;
        color: #212121; 
        margin: 0; 
        padding: 0; 
        text-align: center; 
        background: white;
        }
        h1, h2, h3, h4 {
            margin: 0 0 20px 0; 
            padding: 0;
            font: normal 10px "Trebuchet MS", Verdana, Arial, Tahoma;
            }
            h1 {font-size: 40px; width: 563px; float: left;}
            h2 {font-size: 30px; }
            h3 {font-size: 14px; font-weight: bold; }
            
            h1 span, h2 span {
                font-size: 16px;
            }
            h2 span {
                margin-left: 10px;
                padding-left: 10px;
                border-left: 1px solid #DADADA;
            }
        a { 
            color: #212121; 
            text-decoration: underline;
            }
            a:hover {
                text-decoration: none; 
            }        
        a.on { 
            color: #FF920A;
            font-weight: bold; 
            text-decoration: none;
            }
            a.on:hover {
                color: #212121; 
            }

        p { 
            padding: 0; 
        }
        ul {
            padding: 0;
            margin: 0 0 0 7px;
            list-style: none;
            font-size: 11px;
            }
            li {
                margin-bottom: 7px;
            }


/*
============================================
== _globals: ===============================
*/ 
.inner { 
    padding: 10px;
}
.clear { 
    display: block; 
    clear: both;
}
.wrap {
    margin-bottom: 2em;
}
.sml { 
    font-size: 11px;
}
.grey {
    color: #DADADA;
}
.bt { 
    padding-top: .5em; margin-top: .5em; border-top: 1px solid #DADADA; 
}
.bb { 
    padding-bottom: .5em; margin-bottom: .5em; border-bottom: 1px solid #DADADA; 
}

/*
==========================================
== _wrapper: =============================
*/

.wrapper {
    text-align: left;
    width: 800px;
    margin: 0 auto;
    }

/*
==========================================
== _header: ==============================
*/
#header {
    height: 155px;
    text-align: left;
    background: url(../images/header-bg.png) repeat-x top;
    }
    #header-inner {
        padding-top: 50px;
        }
        #head {
            float: left;
            width: 490px;
        }
    #nav {
        width: 300px;
        float: right;
        margin-top: 25px;
        }
        #nav ul {
            padding: 0;
            list-style: none;
            }
            #nav ul li {
                display: inline;
                margin-left: 15px;
            }
                
/*
==========================================
== _container: ===========================
*/

#container {
    color: #212326;
    text-align: left;
    padding: 0;
    margin: 2em 0;
    }
    #alpha {
        width: 114px;
        float: left;
    }
    #beta {
        width: 686px;
        float: right;
        }
        .main {
            margin-top: 50px;
        }
        #show_background, #show_contact {
            margin-bottom: 40px;
            border-bottom: 1px solid #DADADA;
        }
    .works {
        margin-bottom: 40px;
        /* border-bottom: 1px solid #DADADA; */
        }
        .works-detail {
            float: left;
            width: 180px;
            font-size: 11px;
            }
            .works-detail h3 a {
                font: normal 11px/1.7 "lucida grande",tahoma,verdana,arial,sans-serif;
            }

        .works-image {
            float: right;
            }
            .works-image img {
                width: 500px;
                border: 1px solid #DADADA;
                }    
                .works-image img:hover {
                    border: 1px solid #FF920A;
                }

/*
==========================================
== _content: =============================
*/

#content {
    padding: 40px 0;
    }
    
/*
==========================================
== _footer: ==============================
*/

#footer {
    padding-top: 40px;
    clear: both;
    }