/* www.2progressive.gr
* BY 2PROGRESSIVE
* www.2progressive.gr
* info@2progressive.gr
--------------------------------------*/

/* Layout
--------------------------------------*/
/* div{
border:1px solid red;
} */

body{
background: #1A1A1A ; /*url(bg_main.jpg) repeat-x*/
font-family:"Tahoma";
color:#1f1f1f;
font-size: 14px;
letter-spacing: 0px;
}
*{
margin:0;
padding:0;
z-index:1;
}
p{
padding: 0 0 10px 0;
}
.all{
/*background: url(body_logo.jpg) no-repeat center 248px;*/
margin:auto;
}
.ext1{
/*background: url(bg_left.jpg) no-repeat left top;*/
margin:auto;
width:882px;
padding: 0 12px 0 12px;
}
.ext2{
/*background: url(bg_right.jpg) no-repeat right top;*/
width:882px;
padding: 0 12px 0 0;
}
#header{
height:158px;
width:882px;
}
#menu{
background: url(nav_bg.gif) repeat-x;
height:29px;
}
#subheader{
background: url(header.jpg) no-repeat;
height:136px;
width:882px;
}
#flashsubheader{
height:300px;
width:882px;
z-index:-1;
background: #212121;
}
#wrap{
background: url(body_bg.gif) repeat-y;
font-size:.9em;
text-align:justify;
display:block;
height:100%;
overflow: auto;
}
*html #wrap{
margin-top:-5px;
}
#rightcol{
position: relative;
float:right;
width:230px;
padding:30px 10px 10px 10px;
}
#rightcol-webdevsamples{
text-align: center;
position: relative;
float:left;
width:220px;
padding:30px 5px 10px 5px;
}
#leftcol{
position: relative;
float:left;
width:552px;
padding:10px 40px 10px 40px;
}

