@charset "utf-8";
/* CSS Document

*********************************************************************
Author: George Mavromatis
Web site: Styletheweb.gr Copyright2009, George Mavrommatis, http://styletheweb.gr. 
This work is licenced under a Creative Commons License attribution 3.0 Greece. 

For any reuse or distribution, you must make clear to others the licence terms 
of this work, (a link back to my website).

Read more for license: http://styletheweb.gr/about.html
*********************************************************************


--------------------------------------------------------------------
                            GENERAL 
--------------------------------------------------------------------*/




* {
        margin: 0px;
        padding: 0px;
        border: 0px;
}


html > body {
	margin:0;
	padding:0;
	border:0;
	width: 100%;
	
}

body {
	width: 100%;
	margin:0;
	padding:0;
	border:0;		
	background:#fff;
	min-width:770px;
        color:#666666;
        font-family:"Lucida Grande",verdana,arial,Tahoma,Verdana,sans-serif;
        font-size: 86%;
        font-style:normal;
        font-weight:normal;
	line-height: 1.3;

}

fieldset {

	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
	
}

ol li {
       margin-left: 40px;
       list-style-type: square;
}



a:link {

	text-decoration: none;
	color: #666666;
	outline:none; 	

}

a:hover {

	text-decoration: underline;
	color: #999999;
	outline:none; 

}

a:visited {

	text-decoration: underline;
	color: #999999;	
	outline:none; 	
}


h1 {
        font-size: 170%;
	padding: 0;
	margin: 0 0 0.4em 0;
	font-weight: normal;
	color: #fd02b4;
}



h2 {
        font-size: 140%;
	padding: 0;
	margin: 0.6em 0 0.6em 0;
	font-weight: normal;
	color: #99cd2a;	
}

h3 {
        font-size: 120%;
	padding: 0;
	margin: 0 0 0.4em 0;
	font-weight: normal;
}

h4 {
        font-size: 110%;
	padding: 0;
	margin: 0 0 0.4em 0;
	font-weight: normal;
}


p {
	padding: 0;
	margin: 0 0 0.7em 0;

}


img {

	border: 0;

}

acronym {
        cursor: help;
        border-bottom: 1px dotted #5B6563;
}


/*-------------------------------------------------------------------
                         HEADER & INHEADER ELEMENTS
--------------------------------------------------------------------*/


#header {
	width: 100%;
	clear:both;
	float:left;
	background: url(../img/bg-head.jpg) repeat-x;

}

#inheader {

	position: relative;
	height:210px;

}

#inheader h1 {

	text-indent: -8000px;
	position: absolute;
	background: none;

}

#inheader h2 {

	text-indent: -8000px;
	position: absolute;

}

#logo {

	width: 243px;
	height: 210px;
	position: absolute;
	border: 0;
	top: 0;
	left: 0;

}

#logo a img {

	border: 0;

}

#phone {

	width: 200px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 17px;
	background: url(../img/phone.jpg) no-repeat;

}



/*-------------------------------------------------------------------
                         NAVIGATION LIST
--------------------------------------------------------------------*/





#p01 #n01 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p02 #n02 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p03 #n03 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p04 #n04 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p05 #n05 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p06 #n06 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p07 #n07 {
	background:#66b6fd;
        color:#FFFFFF;
}
#p08 #n08 {
	background:#66b6fd;
        color:#FFFFFF;
}

#nav {

	position: absolute;
	top: 161px;
	right: 17px;
	list-style:none;
	margin:0;
	padding:0;
	font-size: 90%;

}

#nav li {

	display:inline;
	list-style:none;
	margin:0;
	padding:0;

}

#nav li a {

	display:block;
	float:left;
	margin:0 0 0 2px;
	padding:3px 10px;
	text-align:left;
	background:#FFFFFF;
	color:#333333;
	text-decoration:none;
	position:relative;
	line-height:1.3em;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;		

}

#nav li a:hover {

	background:#66b6fd;
	color:#fff;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;	

}


#nav li a span {

	display:block;

}


/*-------------------------------------------------------------------
                  INHEADER CONTACT & SITEMAP LINKS 
--------------------------------------------------------------------*/


#inheader ul#twolinks {	

	list-style: none;	
	font-size: .88em;
	padding: 0;
	position: absolute;
	font-weight: normal;
	top: 0;
	right: 17px;
	margin: 0;
	border: none;

}

#inheader ul#twolinks li {

	float: left;

}

#inheader ul#twolinks li a {	

	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;		
	display: block;
	padding: 0px 10px;	

}

#inheader ul#twolinks li a:hover {

	color: #508fcb;

}

