@charset "utf-8";
/*
   layout by: DesignDivine.eu

    Probably this really isn't semantically correct etc,
    but atm we don't care as long as it does the right job, 
    and surprisingly validates at w3c.org :)
    feel free to look & learn ;-)
 */


/* BEGIN CSS RESET
    css reset is basically the best way to control
    look and feel of your site, so just use it goddammit.
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup, if you wanna use tables that is */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* END CSS RESET */

/* BEGIN divine.css 
    now let's play with the styles ;)
*/

body {
    background:#101010; 
    font-family:"Lucida Grande", "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size:14px;
    line-height:1.5em;
}

/* some basic classes */
.allwidth {
    width:980px;
}
.fullwidth {
    width:100%;
}
.centered {
    margin:0 auto;
}
.clear {
clear:both;
}
.wpx540 {
width:537px;
}
.wpx820 {
width:820px;
}
.wpx880 {
    width:880px;
}
.wpx900 {
    width:900px;
}
.wpx980 {
    width:980px;
}
.wpx1000 {
    width:1000px;
}
.banner-shade {
    width:820px;
    padding:30px 20px;
    background: url('/media/desdiv/banner-shade.png?11b1644c360f') no-repeat center;
}
.hpx200 {
height:140px;
}
.hpx96 {
    height:96px;
}
.hpx110 {
    height:110px;
}
.border-rt {
    border-right:1px solid #999;
    }

a.crumb-link {
    color:#aaa;
    text-decoration:none;
    display:inline-block;
    height:13px;
    line-height:14px;
    padding:2px 5px;
    border-right:1px solid #aaa;
    background:url('/media/desdiv/header-transparent-bg.png?11b1644c360f') repeat;
}
a.crumb-link:hover {
    color:#ccc;
    border-right:1px solid #bbb;
    background:#000;
}
ul#breadcrumbs {
    height:20px;
}
li.crumb-link-first {
    border-right:none;
}
li.breadcrumb {
    display:inline-block;
    float:left;
    font-size:12px;
    font-weight:bold;
    
}
#header {
    background:#eb1202 url('/media/desdiv/top-bg.jpg?11b1644c360f') repeat-x top center;
    height:106px;
    position:relative;
    width:100%;
    overflow:hidden;
    clear:both;
    border-bottom:1px solid #100;
    }
    #header .transparent-bg {
        background:url('/media/desdiv/header-transparent-bg.png?11b1644c360f') repeat-x 0px 20px;
        height:143px;
    }
    #header-container {}
    #logo {
        float:right;
        width:363px;
        position:relative;
       
    }
        a#logo-link{
            /*margin-left:47px;*/
            margin-top:4px;
            height:99px;
            display:block;
            width:231px;
        }
    #interactive {
        float:right;
        width:617px;
    }
        #login {
            color:#fafafa;
            font-size:0.7em;
            text-align:right;
            height:20px;
            line-height:20px;
        }
            #header-menu{
                margin-top:26px;
                overflow:hidden;
                width:617px;
                height:58px;
            }
            #header-menu li{
                color:#f0f0f0;
                font-size:12px;
                font-variant:small-caps;
                float:left;
                text-align:right;
                /*border-right:1px solid #fafafa;*/
                height:64px;
                padding: 0px 18px 0 18px;
            }
                #header-menu a {
                    height:16px;
                    display:block;
                }
                #header-menu  blockquote {
                    line-height:16px;
                    font-weight:bold;
                    display:block;
                    padding-top:3px;
                    color:#d9d9d9;
                }

            #mkey1{
                width:116px;
                position:relative;
            }
            
            #mkey2{
                width:116px;
                position:relative;
            }
            
            #mkey3{
                width:108px;
                position:relative;
            }
            
            #mkey4{
                width:125px;
                position:relative;
                
            }
    #lang {color:#fff; background:#1b1b1b; height:20px; padding:6px 0; border-bottom:1px solid #000;}
    .lang-bg { background:url('/media/desdiv/header-transparent-bg.png?11b1644c360f') repeat-x;}
     div.flags {text-align:right;}
     div.flags img {
        margin-left:8px;
     }
