/* .............................................................
                                   .               oooo            
                                 .o8               `888            
 .ooooo.  oooo    ooo  .oooo.o .o888oo oooo    ooo  888   .ooooo.  
d88' `"Y8  `88.  .8'  d88(  "8   888    `88.  .8'   888  d88' `88b 
888         `88..8'   `"Y88b.    888     `88..8'    888  888ooo888 
888   .o8    `888'    o.  )88b   888 .    `888'     888  888    .o 
`Y8bod8P'     .8'     8""888P'   "888"     .8'     o888o `Y8bod8P' 
          .o..P'                       .o..P'                      
          `Y8P'                        `Y8P'                       
............................................................... */

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

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

/*------Clear Fix------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*----------------------*/

body { 
	color: #999;
	font: 14px Helvetica, Geneva, Arial, sans-serif; 
	text-shadow: 1px 1px 1px rgba(51, 51, 51, 0.1);
}

::selection { 
	background-color: rgba(255, 188, 110, 0.5); 
}

::-moz-selection { 
	background-color: rgba(255, 188, 110, 0.5); 
	border: 10px solid red; 
}

h2 {
	text-transform: uppercase;
	font-size: 36px;
	margin: 3px 0 10px 0;
}

#home h2 { color: #fff; }

h3 {
	text-transform: uppercase;
	font-size: 24px;
	color: #3ec1c5;
	margin: 0;
}

p { 
	padding: 10px 0 0 0;
	line-height: 120%;
}

a, a:visited { 
	color: #3ec1c5; 
	text-decoration: underline; 
	padding-bottom: 2px; 
}

a:hover { 
	color: #777; 
	padding-bottom: 2px; 
}

a:active { 
	color: #e21a41; 
	padding-bottom: 2px; 
	position: relative; 
	top: 1px; 
}

header { 
	padding: 0 0 5px 0; 
	width: 100%; 
	background-color: #000; 
	margin: 0 0 25px 0; 
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	position: fixed; 
	z-index: 10; 
}

#headercontainer { 
	width: 950px; 
	margin: 0 auto; 
	position: relative; 
}

.contentcontainer { 
	clear: both;
	width: 950px;
	margin: 0 auto;
}

/*------------------------------------------------- logo ------*/
h1#cyLogo {
	float: left;
	display: inline;
	width: 215px;
	height: 97px;
}

h1#cyLogo a {
	background: transparent url(../images/topLogoBox.png) no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	width: 215px;
	padding: 97px 0 0 0;
	text-decoration: none; 
	border-bottom: none; 
}

/*------------------------------------------------- navigation ------*/
nav { 
	float: left;
	margin: 0 0 0 370px;
	display: inline;
	height: 97px
}

.navigation {
	float: left;
	height: 97px;
	display: inline;
}

.topNavItem { display: inline; }

.topNavitem + .popup { display: none; }

/*.topNavitem:hover + .popup { visibility: visible;}*/

.topNavitem a, .topNavitem a:visited {
	float: left;
	font-size: 14px;
	color: #777;
	height: 30px;
	padding: 43px 15px 15px 15px;
	text-align: center;
	text-decoration: none;
	height: 52px;
	border-top: 1px solid #000;
	display: inline;
}

.topNavitem a:hover { 
	color: #ddd;
	background: transparent url(../images/navHover.png) repeat-x;
	border-top: 1px solid #777;
}

.popup {
	color: #3ec1c5;
	font-size: 11px;
	text-align: center;
	padding: 10px 0 0 0;
	display: none;
}

/*------------------------------------------------- sections ------*/
section { 
	margin-bottom: 100px; 
}

#home, #portfolio, #about {
	clear: both;
	padding: 130px 0 0 0;
}

/*------------------------------------------------- home ------*/
#home {
	width: 100%;
	background: #000 url(../images/homebg.png) repeat-x bottom;
	padding: 110px 0 0 0;
	margin-bottom: 0;
}

/*------------------------------------------------- gallery ------*/
#home .contentcontainer {
	background: transparent url(../images/homegradient.png) no-repeat bottom;
	padding: 0 0 30px 0;
}

#myGallery {
	float: left;
	width: 450px;
	height: 365px;
}

#myGallery img {
	border: 2px solid #333;
}

#myGallery #recentworksribbon {
	position: absolute;
	width: 82px;
	height: 80px;
	top: 58px;
	background: transparent url(../images/recentworks.png) no-repeat;
}

#myGallery #recentworksribbon span { visibility: hidden;}

a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}

.spacegallery {
	position: relative;
	overflow: hidden;
}

.spacegallery img {
	position: absolute;
	left: 47%;
}

.spacegallery a {
	position: absolute;
	z-index: 1000;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(images/blank.gif);
}

#rightboxhome {
	float: left;
	margin: 65px 0 0 0;
	width: 490px;
	height: 270px;
}

.bottomp { padding: 0 0 25px 0; }