/*-------------------------------------------------------------------
                            LAYOUT 
--------------------------------------------------------------------*/

#inheader, #box, #infooter {

	width: 80%;
	margin: 0 auto 0 auto;	

}	
#outerbox {
	width: 100%;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}



.colmask {

	position:relative;		
	clear:both;
	float:left;
	width:100%;				
	overflow:hidden;			
	top: 20px;
	margin-bottom: 20px;	
}

.colmid,
.colleft {

	float:left;
	width:100%;				
	position:relative;

}

.col1,
.col2,
.col3 {

	float:left;
	position:relative;
	padding:0 0 2em 0;		
	overflow:hidden;

}

.blogstyle .colmid {

	right:21%;

}

.blogstyle .colleft {

	right:23%;				

}

.blogstyle .col1 {

	width:58%;				
	left:46%;}

.blogstyle .premium {
	overflow: auto;
	min-width:480px;
}

.blogstyle .col2 {

	width:19%;				
	left:48%;
	background: #f8f8f8;
	padding: 0 10px 0 10px;

}

.blogstyle .col3 {

	width:15%;				
	left:48%;
	text-align: center;								

}

#footer {

	clear:both;
	float:left;
	width: 100%;
	background: #242424;
	color: #f1efe2;

}
	
#infooter {

	position: relative;

}

	
#logo-f {

	width: 148px;
	height: 122px;
	position: absolute;
	top: 10px;
	right: 24px;
	background: url(../img/logo-grey.jpg) no-repeat;

}

#infooter #valid {

	width: 430px;
	height: 25px;
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	top: 70px;
	left: 10px;
	font-size: 86%;

}

#infooter #valid li {

	display: inline;

}

#infooter #valid li a:link {

	display: inline;
	color: #A9AEE1;
	padding: 7px;	

}




#infooter #valid li a:hover{

	display: inline;
	color: #ffffff;
	padding: 7px;		

}




#infooter #valid li a:visited{

	display: inline;
	color: #A9AEE1;
	padding: 7px;		

}
	
#infooter #foot {
	height: 25px;
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	top: 10px;
	left: 10px;
}	
	
#infooter #foot li {

	display: inline;

}

#infooter #foot li a:link{

	display: inline;
	color: #a5a5a5;
	padding: 7px;	

}

#infooter #foot li a:visited{

	display: inline;
	color: #a5a5a5;
	padding: 7px;		

}

#infooter #foot li a:hover{

	display: inline;
	color: #ffffff;
	padding: 7px;		

}

#infooter #foot li a:active {

	display: inline;
	color: #ffffff;
	padding: 7px;		

}



#infooter p {

	padding: 115px 0 0 0;
	font-size: 76%;
	text-align: center;

}

#infooter p a:link{

	display: inline;
	color: #206ba4;

}

#infooter p a:hover{

	display: inline;
	color: #005087;		
}

#infooter p a:visited{

	display: inline;
	color: #206ba4;

}

#infooter p span {

	color:#206ba4;

}

/*-------------------------------------------------------------------
                            ENTRIES STYLE 
--------------------------------------------------------------------*/

.entry {

	width: 100%;
	padding: 20px 0 20px 0;
	border: 0;
	margin: 0;
	float: left;

}

.entry {

	border-top: 1px dotted #CCCCCC;

}


.imgInfo h1,
.imgInfo h2,
.imgInfo h3 {

	margin: 0 0 0.2em 0;

}

.entry img {

	width: 300px;
	height: 180px;
	float: left;
	padding: 0;
	margin: 0 20px 0 0;
	border: 0;

}

.entry p {

	padding-bottom: 18px;

}

ul.buttons {

	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;

}

ul.buttons li.view {

	display: inline;

}

ul.buttons li.view a {

	display: inline;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #206ba4;

}

ul.buttons li.view a:hover {

	display: inline;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #508fcb;

}

ul.buttons {

	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;

}

ul.buttons li.down {

	display: inline;

}

ul.buttons li.down a {

	display: inline;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #74ac00;

}

ul.buttons li.down a:hover {

	display: inline;
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #92cb33;			

}


/*-------------------------------------------------------------------
                            COLOUMN 1
--------------------------------------------------------------------*/

.col1 ul.resources li {

	background: #f8f8f8;

}



/*-------------------------------------------------------------------
                            COLOUMN 2 
--------------------------------------------------------------------*/


.col2 .colbox ul {

	margin: 0;
	padding: 10px 0;
	border: 0;
	width: 100%;
	list-style-type: none;
	line-height: 1.5;
	
}


