/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";

/* General */

.clear
{
    clear: both;
}

body
{
    background-color: #000;
    margin: 0;
    padding: 0;
    color: #fff;
}

#page
{
    margin: 0 auto;
    width: 960px;
}

/* HEADER
----------------------------------------------------------*/
#header
{
    padding-top: 20px;
    height: 55px;
    background-color: Transparent;
}

#title
{
    float: left;
}

#title h1
{
    margin-left: 2px;
}

#title h1 img
{
    display: block;
}

#menucontainer
{
    padding-top: 20px;
    float: right;
}

/* NAV MENU   
----------------------------------------------------------*/
ul.menu
{
    float: right;
    margin: 0 2px;
    text-align: right;
}

ul.menu li
{
    display: inline;
    list-style: none;
    border-right: solid 1px #fff;
    /*padding: 0 7px 0 3px;*/
}

ul.menu li.last
{
    border-right: none;
    padding-right: 0;
}

ul.menu li a, ul.menu li a:visited
{
    text-decoration: none;
    color: #fff;
    padding: 0 7px 0 3px;
    font-weight: normal;
}

ul.menu li.first a
{
    padding-left: 0;
}

ul.menu li.last a
{
    padding-right: 0;
}

ul.menu li a:active
{
    color: #0098d2;
}

ul.menu li a:hover
{
    color: #0098d2;
}

/* BODY 
----------------------------------------------------------*/
#main
{
    height: 432px;
    margin-bottom: 2px;
}

#main ul.portfolio
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#main ul.portfolio li
{
    float: left;
    border: solid 2px Transparent;
    width: 188px;
    height: 140px;
    overflow: hidden;
    position: relative;
}

#main ul.portfolio a
{
    width: 188px;
    height: 140px;    
    background-repeat: no-repeat;
    background-position: left bottom;
    display: block;
    position: absolute;
    top: 0;
}

#main ul.portfolio a:hover
{
    text-decoration: none;
    background-position: left top;
}

#main ul.portfolio li div
{
    position: relative;
    background-color: #666;
    font-size: 1.2em;
    padding: 3px 0 3px 5px;
    height: 20px;
    filter: alpha (opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    z-index: 10;
    margin-right: 4px;
}

#main ul.portfolio img
{
    display: block;
}

#main p, #fancy_content p
{
    color: #fff;
}

#main h2
{
    padding-top: 30px;
    padding-bottom: 20px;
}

#main strong, #fancy_content strong, #main b, #fancy_content b
{
    font-weight: normal;
    color: #ea6134;
}

#main a, #fancy_content a
{
    color: #0098d2;
    font-weight: normal;
}

#main a:hover, #fancy_content a:hover
{
    text-decoration: underline;
}

#main div.column100, #fancy_content div.column100
{
    float: left;
    width: 590px;
    padding: 10px;
    color: #fff;
}

#main div.column50, #fancy_content div.column50
{
    float: left;
    width: 285px;
    padding: 10px;
}

#main div.screenshot, #fancy_content div.screenshot
{
    float: left;
    width: 400px;
    padding: 10px;
}

#main div.columnX, #fancy_content div.columnX
{
    float: left;
    width: 330px;
    padding: 10px;
}

#main div.callstoaction, #fancy_content div.callstoaction
{
    float: left;
    width: 145px;
    margin-left: 10px;
}


/* SERVICES 
----------------------------------------------------------*/
#services 
{
        position: relative;
        height: 74px;
}

#services ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;

}

#services ul li
{
    float: left;
    position: relative;
    border-left: solid 2px #000;
    border-right: solid 2px #000;
    width: 188px;
    height: 60px;
}

#services ul li h2
{
    margin: 0;
    padding: 0;
}

#services ul li a
{
    display: block;
    width: 173px;
    height: 40px;
    padding: 20px 0 0 15px;    
}

#services ul li a img
{
    display: block;
}

#services ul li div.popup
{
    position: absolute;
    border-top: solid 2px #000;
    width: 158px;
    height: 382px;
    bottom: 60px;
    overflow: hidden;
    display: none;
    padding: 25px 15px;
    color: #fff;
    z-index: 50;
}

#services ul li div.popup span
{ 
    display: block;
    padding-left: 1.5em;
    background-image: url(/Content/Images/bullet-circle.gif);
    background-repeat: no-repeat;
    background-position: 4px 6px
}


#services ul li.service1
{
    background-color: #0094cd;
    background-image: url(/Content/Images/bg-service1.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#services ul li.service1 div.popup
{   
    background-color: #0094cd;
    background-image: url(/Content/Images/bg-service1.jpg);
    background-repeat: no-repeat;
}

#services ul li.service2
{
    background-color: #c04e29;
    background-image: url(/Content/Images/bg-service2.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#services ul li.service2 div.popup
{
    background-color: #c04e29;
    background-image: url(/Content/Images/bg-service2.jpg);
    background-repeat: no-repeat;
}

#services ul li.service3
{
    background-color: #96db33;
    background-image: url(/Content/Images/bg-service3.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#services ul li.service3 div.popup
{
    background-color: #96db33;
    background-image: url(/Content/Images/bg-service3.jpg);
    background-repeat: no-repeat;
}

#services ul li.service4
{
    background-color: #f0bf06;
    background-image: url(/Content/Images/bg-service4.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}


#services ul li.service4 div.popup
{
    background-color: #f0bf06;
    background-image: url(/Content/Images/bg-service4.jpg);
    background-repeat: no-repeat;
}

#services ul li.service5
{
    background-color: #e00084;
    background-image: url(/Content/Images/bg-service5.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#services ul li.service5 div.popup
{
    background-color: #e00084;
    background-image: url(/Content/Images/bg-service5.jpg);
    background-repeat: no-repeat;
}

/* FOOTER 
----------------------------------------------------------*/
#footer
{
    background-image: url(/Content/Images/bg-footer.jpg);
    background-repeat: no-repeat;
    height: 145px;
}

#footer ul.menu
{
    margin: 20px 0 0 4px;
    float: left;
}

#footer div.copyright
{
    margin: 20px 4px 0 0;
    float: right;
    color: #aaa;
}