/*
#viewportbtn, #viewportbtn:visited {
	margin: 30px 0 0 275px;
	display: block;
	width: 225px;
	height: 39px;
	background: url(../images/viewportbtn.png) no-repeat 0 0;
}

#viewportbtn:hover { 
	background: url(../images/viewportbtn.png) no-repeat 0 -41px;
}

#viewportbtn span {
	display: none;
}
*/

#viewportbtn, #viewportbtn:visited,
#connectbtn, #connectbtn:visited { 
	float: right;
	border: none; 
	cursor: pointer; 
	color: #fff; 
	text-decoration: none;
	background-color: #3ec1c5; 
	padding: 8px 38px 5px 38px; 
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px; 
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); 
	border-bottom: 1px solid #777; 
	border-top: 1px solid #fff;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #31a0a3),
	    color-stop(0.62, #3ec1c5)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #31a0a3 23%,
	    #3ec1c5 62%
	);
}

#viewportbtn:hover, #connectbtn:hover { 
	color: #fff; 
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
	background-color: #31a0a3;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #29878b),
	    color-stop(0.62, #31a0a3)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #29878b 23%,
	    #31a0a3 62%
	);
}

#viewportbtn:active, #connectbtn:active { position: relative; top: 1px; }

#questions {
	clear: both;
	margin: 0 auto;
	background: url(../images/subsectionbottombg.png) bottom repeat-x;
	padding: 50px 0 0 0;
}

.subsection {
	color: #ccc;
	padding-bottom: 10px;
	margin- bottom: 10px;	
}

.subsection h3 { color: #ccc;}

#subleft, #subright {
	float: left;
}

#subright {
	font-size: 18px;
	margin: 0 0 0 10px;
}

#subright p { padding-top: 5px; }

#questions ul {
	padding: 10px 0 10px 0;
	border-top: dotted 1px #ccc;
}

#questions li {
	float: left;
	width: 280px;
	display: inline;
	padding: 5px;
	margin: 10px 25px 50px 0;
}

.myquestions {
	font-size: 16px;
	color: #eb1a41;
	margin: 0 0 10px 0;
}

.rightp { text-align: right;}

/*------------------------------------------------- portfolio ------*/
#portfolio {}

ul.portfolioNavFilter {
	margin: 15px 0 0 0;
	text-transform: uppercase;
}

ul.portfolioNavFilter li {
	list-style-type: none;
	display: inline;
	padding: 0 10px 0 10px;
	border-right: #ccc thin solid;
}

ul.portfolioNavFilter li:first-child {
	padding-left: 0;
	margin-left: 0;
}

ul.portfolioNavFilter li:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

ul.portfolioNavFilter li a,
ul.portfolioNavFilter li a:visited {
	color: #ccc;
}

ul.portfolioNavFilter li a:hover,
ul.portfolioNavFilter li.current a {
	color: #3ec1c5;
}

#featuredWork {
	float: left;
	margin: 20px 0 0 0;
}

#featuredWork .workbox {
	float: left;
	display: inline;
	width: 280px;
	height: 410px;
	display: inline;
	padding: 5px;
	margin: 30px 15px 0 0;
	background: #fff;
	border: solid 5px #fff;
	-webkit-box-shadow: 2px 2px 5px rgba(140, 140, 140, 0.1); 
	-moz-box-shadow: 2px 2px 5px rgba(140, 140, 140, 0.1); 
}

#featuredWork .workbox:hover {
	background: #f3f3f3;
	border: solid 5px #f3f3f3;
	-webkit-box-shadow: 2px 2px 5px rgba(153, 153, 153, .5); 
	-moz-box-shadow: 2px 2px 5px rgba(153, 153, 153, .5);
}

#featuredWork .workbox:hover p.desc {
	color: #777;
}

#featuredWork .workbox img {
	border: 1px #fff solid;
	margin-bottom: 10px;
}

#featuredWork .workbox img:hover {
	border: 1px #3ec1c5 solid;
}

#featuredWork .workbox .coloredp {
	color: #e21a41;
	padding-top: 0;
}

#featuredWork .workbox .role {
	font-weight: bold;
	margin-bottom: 0;
}


/*------------------------------------------------- about ------*/
#about {
	background: url(../images/aboutbgtop.png) repeat-x;
}

#leftboxabout {
	float: left;
	width: 500px;
	margin: 30px 0 30px 0;
}

#rightboxabout {
	float: left;
	width: 380px;
	margin: 114px 0 0 0;
	padding: 0 0 0 60px;
}

#cypic {
	float: left;
	width: 238px;
	height: 353px;
	padding: 5px;
	border: solid 1px #ddd;
	background: #fff;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#cyinfo {
	width: 180px;
	float: left;
	margin: 55px 0 0 70px;
}

#cyinfo h1 {
	font-size: 18px;
	color: #777;
	font-weight: normal;
}