#frontpage-full{
background-color: #e9e9e9;
position: relative;
float:left;
width:842px;
padding:10px 20px 10px 20px;
}
#leftcol-full{
background-color: #fff;
position: relative;
float:left;
width:842px;
padding:10px 20px 10px 20px;
}
.footer{
clear:both;
padding:50px 20px 0 100px;
background: #000 url(footer_top.gif) no-repeat;
font-size:.7em;
height:110px;
width:760px;
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
}
.lft{float:left;}
.rght{float:right;}
.clr{clear:both;}
.red{color: #AC1010;}
.left-pad{padding:0 0 0 30px;}
/* Columns
--------------------------------------*/
.col-30{
float:left;
width:32%;
text-align: justify;
}
.col-32{
float:right;
width:32%;
text-align: justify;
}
.col-70{
float:left;
width:55%;
text-align: justify;
}
.col-30-right{
float:right;
width:32%;
text-align: justify;
}
/* layout design elements
--------------------------------------*/
a.logo:link,a.logo:visited,a.logo:hover,a.logo:active{
display:block;
float:left;
background-image: url(logo.jpg);
width:350px;
height:158px;
text-decoration:none;
}
.hdrlogo{
float:right;
display:block;
background-image: url(logo_right.jpg);
width:532px;
height:158px;
}
#upfooter{
clear:both;
background-color: #1E1F21;
width:880px;
height:5px;
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
}
#subfooter{
clear:both;
background: #000 url(footer_bottom.gif) no-repeat;
width:880px;
height: 27px;
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-bottom:1px solid #333333;
}
/* Navigation
--------------------------------------*/
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
border: 0 none;
padding: 0;
width: 880px; /*For KHTML*/
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul li {
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
background-image: url(nav_btn.gif);
background-repeat: repeat-x;
padding:0 12px 0 12px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: black;
font-family: sans-serif, Berylium;
font: bold 12px/24px sans-serif, Berylium;
letter-spacing: 1px;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background-image: url(nav_btn.gif);
background-position: 0 -24px;
background-repeat: repeat-x;
color: white;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
font-size: 10px;
float: none;
border:1px solid;
border-top: #FFFFFF;
border-right: #b3b3b3;
border-bottom: #b3b3b3;
border-left: #e7e7e7;
background: #f7f7f7;
color: #1d1d1d;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background-image: url(dropdown_menu.gif);
background-position: top left;
background-repeat: repeat-x;
color: #8c8c8c;
}
ul#navmenu ul ul,{
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
a:link,a:visited,a:hover,a:active{
text-decoration:none;
}
/* FRONTPAGE
--------------------------------------*/
a.front:link,
a.front:visited,
a.front:hover,
a.front:active{
color: black;
display:block;
width:110px;
height:155px;
text-decoration: none;
font-size: .9em;
font-weight: 500;
padding: 30px 20px 0 130px;
text-align: center;
}
a.front-webdev:link,
a.front-webdev:visited,
a.front-webdev:hover,
a.front-webdev:active{
background: url(frontweb.jpg) repeat-x top left;
text-align: right;
margin-right: -50px;
}
a.front-adv:link,
a.front-adv:visited,
a.front-adv:hover,
a.front-adv:active{
background: url(frontad.jpg) repeat-x top left;
}
a.front-print:link,
a.front-print:visited,
a.front-print:hover,
a.front-print:active{
background: url(frontprint-fl.jpg) repeat-x top left;
}
a.front-media:link,
a.front-media:visited,
a.front-media:hover,
a.front-media:active{
background: url(frontmedia.jpg) repeat-x top left;
}
.front-address{
background: url(2p_map.jpg) no-repeat top center;
width:185px;
height:80px;
padding: 150px 0 0 65px;
font-size: .9em;
font-weight: 600;
}
.digi{
background: url(digilodge.jpg) no-repeat top center;
width:260px;
height:220px;
font-size: .9em;
font-weight: 600;
display: block;
text-align: left;
margin: 0px;
}
a.digi:link,
a.digi:visited,
a.digi:hover,
a.digi:active{  {
background: ;
}
.labs{
background: url(labs.jpg) no-repeat top center;
width:262px;
height:175px;
font-size: .9em;
font-weight: 600;
display: block;
text-align: left;
margin: 0px;
}
a.labs:link,
a.labs:visited,
a.labs:hover,
a.labs:active{  {
background: url(labs.jpg) no-repeat top center;
}
.front-links{
background: url(frontnea.jpg) no-repeat;
height:175px;
width:257px;
padding: 0px 10px 5px 10px;
text-align: left;
}

.front-links a:link,
.front-links a:visited,
.front-links a:hover,
.front-links a:active{
display: block;
text-decoration: none;
font-size: .9em;
padding: 4px 0 0 5px;
}


/* FOOTER ELEMENTS
--------------------------------------*/
#address{
background: url(footer_hr.gif) no-repeat top right;
float: left;
height:92px;
color:#6e6e6e;
padding:15px 30px 0 0;
}
#tel{
background: url(footer_hr.gif) no-repeat top right;
float: left;
height:92px;
color:#6e6e6e;
padding:15px 30px 0 0;
margin: 0 0 0 30px;
}
#credits{
background: url(2p_long.gif) no-repeat left 5px;
height:77px;
width:170px;
float: left;
color:#6e6e6e;
padding:0 0 0 180px;
margin:30px 0 0 30px;
}
.footer p{
background: url(list_icon.gif) no-repeat left 5px;
margin:0;
padding:0 0 0 15px;
}
.spc{padding: 0 0 0 5px;}

/* GLOBAL ELEMENTS
--------------------------------------*/
li{
margin: 0 0 5px 30px;
list-style-image: url(bullet.gif);
}
h2{
background: url(bullet_title.gif) no-repeat top left;
height:35px;
text-align: left;
font-size:1.5em;
color: #8d070a;
letter-spacing: 1px;
padding: 2px 0 0 40px;
}
a:link, a:visited, a:active{
color: #333333;
font-weight: bold;
}
a:hover {
color: #999999;
text-decoration: underline;
}
#rightcol a:link,#rightcol a:visited,#rightcol a:hover,#rightcol a:active{
color: #9e1919;
font-weight: bold;
text-align: left;
}
#rightcol p{
padding:0 0 18px 0;
}
h3{
margin:18px 0 0 0;
font-size:1.1em;
font-weight: bold;
color: #9a1c1c;
letter-spacing: 2px;
}
/* web development
--------------------------------------*/
table{
margin:0 0 18px 0;
}

td{
padding:3px;
vertical-align: top;
}


