/* -----------------------------------------------------------------
[Default Stylesheet]

Project:	    Travaganza
Since:	        2009-10-30
Last Modified:	2009-11-22

[TABLE OF CONTENTS]
1. Basic Elements
2. Wrapper
3. Header
    3.1 Logo
    3.2 Navigation
4. Content
    4.1 Posts
        4.1.1 Contact Form
    4.2 Sidebar
        4.2.1 Social Links
    4.3 Feature Project Sidebar
    4.4 Featured Project (Case Study)
    4.5 Portfolio
5. Footer

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



/* -------------------------------------------------------------- */
/* 1. Basic Elements
/* -------------------------------------------------------------- */

body {
    background-image: url(../images/background-pattern.gif);
}



/* -------------------------------------------------------------- */
/* 2. Wrapper
/* -------------------------------------------------------------- */

#wrapper_O {
	background: url(../images/header-gradient.gif) repeat-x 0 0;
}

#wrapper_I {
	width: 800px;
	margin: 0 auto;
}



/* -------------------------------------------------------------- */
/* 3. Header
/* -------------------------------------------------------------- */

#header_O {
    padding: 40px 0 0 0;
}

    /* -------------------------------------------------------------- */
    /* 3.1 Logo                                                       */

    #header_O #logo_O{
        /*float: left;*/
    }
    
    /* -------------------------------------------------------------- */
    /* 3.2 Navigation                                                 */
        
    #header_O #navigation_O {
        /*float: right;*/
        border-bottom: 1px solid #484848;
    }

    #header_O #navigation_O ul li{
        float: left;
        margin: 0 20px 0 0;
        width: 100px;
        height: 40px;
    }

    #header_O #navigation_O ul li a{
        text-decoration: none;
        font-weight:bold;
        font-size:1.4em;
        display:block;
        font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
        color: #666;

    }

    #header_O #navigation_O ul li a span.caption{
        font-size: 12px;
        font-weight: normal;
        font-style: italic;
        padding: 0 0 0 5px;
        display: none;
    }

    #header_O #navigation_O ul li a:hover, 
    #header_O #navigation_O ul li a:active {
        /*border-bottom:4px solid #F6A836;*/
        color: #999;
    }


    #header_O #navigation_O ul li a:hover span.caption {
        display: block;
    }

    
    
/* -------------------------------------------------------------- */
/* 4. Content
/* -------------------------------------------------------------- */