#expose-projects {
    height:490px;
    background:#000;
    margin:0;
}
#expproj-container .pane { display:none; padding:0px; width:980px; height:490px; background:#202020;}
#expproj-container .expose-thumbnail { float:right; width:980px; }
#expproj-container .expose-thumbnail img {margin:0 auto;}
#expproj-container .expose-shade { background:transparent url('/media/desdiv/pane-shade.png?11b1644c360f'); width:980px; height:490px; position:absolute; z-index:9;}
#expproj-container .expose-text {float:left; padding:10px 20px; width:940px; height:44px; background:url('/media/desdiv/header-transparent-bg.png?11b1644c360f'); position: absolute; z-index:10;}
#main {
    background:#202020 url('/media/desdiv/main-bg.jpg?11b1644c360f') no-repeat top center;
    min-height:200px;
    padding-bottom:20px;
    }
    #main-pathway {
        height:21px;
    	}
	#main-pathway-content {
	    padding:21px 10px;
	}
    #main-banner { 
        background:url('/media/desdiv/main-banner.png?11b1644c360f') no-repeat bottom center;
        height:240px;
        width:820px;
        margin:0 auto;
        }
        .banner-graphic {
            width:526px; height:100%;
            float:left;
            }
        .banner-content {
            width: 266px;
            height:220px;
            margin-left:514px;
            padding: 10px 10px 10px 30px;
            background:transparent url('/media/desdiv/banner_right.png?11b1644c360f');
            position:absolute;
            z-index:10;
            color:#d9d9d9;
            line-height:1.3em;
        }
        #banner-transition > div { display:none;}
        #banner-navigation {
            position:absolute;
            z-index:20;
            width:72px;
            height:30px;
            margin-top:-30px;
            margin-left:744px;
        }
        #banner-navigation a { display:block; text-decoration:none; width:10px; height:10px; border:1px solid #555;  margin:6px;float:left; clear:none; }
        #banner-navigation a:hover {background: #444;}
        #banner-navigation a span { display:block; text-decoration:none; width:10px; height:10px;}
        a.activeSlide span#slide0 { background: #D90000; }
        a.activeSlide span#slide1 { background: #D2A13D; }
        a.activeSlide span#slide2 { background: #BAF000; }
            .banner-content img.icon {
            float:right;
            margin-left:10px;
            width:48px;
            height:48px;
            }
                .banner-content h2 {
                    font-size:1.2em;
                    font-weight:bold;
                    text-align:right;
                }
                .banner-content p {
                    text-align:justify;
                    padding:10px 0;
                    line-height:1.5em;
                    clear:both;
                }
            #main-banner .content .contact {
                margin:73px 20px 20px;
                height:64px;
            }
            #main-banner a {
                color:#eee;
                }
    
    #main-container {
        color:#ccc;
        }
        #main-container div ul {
            padding:0px 30px;
            border-left:1px solid #ddd;
        }
            #main-container div ul li {
                list-style:square;
                padding:0.25em;
            }
        #main-container .heading {
            padding:5px 10px 6px 10px;
            color:#ddd;
        }
            #main-container h1 {
                font-size:33px;
                line-height:42px;
            }
            #main-container h2 {
                font-size:28px;
                line-height:1.5em;
            }
            #main-container h3 {
                font-size:21px;
                line-height:30px;
            }
            #main-container h4 {
                font-size:18px;
            }
        #main-container .subheading {
            padding:0 10px;
            font-size:1.3em;
        }
        div.filed-under a{
            text-decoration:none;
            color:#E27C66 !important;
            text-shadow: 3px 3px 3px #000;
        }
        div.filed-under a:hover {
            color:#F5D3CC !important;
        }
        div.filed-under {
            padding-left:46px;
            background:transparent url('/media/desdiv/interface/nfolder.png?11b1644c360f') no-repeat top left;
            line-height:38px;
            height:40px;
            font-size:18px;
        }
        div.for-client {
            padding-left:46px;
            background:transparent url('/media/desdiv/people.png?11b1644c360f') no-repeat top left;
            line-height:38px;
            height:38px;
            font-size:18px;
            margin-top:5px; 
        }
        div.for-client a{
            color:#73BBE6 !important;
            text-decoration:none;
            text-shadow: 3px 3px 3px #000;
        }
        div.for-client a:hover{
            color:#D0E8F7 !important;
        }
        div.technologies {
            padding-left:46px;
            background:#222 url('/media/desdiv/interface/ngears.png?11b1644c360f') no-repeat top left;
            margin-top:5px;
            clear:both;
            line-height:38px;
            min-height:38px;
        }
        div.technologies a{
            text-decoration:none;
            color:#BBE773 !important;
            font-size:14px;
            letter-spacing:2px;
            height:18px;
            line-height:18px;
            padding:5px 7px;
            text-transform: lowercase;
            display:inline-block;
            margin:0px 6px 0px 0;
            background:url('/media/desdiv/interface/trans.png?11b1644c360f') repeat-x;
            }
            div.technologies a:hover {
                color:#E8F7D0 !important;
            }
        #main-container .short-description {
                margin:21px 0 0;
            }
            #main-container .short-description h2 {
                font-size:1.5em;
                line-height:1.5em;
                text-indent:42px;
            }
        #main-container div p {
            margin:0 0 16px 0;
            text-indent:42px;
            text-align:justify;
        }
       div.project-container,
       div.client-container{
            
            margin:0 0 20px 0;
            padding-bottom:5px;
            display:inline-block;
            
        }
        div.project-container a{
            text-decoration:none;
            color:#EB1202;
        }
        div.project-container-info {
            width:700px;
            padding:0;
            margin:0;
            float:left;
            margin-left:40px;
        }
        div.project-container-info > div {
            padding-right:10px;
        }
        div.project-container-header{
            font-size:21px;
            color:#fff !important;
            width:660px;
            margin-left:40px;
            padding:0 20px;
            float:left;
            line-height:33px !important;
            background:url('/media/desdiv/interface/trans.png?11b1644c360f') repeat scroll 0 0 transparent;
        }
        div.project-container-foobar {
            background: #191919;
            height:38px;
            overflow:hidden;
            white-space:nowrap;
            width:100%;
        }
        div.project-container-header a{
            color:#fff;
            line-height:38px;
        }
        #main-container .project-container .thumbnail-single,
        #main-container .project-container .thumbnail div,
        #main-container .client-container .thumbnail div{
            width:230px;
            height:144px;
            float:left;
            padding:5px;
            background:url('/media/desdiv/header-transparent-bg.png?11b1644c360f') repeat;
        }
        #main-container .client-container .thumbnail,
        #main-container .project-container .thumbnail         {
            float:left;
            padding:10px 15px;
            border-top:1px solid #000;
            border-bottom:1px solid #000;
            background:#1a1a1a;
            width:790px;
        }
        #main-container .client-container .howmany {
            display:block;
            float:right;
            border:1px solid #ddd;
            padding:10px 5px;
            margin:5px;
            color:#ddd;
            font-size:1.5em;
        }

        #main-container .client-container .heading {
            float:left;
            width:500px;
            padding:10px;
            margin:0;
        }
        #main-container .project-container .short-description h4 {
            text-indent:42px;
            text-align:justify;
        }

        #main-container .client-container .short-description a{
            color: #eb1202;
            display:block;
            float:right;
            }
        #contact-form, 
        #company-info { 
            float:left; width:49%; 
            }
        
        #contact-form form {
            width:400px;
            float:right;
            }
        #contact-form form label {
            display:block;
            float:left;
            width:90px;
            text-align:right;
            }
        #contact-form form div {
            clear:both
            }
        #contact-form form input {
            background:transparent;
            border:1px solid #aaa;
            float:right;
            width:300px;
            font-weight:bold;
            letter-spacing:2px;
            color:#eee;
        }
        #contact-form form input:focus {
            background:#000;
            font-weight:normal;
            border:1px solid #eb1202;
            }
        #contact-form form textarea {
            width:100%;
            background:transparent;
            border:1px solid #aaa;
            line-height:1.5em;
            letter-spacing:1px;
            color:#eee;
        }
        #contact-form form textarea:focus {
            background:#000;
            border:1px solid #eb1202;
            
        }

        #main-container .column {
            float:left;
            width:252px;
            min-height:200px;
            padding:0 10px;
            }