.col2 .colbox ul li {

	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	list-style-type: none;
	width: 100%;	
	
}

.col2 .colbox ul li a:link {

	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	width: 100%;
	color: #206ba4;		
	
}


.col2 .colbox ul li a:hover {

	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	width: 100%;
	color: #009bff;
}



.col2 .colbox ul li a:visited {

	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	width: 100%;
	color: #206ba4;		
	
}



.col2 .colbox a,
.col2 .colbox p {

	margin: 0;
	padding: 10px 0;
	border: 0;

}

.col2 .colbox img {

	margin: 0;
	padding: 10px 0 20px 0;
	border: 0;

}



.col2 h2 {

	margin: 0;

}




/*-------------------------------------------------------------------
                            MESSAGE  
--------------------------------------------------------------------*/

blockquote {

	margin: 0 0 20px 0px;
 	padding: 10px 10px 10px 14px;  	
	font-size: 120%;
        font-weight: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.3;
	background: #f8f8f8;	
	border: 2px dotted #FFFFFF;

}


blockquote a:link{

	display: inline;
	color: #206ba4;

}

blockquote a:hover{

	display: inline;
	color: #005087;		

}

blockquote a:visited {

	display: inline;
	color: #333333;

}



/*-------------------------------------------------------------------
                            HORIZ GOOGLE AD
--------------------------------------------------------------------*/


.ad {

	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	height: 30px;
	text-align: center;

}



/*-------------------------------------------------------------------
                            RESOURCES LIST 
--------------------------------------------------------------------*/


ul.resources {

	padding: 0;
	margin: 0;
	list-style-type: none;

}

ul.resources li {

        width: 100%;
	float: left;
	clear: left;
	border-bottom: 1px solid #CCCCCC;
	margin: 0;
	line-height: 1.5;
	text-decoration: none;
	color: #333333;
	border-top: 2px solid #FFFFFF;


}

ul.resources li a {

        width: 100%;
	float: left;
	clear: left;
	padding: 0 0 0 10px;
	color: #000000;
        font-weight: normal;
	text-decoration: underline;	

}

ul.resources li a:hover {

        width: 100%;
	float: left;
	clear: left;
	color: #666666;
	padding: 0 0 0 10px;
	text-decoration: none;	

}

ul.resources li span {

        display: block;
	padding: 0 0 0 10px;
	border: 0;

}


p.wiki {
margin: -15px 0 0 0;
padding: 0 0 10px 0;
font-size: 85%;
}


/*-------------------------------------------------------------------
                            CONTACT.PHP PAGE (CONTACT FORM) 
--------------------------------------------------------------------*/


input:focus, textarea:focus {
       outline: 1px solid #222222;
       background: #F8F8F8;
}


#contactbox {
	width: 100%;
	overflow: hidden;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
        float: left;
}

#contactbox p {
	margin:0px 0px 0px 0px;
	padding: 10px;
	overflow: hidden;
	text-decoration: none;
	line-height: 1.4;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
        width: 480px;
        background: #F8F8F8;
        position: relative;
}

#contactbox p.error {
	margin:0px 0px 0px 0px;
	padding: 10px;
	overflow: hidden;
	text-decoration: none;
	line-height: 1.4;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
        width: 480px;
        background: #F8F8F8;
        position: relative;
        color: #FF0000;
}

#contactbox input#submit {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 190px;
	border-top: 1px solid #666666;
	border-left: 1px solid #666666;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background: #222222;
        color: #ffffff;
        overflow: hidden;
        position: relative;
	font-variant: small-caps;
	font-weight: bold;
        float: right;
        clear: right;
        width: 100px;
}

#contactbox label {
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 2px 0px;
        overflow: hidden;
        position: relative;
        border-bottom: 1px dotted #999999;
        float: left;
        clear: left;
}

#contactbox input {
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 2px 0px;
        border: 1px solid #393939;
        overflow: hidden;
        position: relative;
        float: right;
        clear: right;
        width: 220px;
}

#contactbox textarea {
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 2px 0px;
        border: 1px solid #393939;
        overflow: hidden;
        position: relative;
        float: right;
        clear: right;
        height: 120px;
        width: 220px;
}


/*-------------------------------------------------------------------
               web design page list with works screens 
--------------------------------------------------------------------*/



#works-screens {
   margin:0;
   padding:0;
}

#works-screens li {
   display:inline;
   float:left;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   margin:0.1em;
}

#works-screens li a {
   display:block;
   text-decoration:none;
}

#works-screens li a:hover {
   color:#000000;
   font-weight: bold;
}

#works-screens li a img {
   border:0 none;
   
}