@charset "utf-8";
/*-------------------------------------
Developer:	Milan Rančić
Date:		December, 2011
Client:		Milan Rančić
---------------------------------------
Content:
---------------------------------------
	1. Reset
	2. Global styles
	3. Form
	4. Specific styles
---------------------------------------*/
/*---------------------------------------
	=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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* { margin: 0; padding: 0; outline: 0; }

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure { display: block; }

body { font-family:'Cabin', Helvetica, Arial, sans-serif; color: #4b4b4b; background: url('../pict/bg-grey-hsl.png') repeat fixed; text-shadow: 1px 1px 2px #FFFFFF;/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/ }

::selection { background-color: rgba(122, 192, 0, 0.2); }
::-moz-selection { background-color: rgba(122, 192, 0, 0.2); border: 10px solid red; }

h1 { color: #fff; font-size: 36px; position: relative; top: 40px; }
h1 a { color:#C33; font-size: 50px; }

h1 a:hover { color: #888; text-decoration:none;} 

h1,h2 {
	font-family: 'Lobster', Georgia, Times, serif; text-shadow: 1px 1px 2px #FFFFFF; }
h2 { font-size: 36px; color:#B23332; height: 50px; margin-top:40px; text-shadow: 1px 1px 1px #999999; }
h2 p {  font-family:'Enriqueta','Cabin', Arial, sans-serif; font-size:40px; color:#555; line-height: 40px; }
h2 span.sub { font-size: 48px; color: #4b4b4b; } 

p {font-family: 'Cabin', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 25px; text-shadow: 1px 1px 2px #FFFFFF; }

a { color: #808080; text-decoration: none; /*border-bottom: 1px solid #7ac000; padding-bottom: 2px;*/ }
a:hover { color: #B80000; text-decoration: none; /*border-bottom: 1px solid #ff5400;*/ padding-bottom: 2px; }
a:active { color: #000; text-decoration: none; /*border-bottom: 1px solid #fff;*/ padding-bottom: 2px; position: relative; top: 1px; }

p { font-size: 20px; margin-bottom: 15px; line-height: 36px; }
strong { font-family:Arial, Helvetica, sans-serif; }

header { /*padding: 5px 0;*/ width: 100%; height:100px;/*background-color: #fff;-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);*/ margin-bottom: 25px;  position: fixed; z-index: 10; float: left; background-image:url("../images/header_bg.png"); }
#headercontainer, #contentcontainer { width: 960px; margin: 0 auto; position: relative; }
#contentcontainer { float: none; padding-top: 0px; }

nav { width: auto; float: left; }
nav ul { position: absolute; right: 0; display: block; margin-top: 10px; }
nav ul li { display: inline; margin-left: 50px; }
nav ul li a { font-size: 16px; border-bottom: none; color:#555; }
nav ul li a:hover { border-bottom: 3px solid #C33;}


.social_set { width: auto; float:right; }
.social_set ul {position: absolute; right: 0; display: block; top:10px; font-family: 'Lobster', Georgia, Times, serif; text-shadow: 1px 1px 2px #FFFFFF; }
.social_set ul li { display: inline; margin-bottom:20px; padding-left:20px; }
.social_set ul li img { display:inline; }

section { margin-bottom: 0; padding-top: 120px; float: left; width:100%; }

#intro { text-align:center;}

#intro a.featured { padding-bottom: 0px; border-bottom: none; }
#intro a img { border: 3px solid rgb(192,192,192); -webkit-border-radius: 3px; margin-top: 40px; margin-bottom: 5px; }
#intro a img:hover, #portfolio .work a img:hover, #portfolio .prework a img:hover, input:hover, textarea:hover { border: 3px solid rgb(216, 0, 0); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); }
#intro a img:active, #portfolio .work a img:active { -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }

#portfolio ul.work a, #portfolio ul.prework a { border-bottom: none; }
#portfolio ul.work a img, #portfolio ul.prework a img { border: 3px solid #FFF; -webkit-border-radius: 3px; margin-top:5px; margin-bottom:15px; box-shadow: 0px 0px 5px #aaa; }
#portfolio ul.work, #portfolio ul.prework { float: left; margin-left: -14px; width: 975px;  font-family: 'Cabin', Helvetica, Arial, sans-serif; line-height:20px; }
#portfolio ul.work li, #portfolio ul.prework li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; display:block; width:310px; height: 320px; }

#portfolio ul.prework { margin-top:20px; overflow:hidden; }



#portfolio h2,#about h2,#contact h2 { height:50px; border-bottom: 1px dotted #999; margin-bottom:30px; width:960px; }

#project {width:280px; }


#about p {font-size:15px; width:300px; line-height: 24px; float:left; margin-left:0px; float:left; }
#about img {margin-left:70px;  box-shadow: 0px 0px 5px #aaa; border: 3px solid #FFFFFF; }
#about ul li p  { bottom:26px; float:right; font-size:18px; font-weight:bold; position:relative; text-align:right; }
#about ul li span { font-size:18px; font-weight:bold; }
/* ----nerdy skills---- */
.skills { float:right; display:block; margin-left:10px; width: 300px; }

.skills li {list-style:none; font-weight:normal; color:#575757; font-family:Arial, Helvetica, sans-serif; font-size:16px; padding: 32px 0; }
.skills li span{position:absolute; right:0; font-weight:normal; font-size:14px; }
	
.bar_100, .bar_90, .bar_80, .bar_70, .bar_60, .bar_50, .bar_40, .bar_30, .bar_20, .bar_10{
	background:url(../images/bar_graph.gif) repeat-x right .3em;
	height:30px;
}
.bar_100{ width:310px; }
.bar_90{ width:280px; }
.bar_80{ width:250px; }
.bar_70{ width:220px; }
.bar_60{ width:190px; }
.bar_50{ width:160px; }
.bar_40{ width:130px; }
.bar_30{ width:100px; }
.bar_20{ width:70px; }
.bar_10{ width:40px; }
.skills li .percent{ position:absolute; left:-44px;
}

#contactform { width:420px; }

#contact p {font-size:16px; line-height: 24px; }


.textbox,
.textbox_error {
	width:220px;
	height:32px;
	color:#888;
	border:3px solid #C1C1C1;
	background:#FFF;
	text-indent:2px;
	margin-bottom:5px;
	}
	.textbox_error {border-color:red}
	.errors {color:red}

#name_err,#mail_err,#headline_err,#msg_err {
	display:none;
	}
#sent_no {
	clear:both;
	text-align:center;
	color:#F00;
	}

#sent_yes {
	/*clear:both;*/
	text-align:center;	
	color:#0C0;
	}
#validate_links {
	position:relative;
	float:right;
	text-align:right;
	right:35px;
	color:#999;
	}


input[type="text"] { width: 200px; font-size:14px; }
input[type="mail"] { width: 200px; font-size:14px; }
textarea { width: 420px; height: 150px; }
label { color:#4B4B4B; }
input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 3px solid rgb(216, 216, 216); padding: 6px; font-family:Arial, Helvetica, sans-serif; color: #4b4b4b; font-size: 16px; -webkit-border-radius: 3px; margin-bottom: 10px; margin-top: -10px; font-size:14px; }
input:focus, textarea:focus { border: 3px solid #ff5400; background-color: rgba(255, 255, 255, 1); }

input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 14px; background-color: #B23332; padding: 5px 16px 5px 16px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6);
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(#B23332),
	    color-stop(#B23332)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #B23332,
	    #B23332 
	);
}

input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #C80000;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(#B23332),
	    color-stop(#B23332)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #B23332,
	    #B23332
	);
}

input[type="submit"]:active { position: relative; top: 1px; }

#skype_me {border: none; background-color:transparent; position:relative; display:block; float:right; bottom:360px; right:40px; }

footer { text-align:center;}
/*footer ul { margin-bottom: 50px; }
footer ul li { display: inline; line-height:20px; }
footer ul li a {  margin-left: 10px; }
footer ul li img { vertical-align: bottom; position: relative; top: 2px; }*/
footer p { font-size: 14px; position:relative; margin:auto; width:940px; /*bottom:1000px;*/ height:200px; }