@charset "utf-8";
/* CreativeSwitch.net - Vibor Viskovic portfolio*/

/*CSS reset - meyerweb.com*/

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;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset*/

/*sliding boxes*/

.boxgrid{
	width: 450px;
	height: 250px;
	
	margin:8px;
	float:left;
	border: solid 4px #25707e;
	overflow: hidden;
	position: relative;
	background-color: #161613;
	background-image: url(../images/work_bg.jpg);
			}
.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
.boxgrid p{ 
					padding: 15px 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
.boxgrid.slideright h3 {
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 28px;
	color:#c4f714;
	padding:10px;
}

.boxgrid.slideright p {
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	
}



.project_navigation li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 45px;
	color: #FFF;
	background-image: url(../images/projects_btn_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 43px;
	width: 450px;
	text-align:center;
	text-decoration:none;
}

.project_navigation li a:hover{
	background-position:bottom;
	}
				
			
 			
				
				/*end sliding boxes*/

body{
	background:url(../images/main_bg.png) repeat-x #02719b fixed;
	
	}
#clouds_bg {
	background-image: url(../images/fixed_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	position:fixed;
	top:0;
	left:0;
	z-index:-5000;
	width:990px;
	height:900px;
}
#header {
	background-image:url(../images/top_nav_full_bg.jpg);
	background-repeat: repeat-x;
}
	
.center_div {
	width: 990px;
	margin:0 auto;

	}
#top_nav_full .center_div {
	height:69px;
	background-image:url(../images/top_nav_centerl_bg.jpg);
}
#header #header_content {
	background-image:url(../images/top_nav_centerl_bg.jpg);
	background-repeat: repeat-x;
	height: 426px;
}
#header_content h1 {
	background-image: url(../images/creative_switch_main_title.png);
	background-repeat: no-repeat;
	text-indent: -19999px;
	height: 181px;
	width: 387px;
	overflow:hidden;
	
}
#header_content h2 {
	background-image: url(../images/cs_subtitle_bg.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 387px;
	text-indent: -19999px;
	overflow:hidden;
}
.content {
	background-color: #000;
}
.content_bg {
	background-image: url(../images/main_content_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-bottom:30px;
}
.nav_full {
	background-image: url(../images/nav_full_bg.png);
	background-repeat: repeat-x;
	height: 69px;
}
#work_header {
	background-image: url(../images/work_robot.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 226px;
}
#work_header h2 {
	background-image: url(../images/my_work.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-indent: -1999px;
	height: 226px;
	width: 372px;
}
#contact {
	background-image: url(../images/donji_robot.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 419px;
}
#contact h2 {
	background-image: url(../images/contact.png);
	background-repeat: no-repeat;
	background-position: right top;
	text-indent: -1999px;
	height: 84px;
}
#header_content #header_left {
	float: left;
}
#header_content #header_right {
	float: right;
	height: 426px;
}
.clear {
	height:0;
	line-height:0;
	clear:both;
}
.main_nav {
	width: 387px;
	padding-bottom:30px;
}
.main_nav ul li {
	display: inline;
	float: left;
}

.main_nav ul li a{
	font-family:Impact, Arial, sans-serif;
	display:block;
	height:39px;
	color:#b4e411;
	text-decoration: none;
	padding:15px 20px;
	font-size:20px;
	}
.main_nav ul li a:hover{
	background:url(../images/nav_hover_bg.png) repeat-x;
	color:#FFF;
	}
.top_content_box {
	float: left;
	width: 300px;
	padding: 15px;
}
.top_content_box p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	line-height: 18px;
}
.top_content_box h2 {
	text-indent: -1999px;
	height: 25px;
	width: 110px;
	background-repeat: no-repeat;
	background-position: left top;
	margin-bottom:20px;
	margin-top:25px;
}
.top_content_box h2.about_me {
	background-image: url(../images/about_me_title.png);

}
.top_content_box h2.stuff_i_do {
	background-image: url(../images/stuff_i_do_title.png);

}

.top_content_box h2.skills {
	margin-top:15px;
	background-image: url(../images/skills_title.png);

}
.top_content_box h2.tweets {
	background-image:url(../images/tweets_title_bg.png);
	width:200px;

}

.top_content_box ul{
	list-style-image:url(../images/bullet.png);
	list-style-position:inside;
	}


