@charset "utf-8";

/*	npoulos.info 2010 */


/*	CSS RESET----------------------------------------------------------------------------------------------------------------------------------			*/

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* 	  END OF CSS RESET----------------------------------------------------------------------------------------------------------------------------------			*/



body { position: relative; background: #d3e2ea; font-family: Myriad Pro, Myriad, Verdana, Helvetica, Arial;}

a {	color: #368dc6; font-family: Myriad Pro, Myriad, Verdana, Helvetica, Arial; text-decoration: none;}
a:hover {text-decoration: underline; }

#footer a { color: #ffffff; }


#header {width: 100%; height: 352px;}

#bar-top { width: 100%; height: 65px; position: relative; background: #25272a; }

#bar-top-content { width: 960px; margin: 0 auto; }

#bar-top-content img { margin-right: 100px; display: inline; }

#nav-about { display: inline-block; background-image: url(../img/nav-about.jpg); background-position: 0 65px; height: 65px; width: 64px; margin-right: 30px; }
#nav-about:hover { background-position: 0 0px; }

#nav-portfolio { display: inline-block; background-image: url(../img/nav-portfolio.jpg); background-position: 0 65px; height: 65px; width: 85px;margin-right: 30px; }
#nav-portfolio:hover { background-position: 0 0px; }

#nav-contact { display: inline-block; background-image: url(../img/nav-contact.jpg); background-position: 0 65px; height: 65px; width: 64px; }
#nav-contact:hover { background-position: 0 0px; }

#nav-blog { display: inline-block; background-image: url(../img/nav-blog.jpg); background-position: 0 65px; height: 65px; width: 60px; }
#nav-blog:hover { background-position: 0 0px; }

#hero {width:auto; height: 287px; position: relative; background: url(../img/header-gradient.png); border-bottom: 1px solid #2c6b99;}

#hero-content { width: 960px; height: 287px; position: relative;  margin: 0 auto;overflow:hidden;}

#home #hero-content, #about #hero-content { background:url(../img/header-pattern.png) left top no-repeat;}
#portfolio #hero-content { background:url(../img/header-pattern-portfolio.png) left top no-repeat;}
#about #hero-content { background:url(../img/header-pattern-about.png) left top no-repeat;}
#contact #hero-content { background:url(../img/header-pattern-contact.png) left top no-repeat;}

#hero-right {
	width: 540px;
	height: 287px;
	left: 440px;
	position: relative;
	background:url(../img/icon-monitor.png);
	top: 0px;
}

#hero-screens {
	position:absolute;
	top: 32px;
	left: 124px;
	width: 292px;
	height: 182px;
}


#hero-portfolio-boxes {  position: absolute;	top: 25px;	left: 435px; 	}

#hero-portfolio-boxes li { cursor: pointer; background: url(../img/portfolio-box.png) no-repeat left center;	height: 25px; width: 25px; 	}
#hero-portfolio-boxes li.current { background: url(../img/portfolio-box-current.png) no-repeat left center;	height: 25px; width: 25px;	}
#hero-portfolio-boxes li.current:hover { background: url(../img/portfolio-box-current.png) no-repeat left center;	height: 25px; width: 25px;	}
#hero-portfolio-boxes li:hover { background: url(../img/portfolio-box-over.png) no-repeat left center;	height: 25px; width: 25px;	}


#content {	width: 960px; margin: 0 auto; height: auto; position: relative; top: 20px; background: #d3e2ea; color: #2f4963; padding-bottom: 250px;}

#portfolio #content {padding-bottom: 25px;}

#content-left 	{ width: 640px; margin-right: 10px;	float: left; }

#portfolio #content-left 	{ width: 100%; float: none; }

#portfolio .portfolio-box 	{ width: 294px; height: 184px; display: block; float:left; background: #bfd8e7; position: relative; border: 1px solid #92b4cb; padding: 5px; margin-right: 20px; margin-bottom: 35px; overflow:hidden;}
#portfolio .portfolio-box-right 	{ width: 294px; height: 184px; float:left; display: block; background: #bfd8e7; position: relative; border: 1px solid #92b4cb; padding: 5px; margin-right: 0px; margin-bottom: 35px; overflow:hidden;}