#footer {
    background:#101010;
    border-top:2px solid #000;
    font-size:10px;
    height:200px;
    }
    #footer #footer-container {
        /*padding:0 10px;*/
        color:#aaa;
        text-align:left;
        }

#error {
    color:#f00;
    padding:100px 0;
    text-align:right;
    font-weight:bold;
}

#error h1 {
    font-size:144px;
    line-height:144px;
}
#error h2{
    font-size: 48px;
}

/* the overlayed element */
.the-overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.the-overlay .close {
	background-image:url('/img/overlay/close.png?11b1644c360f');
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* the large image. we use a gray border around it */
#img {
	border:1px solid #666;
}
#img img {
    width:800px !important;
    }
/* "next image" and "prev image" links */
.next, .prev {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

.info strong {
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.6) url('/img/global/gradient/h80.png?11b1644c360f') repeat-x;		
}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#fff;}

#colorBox{}
    #cboxTopLeft{width:25px; height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') 0 0 no-repeat;}
    #cboxTopCenter{height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') 0 -50px repeat-x;}
    #cboxTopRight{width:25px; height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') -25px 0 no-repeat;}
    #cboxBottomLeft{width:25px; height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') 0 -25px no-repeat;}
    #cboxBottomCenter{height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') 0 -75px repeat-x;}
    #cboxBottomRight{width:25px; height:25px; background:url('/media/img/colorbox/border1.png?6b1ee0e71492') -25px -25px no-repeat;}
    #cboxMiddleLeft{width:25px; background:url('/media/img/colorbox/border2.png?6b1ee0e71492') 0 0 repeat-y;}
    #cboxMiddleRight{width:25px; background:url('/media/img/colorbox/border2.png?6b1ee0e71492') -25px 0 repeat-y;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:inline; bottom:20px; left:0; text-align:center; width:100%; height:100px; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxLoadingOverlay{background:url('/media/img/colorbox/loading.gif?6b1ee0e71492') 5px 5px no-repeat #fff;}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/media/img/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}