#content_O {
    margin: 20px 0 0 0;
}

    /* -------------------------------------------------------------- */
    /* 4.1 Posts                                                      */

    #content_O #posts_O {
        width: 470px;
        float: left;
        margin: 0 0 0 20px;
    }
    
    /*
    #content_O #posts_O h2 {
        text-transform: uppercase;
    }
    */

    #content_O #posts_O .post .content img.banner {
        border-top: solid 1px #444;
        border-bottom: solid 1px #444;
        padding: 10px 0;
    }
    
    #content_O #posts_O .post .content li {
        list-style-type: square;
    }
    
        
        /* -------------------------------------------------------------- */
        /* 4.1.1 Contact Form                                               */

        #content_O #posts_O .contact_form {
        }

        #content_O #posts_O .contact_form .error {
            margin: 0 0 0 110px;
            font-size: 12px;
            color: #AF0000;
            font-style: italic;
        }
        
        #content_O #posts_O .contact_form .row {
            margin: 10px 0 3px 0;
        }

        #content_O #posts_O .contact_form .row .label {
            float: left;
            width: 100px;
            text-align: right;
            margin: 0 10px 0 0;
        }

        #content_O #posts_O .contact_form .row .label label {
            color: #c3c3c3;
            font-weight: bold;
        }


        #content_O #posts_O .contact_form .row .value {
            float: left;
        }

        #content_O #posts_O .contact_form .row .value input.text,
        #content_O #posts_O .contact_form .row .value textarea {
            width: 330px;
            border: solid 1px #aaa;
            padding: 7px 7px;
            font-family: verdana;
            font-size:12px;    
            line-height: 16px;
            /* Do rounding (native in Safari, Firefox and Chrome) */
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
        }

        #content_O #posts_O .contact_form .row .value input.submit {
            border: solid 1px #aaa;
            padding: 3px 5px;
            font-weight: bold;
            /* Do rounding (native in Safari, Firefox and Chrome) */
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
        }

        #content_O #posts_O .contact_form .row .value input.submit:hover {
            background-color: #8F8F8F;
            border-color: #8F8F8F;
            cursor: pointer;
        }

    
        
    /* -------------------------------------------------------------- */
    /* 4.2 Sidebar                                                    */

    #content_O #sidebar_O {
        width: 270px;
        float: right;
        /*margin: 0 0 0 25px;*/
    }

    #content_O #sidebar_O .widget {
        padding: 10px;
        border: 2px solid #191919; /*#1f1f1f*/
        /*background-color: #2F2F2F;*/
        background: url(../images/widget-background.gif) repeat-x 0 0 #333;
        margin: 0 0 40px 0;
    }
    
    /***travo20091107: LIMITATION: cannot have ID selector to use CurvyCorner js */
    .widget {
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
    }
    
    #content_O #sidebar_O .widget h3{
        margin: 0 0 0 15px;
    }    
    
    
        /* -------------------------------------------------------------- */
        /* 4.2.1 Social Links Widget                                      */
        
        #content_O #sidebar_O .widget ul.social li{
            margin: 5px 0;
        }

        #content_O #sidebar_O .widget ul.social li a{
            padding: 0 0 0 28px;
            display: block;
            height: 20px;
            background-image: url(../images/social_icons.gif);
            background-repeat: no-repeat;
        }
        
        #content_O #sidebar_O .widget ul.social li a:hover{
            text-decoration: none;
        }        
    
        #content_O #sidebar_O .widget ul.social li.vcard a{ background-position: 0 0; }
        #content_O #sidebar_O .widget ul.social li.vcard a:hover{ background-position: 0 -20px; }
        #content_O #sidebar_O .widget ul.social li.linkedin a{ background-position: 0 -40px; }
        #content_O #sidebar_O .widget ul.social li.linkedin a:hover{ background-position: 0 -60px; }
        #content_O #sidebar_O .widget ul.social li.twitter a{ background-position: 0 -80px; }
        #content_O #sidebar_O .widget ul.social li.twitter a:hover{ background-position: 0 -100px; }
        #content_O #sidebar_O .widget ul.social li.stackoverflow a{ background-position: 0 -120px; }
        #content_O #sidebar_O .widget ul.social li.stackoverflow a:hover{ background-position: 0 -140px; }

        
        /* -------------------------------------------------------------- */
        /* 4.2.2 Testimonial Widget                                       */

        #content_O #sidebar_O .widget p.quote{
            font-style: italic;
        }      

        
    /* -------------------------------------------------------------- */
    /* 4.3 Feature Project Sidebar                                    */
    
    #content_O #sidebar_O .feature_project {
        margin: 0 0 40px 0;
    }
    
    #content_O #sidebar_O .feature_project h3{
        margin: 0 0 5px 15px;
    }
    
    #content_O #sidebar_O .feature_project h3.hover{
        color: #99D769;
    }
    
    
    /* -------------------------------------------------------------- */
    /* 4.4 Featured Project (Case Study)                              */
    
    #projects_O .project_header .caption .label{
        font-size: 16px;
        color: #AF8E78;
    }
    
    #projects_O .project_header .caption .value{
        font-size: 18px;
        color: #AF1531;
        margin: 3px 0 0 0;
    }
    
    #projects_O .project_header .services,
    #projects_O .project_header .technology {
        margin: 25px 0 0 0;
    }
    
    #projects_O .project_header .services .label,
    #projects_O .project_header .technology .label {
        color: #5F5F5F;
        font-size: 16px;
    }

    #projects_O .project_header .services .value,
    #projects_O .project_header .technology .value {
        color: #9BBFA0;
    }

    #projects_O .project_header .services .value ul,
    #projects_O .project_header .technology .value ul {
        margin: 3px 0 0 0;
    }

    #projects_O .project_header .services .value ul li,
    #projects_O .project_header .technology .value ul li {
        padding: 0 0 0 25px;
        margin: 0 0 0 20px;
        float: left;
    }
    
    #projects_O .project_header .services .value ul li {
        background: url(../images/tick.gif) 0 50% no-repeat;
    }    
    
    #projects_O .project_header .technology .value ul li {
        background: url(../images/tool.gif) 0 50% no-repeat;
    }    
    
    #projects_O .project  h2{
        margin: 10px 0 0 0;
    }
    
    #projects_O .project .teaser  {
        margin: 30px 0 0 0;
    }
    
    #projects_O .project .teaser .handle {
        height: 50px;
        background: url(../images/slide-handles.png) 0 0 repeat-x;
        padding: 0;
        cursor: pointer;
    }
    
    #projects_O .project .teaser .handle:focus {
        outline: none;
    }    
    
    #projects_O .project .teaser .handle.ui-state-active {
        height: 50px;
        background: url(../images/slide-handles.png) 0 -50px repeat-x;
        padding: 0;
    }
    
    #projects_O .project .teaser .slide {
        height: 350px;
    }
    
    #projects_O .project #teaser_1 {
        background: url(../images/viaalley-teaser-01.jpg) 0 0 no-repeat;
    }
    
    #projects_O .project #teaser_2 {
        background: url(../images/viaalley-teaser-02.jpg) 0 0 no-repeat;
    }
    
    #projects_O .project #teaser_3 {
        background: url(../images/viaalley-teaser-03.jpg) 0 0 no-repeat;
    }
    
    #projects_O .project  .back{
        margin: 20px 0 0 0;
        padding: 0 0 0 15px;
        background: url(../images/back.gif) 0 50% no-repeat;
    }
    
    
    /* -------------------------------------------------------------- */
    /* 4.5 Portfolio                                                  */
    
    #content_O .project_thumbnail {
        width: 320px;
        /*height: 120px;*/
        overflow: hidden;
        float: left;
        margin: 10px 15px;
        padding: 4px 20px;
        border: solid 1px #111111;
        background-color: #121212; /*1d1d1d*/
        /* Do rounding (native in Safari, Firefox and Chrome) */
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
    }
    
    #content_O .project_thumbnail.hover {
        background-color: #1d1d1d;
        border-color: #1d1d1d;
    }
    
    
    
/* -------------------------------------------------------------- */
/* 5. Footer
/* -------------------------------------------------------------- */

#footer_O {
    border: 1px solid #484848;
    margin: 20px 0 0 0;
    padding: 10px;
    font-size: 12px;
    background-color: #111;
}

#footer_O  .copyright{
    float: left;
}

#footer_O  .validator{
    float: right;
}



/* -------------------------------------------------------------- */
/* END OF FILE                                                    */