#portfolio .portfolio-box a, #portfolio .portfolio-box-right a { position: absolute; left: 10px; top: 80px; z-index:4;}

.portfolio-box-slide{  
	float: left;  
	position: absolute;  
	background: #000;  
	height: 130px;  
	width: 100%;  
	opacity: .8;  
	/* For IE 5-7 */  
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
	/* For IE 8 */  
	 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
	 top: 194px;
	 left: 0;
	padding: 10px;
	color: #FFFFFF;
	font-family: Myriad Pro, Myriad, Verdana, Helvetica, Arial;
	font-size: 14px;
} 

.portfolio-box-slide p {  margin-bottom: 10px; width: 285px;}
.portfolio-box-slide a { position: relative; right:0px; bottom:-15px; color:#368dc6; }

#portfolio #portfolio-categories {width: 500px; margin: 0 auto; margin-bottom: 25px; margin-top: 25px; }

#portfolio #portfolio-categories #portfolio-button-websites { cursor: pointer; display: inline-block; width: 128px; height: 32px; background-image: url(../img/portfolio-button-websites.png); background-position: 0 0px; margin-right: 30px;}
#portfolio #portfolio-categories #portfolio-button-websites:hover { background-position: 0 64px; }

#portfolio #portfolio-categories #portfolio-button-identities { cursor: pointer; display: inline-block; width: 128px; height: 32px; background-image: url(../img/portfolio-button-identities.png); background-position: 0 0px; margin-right: 30px;}
#portfolio #portfolio-categories #portfolio-button-identities:hover { background-position: 0 64px; }

#portfolio #portfolio-categories #portfolio-button-print { cursor: pointer; display: inline-block; width: 94px; height: 32px; background-image: url(../img/portfolio-button-print.png); background-position: 0 0px; }
#portfolio #portfolio-categories #portfolio-button-print:hover { background-position: 0 64px; }


#content-right {  width: 265px; margin-left: 10px;	padding-top: 45px; padding-left:10px;float: right;  font-size: 12px; position: relative; background: #bfd8e7; border: 1px solid #92b4cb; min-height: 100px; margin-bottom: 100px;}

#about #content-right { font-size: 14px; }
#about #content-right p {width: 95% ;}
#about #content-right p.title { font-weight: bold; margin-bottom: 5px; }
#about #content-right p.info { margin-bottom: 15px; }


#label-loading { text-align: center; font-size: 14x; width: 95%; margin-top: 50px; margin-bottom: 10px; }

#content-right-title {
	position: absolute;
	right: 6px;
	top: 8px;
	z-index:3;
}

#contact #social-networks {font-size: 14px;  }
#contact #social-networks li.facebook { cursor: pointer; background-image: url(../img/icon-facebook.jpg); height: 45px; margin-bottom: 5px; background-repeat: no-repeat; padding-left: 50px; padding-top: 15px;  }
#contact #social-networks li.twitter { cursor: pointer; background-image: url(../img/icon-twitter.jpg); height: 45px; margin-bottom: 5px;  background-repeat: no-repeat; padding-left: 50px; padding-top: 15px; }
#contact #social-networks li.linkedin { cursor: pointer; background-image: url(../img/icon-linkedin.jpg); height: 45px; margin-bottom: 5px;  background-repeat: no-repeat; padding-left: 50px; padding-top: 15px; }

.content-slide { display:block; position:relative; float: none; }
#content-slide { display:block; position:relative; float:none; }

a.contactme { width:184px; margin-left: 10px; height: 32px; display: inline-block; background-image: url(../img/button-contactme.jpg); background-position: 0 0px; }
a.contactme:hover { background-position: 0px 32px; }

a.resume { width:184px; margin-left: 10px; height: 32px; display: inline-block; background-image: url(../img/button-resume.jpg); background-position: 0 0px; }
a.resume:hover { background-position: 0px 32px; }

