/* Based on the HTML5 Boilerplate */

@font-face {
    font-family: Cachet;
    src: url('../fonts/CachetStd-Medium.otf');
}

@font-face {
    font-family: Cachet;
    font-weight: bold;
    src: url('../fonts/CachetStd-Bold.otf');
}

html {
	color:#000;
}

body {
	color: gray;
	background-image: url('../img/background.png');
	background-attachment: fixed;
    margin: 0;
    font-family: Cachet, sans-serif;
    font-size: 1em;
    text-shadow: 0 1px 0 white;
    line-height: 1.4;
}

::-moz-selection { background: #ff0060; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
::selection { background: #ff0060; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }

a { color: #ff0060; }
a:visited { color: #ff0060; }
a:hover { color: #ff0060; }
a:focus { outline: thin dotted; }
b, strong { font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

.wrapper {
	width: 800px;
	margin: 0px auto;
}

.main-nav {
    top: 0px;
    height: 60px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    z-index: 49;
}

.main-nav ul {
    list-style: none;
    position: relative;
    padding: 0;
    height: 40px;
    width: 540px;
    float: right;
    margin: 0px;
    margin-right: 10px;
}

.main-nav li {
    float: right;
    text-align: center;
    margin: 0px 5px;
}

.main-nav a:link, .main-nav a:visited {
    color: #ff0060;
    text-decoration: none;
    display: block;
    padding: 0px 10px;
    height: 42px;
    padding-top: 18px;
    -webkit-transition-property: background;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 150ms;
	-moz-transition-property: background;
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 150ms;
	transition-property: background;
	transition-timing-function: ease-out;
	transition-duration: 150ms;
}

.main-nav a:hover, .nav-selected {
    color: white !important;
    background: #ff0060;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.site-header {
	overflow: hidden;
    z-index: 99;
    height: 60px;
    width: 800px;
    margin: auto;
    margin-top: 20px;
/*
    background: -moz-linear-gradient(top,  rgba(240,240,240,0.75) 0%, rgba(217,217,217,0.75) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,0.75)), color-stop(100%,rgba(217,217,217,0.75)));
    background: -webkit-linear-gradient(top,  rgba(240,240,240,0.75) 0%,rgba(217,217,217,0.75) 100%);
    background: -o-linear-gradient(top,  rgba(240,240,240,0.75) 0%,rgba(217,217,217,0.75) 100%);
    background: -ms-linear-gradient(top,  rgba(240,240,240,0.75) 0%,rgba(217,217,217,0.75) 100%);
    background: linear-gradient(top,  rgba(240,240,240,0.75) 0%,rgba(217,217,217,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bff0f0f0', endColorstr='#bfd9d9d9',GradientType=0 );
    box-shadow: 0px 2px 7px rgba(0,0,0,0.1), 0px 1px 0px white inset;
    -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.1), 0px 1px 0px white inset;
    -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.1), 0px 1px 0px white inset;
    border: 1px solid rgb(200, 200, 200);
*/
    box-shadow: 0px 0px 150px 100px rgba(200, 200, 200, 0.15) inset, 0px 1px 2px 0px rgba(100,100,100,0.1) inset;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.site-header .header-link {
	float: left;
	display: block;
	width: 220px;
	height: 50px;
	margin: 10px 0px 0px 15px;
}

.site-header .header-link:link, .site-header .header-link:visited {
	line-height: 1px;
    text-decoration: none;
    color: #4c4c4c;
}

.site-header .header-link:hover {
	color: black;
}

.site-header h1 {
	font-size: 25px;
	margin-top: 15px;
	font-family: Cachet, sans-serif;
    text-shadow: 0 1px 0 white;
    font-weight: bold;
}

.site-header h2  {
    text-transform: uppercase;
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 20px;
    font-family: Cachet, sans-serif;
    text-shadow: 0 1px 0 white;
    font-weight: bold;
}

.content {
	width: 800px;
    margin: 0px auto;
}

.intro {
	text-align: center;
	font-size: 24px;
	line-height: 70px;
	padding-top: 5px;
	border-bottom: 1px solid rgba(255, 255, 255 ,0.75);
	box-shadow: 0px -1px 0px rgb(200, 200, 200) inset;
    -moz-box-shadow: 0px -1px 0px rgb(200, 200, 200) inset;
    -webkit-box-shadow: 0px -1px 0px rgb(200, 200, 200) inset;
}

.site-footer {
    margin: 30px 0px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 580px;
    height: 50px;
    font-size: 12px;
}

footer ul li {
    float: left;
    padding: 0px 30px;
}

footer a:link, footer a:visited {
	color: #4C4C4C;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
}

footer a:hover {
	color: #FF0060;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
}

.work-example-main-box, .about-main-box {
	height: 500px;
	width: 800px;
	margin: 20px 0px;
	/* background: rgba(0,0,0,0.05); */
	box-shadow: 0px 0px 150px 100px rgba(200, 200, 200, 0.15) inset, 0px 1px 2px 0px rgba(100,100,100,0.1) inset;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.about-main-box {
	height: 360px;
}

.work-example-main-box .left {
	float: left;
	height: 100%;
	width: 35%;
}

.work-example-main-box .left h2 {
	color: #4C4C4C;
	padding: 10px;
	margin: 0;
	margin-top: 34px;
	height: 49px;
	margin-bottom: 20px;
	font-size: 21px;
}

.app-icon img {
	box-shadow: 0px 1px 3px 0px rgba(100,100,100,0.4);
	border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
}

.work-example-main-box .left .app-icon {
	color: #4C4C4C;
	padding: 10px;
	margin: 10px;
	width: 72px;
	height: 72px;
	float: left;
}

.work-example-main-box .left .about {
	color: #4C4C4C;
	padding-left: 10px;
	padding-bottom: 10px;
	margin: 0;
	font-size: 12px;
	text-align: justify;
}

.work-example-main-box .left .about a:link, .work-example-main-box .left .about a:visited {
	color: #4C4C4C;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.work-example-main-box .left .about a:hover {
	color: #FF0060;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
}

.work-example-main-box .right {
	float: right;
	height: 460px;
	width: 480px;
	padding: 10px 20px;
}

.work-example-main-box .right img {
	margin-top: 53px;
}

hr {
	border: none;
	border-top: 1px solid #C8C8C8;
	border-bottom: 1px solid white;
}

.roundabout-holder {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-right: 50px;
	margin-left: 60px;
	height: 480px;
	width: 360px;
}

.roundabout-moveable-item {
	height: 449px;
	width: 228px;
	cursor: pointer;
	background-size: 100% auto !important;
	background-repeat: no-repeat !important;
}

.roundabout-moveable-item-tos {
	height: 290px;
	width: 377px;
	cursor: pointer;
	background-size: 100% auto !important;
}

.roundabout-in-focus {
	cursor: auto;
}

.bullet {
	background: url(images/page-off.png) center center no-repeat;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	margin-right: 5px;
	float: left;
}

.about-content {
	padding: 20px 20px 0px 20px;
}

.highlight-text {
	color: #4C4C4C;
}

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

@media only screen and (min-width: 35em) {

}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}