/* 
    Document   : markatzis
    Created on : Jan 7, 2012, 5:58:35 PM
    Author     : np0
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}
html,body {
    background-color: #ccc;
    font-family: Verdana;
}
* { margin: 0; padding: 0; font-family: Verdana;font-size:13px;}
a {
    text-decoration:none;
    color:#475771;
}
a:hover  {
    color:#fff;
}
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#logo {
    width:605px;
    height:150px;
    position: absolute;
    top:55.8%;
    margin-top:-75px;
    left:10%;

    z-index:999;
}
#about {

    width:950px;
    height:168px;
    margin-top:5px;
    left:10%; position:absolute;

    font-size:12px;

    z-index:999;
}
div#about div {
    margin-top:0;
    padding:0;
    margin-top:-8px;
}
#home_work {
    width:900px;

    position: absolute;
    top:50%;

    left:50%;
    margin-left:-450px;
    margin-top:-250px;
    font-size:12px;
    height:400px;

    z-index:999;
}
#slides{

    width:900px;

    position: absolute;
    top:50%;

    left:50%;
    margin-left:-450px;
    margin-top:-250px;
    font-size:12px;
    height:400px;

    z-index:999;

}

.slides_container {
    width:845px;
    height:410px;
    overflow:hidden;
    position:relative;
    display:none;
}
.slides_container div#work {
    width:900px;
    height:400px;
    display:block;
}
#slides .next,#slides .prev {
    position:absolute;
    top:187px;
    left:-23px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:845px;
}

/*
        Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../images/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

#work div a,#work-page-2 a ,#home_work div a{
    display:block;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    background-color: #9d9da0;

    width:260px;

    height:130px;
    line-height:20px;
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    color:#fff;
    line-height:215px;
    font-weight: bold;
    text-align: left;
    font-size:14px;
    padding-left:15px;

}

#work div a,work_item,#work-page-2 a.work_item{
    text-align: right;
     padding-left:5px;
     padding-right:10px;
      font-weight: normal;
      font-size:12px;
     
      
}
#work div a.active{
    display:block;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    background-color: #272727;

    width:260px;

    height:130px;
    line-height:20px;
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    color:#fff;
    line-height:215px;
    font-weight: bold;
    text-align: left;
    font-size:14px;
    padding-left:5px;

}
#work div.dummy,#work-page-2 div.dummy,#home_work div.dummy{

    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    background-color: #272727;

    width:260px;
   
    height:130px;
    line-height:20px;
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    color:#fff;

    text-align: center;
    line-height:215px;
    font-weight: bold;
    text-align: left;
    font-size:11px;
    padding-left:15px;

}

#about img {
    /*padding:4px;
    border:1px solid #ADA8A8;
    margin-right:10px;*/
     margin-right:10px;
     margin-top: 3px;
}
#bar {
    width:100%;
    height:60px;
    background:#EDEDF2;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    position: absolute;
    top:70%;
    margin-top:-30px;
    left:0;

}
#bar2 {
    width:100%;
    height:168px;
    background:#EDEDF2;
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;
    position: absolute;
    top:60%;
    margin-top:-30px;
    left:0;



}



#page-wrap { position: relative; width: 700px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; z-index:1}

p {
    margin-top:10px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}

.clearfix:after {
    clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
    zoom: 1;
}

/*
        Mosaic - Sliding Boxes and Captions jQuery Plugin
        Version 1.0.1
        www.buildinternet.com/project/mosaic
        
        By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
        Released under MIT License / GPL License
*/

span.numbering {
    font-weight:bold;
    font-size:18px;
}
div.notrans {
     filter: alpha(opacity=100);
    opacity: 1;
}

/*Navigation*/

div.navigation{
    text-align:right;
    width:100%;
    height:25px;
    margin-top:25px;
   
}
div.navigation ul {
    list-style: none;
    margin-right:100px;
}
div.navigation ul li, div.navigation ul li.active {
    display:block;
    float:right;
    min-width:190px;
    height:25px;
    line-height:25px;
    margin-right:10px;
     font-weight:bold;
    border-top-left-radius:  5px;
    border-top-right-radius: 5px;
    background-color: #475771;
    text-align:center;
}
div.navigation ul li.active {
     background-color: #BEBCBD;
    color:#666666;
}
div.navigation ul li a {
    color:#fff;
}
div.navigation ul li a:hover {
    color:#69AED1;
}