a.send-message { width:165px; height: 32px; display: inline-block; cursor: pointer; background-image: url(../img/button-sendmsg.png); background-position: 0 0px; }
a.send-message:hover { background-position: 0px 32px; }

a.return-home { width:165px; height: 32px; display: inline-block; cursor: pointer; background-image: url(../img/button-returnhome.png); background-position: 0 0px; }
a.return-home:hover { background-position: 0px 32px; }

a.fix-errors { width:165px; height: 32px; display: inline-block; cursor: pointer; background-image: url(../img/button-fixerrors.png); background-position: 0 0px; }
a.fix-errors:hover { background-position: 0px 32px; }

#latest-msgs { list-style: none; }
#latest-msgs li {margin-bottom: 7px;}
#latest-msgs li.facebook {	background: url(../img/icon-small-facebook.png); background-repeat: no-repeat; padding-left: 25px; padding-top: 3px; height: auto; padding-bottom: 7px;}
#latest-msgs li.twitter {	background: url(../img/icon-small-twitter.png); background-repeat: no-repeat; padding-left: 25px; padding-top: 3px; height: auto; padding-bottom: 7px;}
#latest-msgs li.line {	background: url(../img/content-right-line.jpg); background-repeat: no-repeat; margin: 0 auto; height: 5px; padding-top: 5px; padding-bottom: 5px;}

#frm_contact input, #frm_contact textarea {border: 1px solid #92b4cb; font-family: Myriad Pro, Myriad, Verdana, Helvetica, Arial; font-size: 14px; color: #2f4963;} 

h3 { width: auto; color: #2f4963; font-size: 18px; font-family: Myriad Pro, Myriad, Verdana, Helvetica, Arial; font-weight: normal; line-height: 22px;}

.line { margin-top: 35px; margin-bottom: 35px; } 

.content-box-container { display: table; vertical-align: top; }

.content-box {
	position: relative;
	display: inline-block;
	vertical-align: top;
	background: #bfd8e7;
	width: 279px;
	border: 1px solid #92b4cb;
	margin: 40px 25px 35px 3px;
	padding: 10px;
	text-align:right;
}

#button-contact { margin-top: 10px; margin-left: -5px; }

.content-box p { text-align:right; font-size: 14px;	margin-bottom: 12px;	}

.no-margin-right { margin-right: 20px; }
.big-margin-bottom { margin-bottom: 100px; }

.top-margin-10 { margin-top: 10px; }
.top-margin-15 { margin-top: 15px; }
.top-margin-20 { margin-top: 20px; }
.top-margin-30 { margin-top: 30px; }
.top-margin-40 { margin-top: 40px; }
.top-margin-50 { margin-top: 50px; }

.left-margin-10 { margin-left: 10px; }
.left-margin-15 { margin-left: 15px; }
.left-margin-20 { margin-left: 20px; }
.left-margin-30 { margin-left: 30px; }
.left-margin-40 { margin-left: 40px; }
.left-margin-50 { margin-left: 50px; }

.bottom-margin-10 { margin-bottom: 10px; }
.bottom-margin-15 { margin-bottom: 15px; }
.bottom-margin-20 { margin-bottom: 20px; }
.bottom-margin-30 { margin-bottom: 30px; }
.bottom-margin-40 { margin-bottom: 40px; }
.bottom-margin-50 { margin-bottom: 50px; }

.block-level { display: block;}

.invisible { visibility: hidden; }

#footer {	width:100%; margin-top: 350px; height: 100px; position: relative; background: url(../img/footer-bg.jpg); border-bottom: 1px solid #2c6b99; clear: both;}
#footer-content {width: 960px; margin: 0 auto; padding-top: 50px; margin-bottom: 25px; position: relative; color: #ffffff; font-size: 14px;}
#footer-content #copyright {
	position: absolute;
	left: 3px;
	top: 15px;
}
#footer-content #copyright p {margin-top: 15px; }
#footer-content ul { list-style:none; display: inline; }
#footer-content ul li { margin-right: 20px; list-style: none; display: inline; }
#portfolio #footer { margin-top: 35px;}