/* all services
--------------------------------------*/
h4{
font-size:1em;
border: 1px solid #bcbcbc;
padding: 5px;
margin: 5px;
letter-spacing: 2px;
}
a.allsrv:link,a.allsrv:visited{
padding: 4px 0 0 35px;
color: #777777;
display: block;
height:22px;
text-decoration: none;
}
a.allsrv:hover,a.allsrv:active{
background: url(bullet.gif) no-repeat 10px center;
text-decoration: none;
color: #333333;
}

/* faqs
--------------------------------------*/
/* zeroing out padding and margin */
#TJK_DL dd,#TJK_DL dt {margin:0;padding:0}
/* margin for the DTs (shorthand) */
#TJK_DL dt {margin:7px 0}
/* image and left padding for DDs */
#TJK_DL dd {background:url(answer.gif) no-repeat;padding-left:55px}
/* styling all anchors in the DTs */
#TJK_DL dt a {background:0 50% no-repeat;padding-left:32px;color:#000;text-decoration:none}
#TJK_DL dt a:visited {color:#666}
#TJK_DL dt a:visited:hover,
#TJK_DL dt a:hover,
#TJK_DL dt a:active,
#TJK_DL dt a:focus {font-weight:bold}
/* the + and - gif in the anchors */
#TJK_DL .DTplus a {background-image:url(toggleDLplus.gif)}
#TJK_DL .DTminus a {background-image:url(toggleDLminus.gif)}
/**********************************/
/**********************************/
#TJK_DL .showDD {position:relative;top:0}
#TJK_DL dd,.hideDD{top:-9999px;position:absolute}
#TJK_ToggleON,#TJK_ToggleOFF {display:inline;cursor:pointer;cursor:hand}




/* blog
--------------------------------------*/
a.blog:link, a.blog:visited, a.blog:hover, a.blog:active{

}
.postdetails{

}
.bloghr hr{

}
/* portfolio
--------------------------------------*/
.portfolio{
margin:0; padding:0;
overflow:hidden; /* Clears the floats */
width:100%; /* IE and older Opera fix for clearing, they need a dimension */
list-style:none;
}
.portfolio li{
float:left;
display:inline; /* For IE so it doesn't double the 1% left margin */
width:23.8%;
margin:0px 0px 10px 1%; padding:5px 0;
height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
position:relative; /* This is the key */
}
.portfolio a,
.portfolio img{
display:block;
width:100%;
}
a img{ border:none; } /* A small fix */
.portfolio a:link,
.portfolio a:visited,
.portfolio a:focus,
.portfolio a:hover,
.portfolio a:active{
padding:3px;
width:75px; height:75px;
position:absolute; top:50%; left:50%;
margin:-41px 0 0 -41px;
}
.portfolio a:hover{
}
#toggleable div {
display: none;
}
/* Contact form
--------------------------------------*/
.cssform {
padding: 20px;
font-size: 1.1em;
text-align: right;
width: 260px;
/*background: url(contact_bg.jpg) 0 0 no-repeat;*/
}
.cssform fieldset { 
border-top: 1px; 
border-left: none;
border-right: none;
border-bottom: none;
font-size: 1.2em;
}

.cssform p{
width: 260px;
background-color:#d8d8d8;
clear: left;
margin: 0;
padding: 8px 8px 8px 0;
padding-left: 155px;
height: 1%;
}
.cssform label{
font-size: .9em;
float: left;
margin-left: -155px;
width: 150px;
}
.cssform input[type="text"]{
width: 150px;
}
.cssform textarea{
width: 150px;
height: 100px;
}
* html .threepxfix{
margin-left: 3px;
}
.contact-page-details{
margin:20px 0 0 0;
background: url(women.jpg) top center no-repeat;
text-align: center;
padding-top:226px;
font-size: .9em;
}
.contact-button{
background: url(contact_hr.jpg) 0 10px no-repeat;
margin:75px 0 0 0;
padding:0 0 0 150px;
height:40px;
}
.btn{
padding: 0 0 5px 0;
border: 0;
font-size:.9em;
color: #fff;
background: url(contact_btn.jpg) center center no-repeat;
width:145px;
height:25px;
margin-left:40px;
}

.want{
margin-top:20px;
background: url(bg_want.gif) top left no-repeat;
padding:40px 0 0 85px;
width:460px;
height:45px;
}
.want option{
width:350px;
}

.imagethumb {
border: 5px  solid #f5f5f5;
background: black;
margin: 0 auto;
padding: 15px;	
text-align:center;

}