#cyinfo ul {
	list-style-image: url(../images/check.png);
	margin: 15px 0 0 25px;
	color: #777;
}

#cyinfo ul li {
	padding: 2px 0 5px 0;
}

#cyinfo li.xout {
	list-style-image: url(../images/xmark.png);
	text-decoration: line-through;
}

.resume {
	float: left;
	margin: 30px 0 0 0;
}

.resume img {
	float: left;
	margin-right: 10px;
}

#connectbtn {
	margin: 15px 0 0 0;
}

#testimonials {
	clear: both;
	padding: 50px 0 0 0;
}

#testimonials h3 { 
	color: #ddd;
	padding: 0 0 10px 0;
}

#testimonials ul {
	padding: 20px 0 0 0;
	border-top: dotted 1px #ccc;
}

#testimonials li {
	float: left;
	width: 280px;
	display: inline;
	padding: 5px;
	margin: 10px 25px 70px 0;
}

#testimonials p {padding: 0;}

.clients {
	font-weight: bold;
	color: #777;
	margin: 10px 0 0 0;
}

/*------------------------------------------------- contact ------*/
#contact { 
	background: #171717 url(../images/contactbg.png) repeat-x;
	margin-bottom: 0;
	padding-bottom: 100px;
	border-bottom: #333 solid 1px;
	color: #777;
}

#contact .contentcontainer { background: transparent url(../images/contactgradient.png) no-repeat top; }

#contact h3.topspace { padding: 130px 0 0 0; }

.leftcontent {
	float: left;
	width: 200px;
	margin: 50px 0 0 0;
} 

#contact .resume {
	width: 165px;
	margin: 0 0 30px 0;
	
}

#contact p { padding: 0; }

#contact a:hover { color: #eee; }

#contact .topp { 
	margin-top: 30px;
	color: #aaa;
}

#contact_greeting {
	padding: 0 0 20px 110px;
	color: #555;
}

#contactform {
	float: right;
	width: 630px;
	margin: 50px 0 0 0;
}

input[type="text"], input[type="email"] { 
	float: left; 
	width: 493px; 
	margin-bottom: 20px;
}

textarea { 
	width: 493px; 
	height: 150px; 
}

label { 
	float: left;
	color: #777; 
	width: 100px;
	padding: 13px 10px 0 0;
	text-align: right;
}

input, textarea { 
	background: #181818;
	border: 1px dotted #555; 
	padding: 10px; 
	font-family: Keffeesatz, Arial; 
	color: #777; 
	font-size: 16px; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
	margin-bottom: 5px; 
}

input:focus, textarea:focus {
	border: 1px solid #333; 
	border-left: 1px solid #777;
	border-top: 1px solid #777;
	background: #131313;
}

input[type="submit"] { 
	float: right;
	border: none; 
	margin: 15px 4px 0 0;
	cursor: pointer; 
	color: #fff; 
	font-size: 14px; 
	text-decoration: none;
	background-color: #4c4c4c; 
	padding: 5px 38px 5px 38px; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-box-shadow: 2px 2px 5px rgba(5, 5, 5, 0.4); 
	-moz-box-shadow: 2px 2px 5px rgba(5, 5, 5, 0.4); 
	border-bottom: 1px solid #333;
	border-top: 1px solid #aaa;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #292929),
	    color-stop(0.62, #4c4c4c)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #292929 23%,
	    #4c4c4c 62%
	);
}

input[type="submit"]:hover { 
	color: #fff; 
	background-color: #31a0a3;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.23, #29878b),
	    color-stop(0.62, #31a0a3)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #29878b 23%,
	    #31a0a3 62%
	);
}

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

/*------------------------------------------------- footer ------*/
footer { 
	width: 100%; 
	background: #000;
	padding: 0 0 50px 0;
	font-size: 11px;
	color: #666;
	border-bottom: 5px solid #3ec1c5;
}

footer .contentcontainer { 
	padding: 50px 0 0 0;
}

footer ul { 
	float: left;
	width: 210px;
}

footer ul li { 
	list-style-type: none;
	padding: 2px;
}

footer ul li:first-child {
	padding: 0 0 10px 0;
	color: #999;
}

footer a:link, footer a:visited {
	color: #bbb;
}

footer a:hover {
	color: #eee;
}

footer .topp {
	padding: 30px 0 0 0;
}

footer .bottomp {
	padding: 0 0 10px 0;
}

#leftfooter {
	float: left;
}

#rightfooter {
	float: right;
}

/*------------------------------------------------- thank you page ------*/
#thanks #home .contentcontainer {
	width: 700px;
	margin: 0 auto;
	background: transparent url(../images/thanksgradient.png) no-repeat bottom;
}

#thanks #myGallery {
	position: absolute;
	width: 220px;
	height: 365px;
	margin: -16px 0 0 350px;
	background: transparent url(../images/cy_thanks.png) bottom no-repeat;
}

#thanks footer {
	background: #fff;
	border-bottom: none;
}