.top_content_box ul li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	line-height:20px;
}
.content .center_div.content_bg .work_wrap .fists {
	background-image: url(../images/work_robot_fists.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 92px;
}


a.linkedin {
	background-image: url(../images/linked_in.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 52px;
	width: 299px;
	display: block;
	text-indent: -1999px;
	margin-top: 30px;
}

a.twitter {
	background-image: url(../images/twitter.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 52px;
	width: 299px;
	display: block;
	text-indent: -1999px;
	margin-top: 10px;
}

a.linkedin:hover, a.twitter:hover{
	background-position: left top;
	}
	

#contact #contact-me {
	float: right;
	width: 630px;
	padding-bottom: 20px;
}


/* contact forma */

#contact-me p span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #c1ab5f;
	padding-left: 32px;
}
#contact-me p span a {
	font-weight: bold;
	color: #c1ab5f;
}
#contact-me p span a:hover {
	font-weight: bold;
	color: #D6C896;
}
#contact-me h3 {
	height: 62px;
	width: 168px;
	display: block;
	background-image: url(../images/contact-me.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	margin-bottom: 20px;
}
#contact-me form {
	padding-left: 32px;
	margin-bottom: 12px;
	width: 298px;
}
#contact-me form p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #c1ab5f;
	font-weight: bold;
	margin-bottom: 5px;
}
#contact-me .textfield {
	background-image: url(../images/textfield.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 24px;
	width: 194px;
	padding-left: 10px;
	padding-top: 6px;
	margin-bottom: 10px;
}
.textfield input {
	width: 180px;
	background-color: transparent;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	height: 20px;
	color: #FFF;
}
#contact-me .textarea {
	height: 101px;
	width: 256px;
	background-image: url(../images/textarea.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-bottom: 10px;
	padding-top: 8px;
	padding-left: 10px;
}
#contact-me textarea {
	height: 91px;
	width: 246px;
	background-color: transparent;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
}
#contact-me .send {
	height: 28px;
	width: 262px;
	background-image: url(../images/send_btn.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color:#FFF;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#contact-me .send:hover {
	background-image: url(../images/send_btn.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor:pointer;
}
#contact-me .send:active {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#contact-me #formID h4 {
	text-indent: -1999px;
	height: 25px;
	background-image: url(../images/name_email_message.png);
}
#contact-me #formID .name {
	width: 80px;
	background-repeat: no-repeat;
}
#contact-me #formID .email {
	background-repeat: no-repeat;
	background-position: -84px;
	width: 85px;
}
#contact-me #formID .message {
	background-repeat: no-repeat;
	background-position: -179px;
}
#contact #contact_all .contact_info {
	float: left;
	width: 300px;
}
.contact_info p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	line-height: 18px;

}
.contact_info .linkedin {

	margin-top: 15px;
}

.contact_info ul{
	list-style-image:url(../images/bullet.png);
	list-style-position:inside;
	padding-top:20px;
	padding-left:25px;
	}


.contact_info ul li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	line-height:20px;
}
.top_content_box .aboutme a {
	font-family: Arial, Helvetica, sans-serif;
	color: #b4e411;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #b4e411;
}


.top_content_box .aboutme a:visited{
	color:#CCC;
	}
.top_content_box .aboutme a:hover{
	color:#b4e411;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color:#FFF;
	}
	
#back_to_top a {
	text-indent: -1999px;
	height: 30px;
	width: 76px;
	display: block;
	background-image: url(../images/back_to_top.png);
	background-position: left bottom;
}

#back_to_top a:hover{
	background-position:left top;}
#back_to_top {
	position: fixed;
	right: 5px;
	bottom: 100px;
}
.work_wrap h2 {
	text-indent: -1999px;
	height: 32px;
	width: 200px;
	float: left;
}

.work_category .work_nav {
	float: right;
	padding-left:30px;
	width: 250px;
	padding-right: 15px;
}
.work_category .work_nav ul li {
	display: inline;
}
.work_category .work_nav ul li a {
	display: block;
	float: left;
	line-height: 25px;
	padding: 5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
	font-size: 12px;
	text-decoration: none;
	border-bottom:#000 solid 3px;
}

.work_category .work_nav ul li a:hover{
	color:#b4e411;
	border-bottom:#b4e411 solid 3px;
	}
.work_category h2.logo {
	background-image: url(../images/logo_and_identity.png);
}

.work_category .web {
	background-image: url(../images/Web_and_digital.png);
}
.work_category .print {
	background-image: url(../images/Print.png);
	background-repeat: no-repeat;
	width: 200px;
	height: 30px;
	text-indent: -1999px;
}
.boxgrid.slideright .project_navigation {
	padding-top: 15px;
}
.boxgrid.slideright p a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #b4e411;
	text-decoration:none;
}



.boxgrid.slideright p a {
	font-family: Arial, Helvetica, sans-serif;
	color: #b4e411;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #b4e411;
}


.boxgrid.slideright p a:visited{
	color:#CCC;
	}
.boxgrid.slideright p a:hover{
	color:#b4e411;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color:#FFF;
	}
#contact-me .contact_form {
	float: left;
	width: 330px;
}