/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 4, 2011 */

@font-face {
	font-family: 'MuseoSlab500';
	src: url('../fonts/museo_slab_500-webfont.eot');
	src: local('☺'), url('museo_slab_500-webfont.woff') format('woff'), url('museo_slab_500-webfont.ttf') format('truetype'), url('museo_slab_500-webfont.svg#webfonth7ZuKjlS') format('svg');
	font-weight: normal;
	font-style: normal;
}



.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}

body {
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 13px;
	text-align: center;
	background-image: url(../images/backgrounds/body.jpg);
	
}
#wrapper {
	background: url(../images/backgrounds/body_top.jpg);
	background-repeat: repeat-x;
}

#bottom-bar {
	margin-top: 20px;
	background-image: url(../images/backgrounds/bottom.png);
	height: 30px;
	color: white;
	line-height: 30px;
	text-align: center;
	border-top: 1px solid white;
	font-size: 10px;
	a {
		color: #c3dce2;
	}
}
#container {
	width: 940px;
	margin: 0 auto;
	text-align: left;
}
#header-wrapper {
	height: 230px;
	background-image: url(../images/header.jpg);
	background-position: 50% top;
	background-repeat: no-repeat;
	position: relative;
  #header {
    height: 230px;
    width: 940px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    a#jupiter-product {
      display: block;
      position: absolute;
      left: 29px;
      top: 10px;
    }
    #dl-funcunit, #try-funcit {
      position: absolute;
      width: 189px;
      height: 100px;
      top: 69px;
      right: 210px; 
      a {
        color: #6a6a6a;
        font-size: 11px;
        font-weight: bold;
        text-shadow: 0px 1px white;
        strong {
          font-size: 24px;
          font-weight: bold;
          font-family: Helvetica, Arial, sans-serif;
          color: #005a94;
          text-shadow: 0px 2px #bfbfbf;
          letter-spacing: -1px;
          margin-top: 20px;
          display: block;
          span {
            background: #005a94;
            color: white;
            font-size: 12px;
            text-shadow: 0px -1px #004370;
            padding: 3px 5px;
            letter-spacing: 0px;
            -webkit-border-radius: 3px;
        		-moz-border-radius: 3px;
        		border-radius: 3px;
        		line-height: 10px;
        		vertical-align: middle;
          }
        }
      }
      a:hover {
        color: #005a94;
        border: none;
      }
      a.button {
        display: block;
        width: 110px;
        margin-left: 37px;
        line-height: 25px;
        height: 25px;
        color: white;
        font-family: MuseoSlab500;
        font-weight: normal;
        font-size: 13px;
        text-shadow: 0px 1px #102532;
        background: url(../images/backgrounds/dl_button.png);
        margin-top: 5px;
      }
      a.button:hover {
        text-decoration: none;
        border: none;
        background-position: 0 -25px;
      }
      a.button:active {
        background-position: 0 -50px;
        text-shadow: none;
        line-height: 27px;
      }
    }
    #try-funcit {
      right: 20px;
    }
  }
}
#navigation {
	height: 50px;
	background-image: url(../images/backgrounds/navigation.png);
	ul {
		line-height: 49px;
		margin-left: 12px;
		li {
			float: left;
			a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
				text-shadow: 0px -1px #00484d;
				font-size: 16px;
				color: #F0F0F0;
			}
			a:hover, a.active {
				background-image: url(../images/backgrounds/link_hover.png);
				background-position: center bottom;
				background-repeat: no-repeat;
				color: #afd042;
				text-shadow: 0px 1px 3px #333;
				text-decoration: none;
				border-bottom:none;
			}
		}
	}
}
#content-wrapper {
	padding: 0px 20px 20px;
	#content {
		width: 650px;
		margin-right: 20px;
		float: left;
		h2, h3, h4 {
			font-family: MuseoSlab500;
			font-size: 22px;
			margin: 20px 0 10px;
			padding-bottom: 10px;
			border-bottom: 1px dotted #1e1f1c;
			color: #1e1f1c;
			text-shadow: 0px 1px white;
		}
		h3, h4 {
			border: none;
			font-size: 18px;
			margin: 10px 0;
			padding-bottom: 0;
		}
		h4 {
			font-size: 16px;
		}
		p {
			color: #1e1f1c;
			margin-bottom: 10px;
			line-height: 18px;
		}
		ul {
		  list-style: disc outside;
		  color: #1e1f1c;
		  margin-left: 15px;
		  li {
				padding: 1px 0px;
				line-height: 16px;
			}
			margin-bottom:10px;
		}
		ol {
			list-style: decimal inside;
			li {
				padding: 1px 0px;
			}
			margin-bottom:10px;
		}
		
		blockquote {
			background: url(../images/backgrounds/quote.png);
			background-repeat: no-repeat;
			background-position: left 10px;
			padding-left: 25px;
			padding-top: 10px;
			p {
				margin: 0;
				.highlight {
					background: #c3dce2;
				}
			}
		}
		cite {
			display: block;
			margin: 5px 0 10px;
			padding-left: 25px;
			font-size: 12px;
			color: #444;
		}
		#getting-started {
		  ol {
		    list-style: decimal outside;
		    margin-left: 20px;
		    li {
		      margin-bottom: 10px;
		      pre {
		        margin: 5px 0;
		      }
		    }
		  }
		}
		.info {
      margin-top: 40px;
      img {
        float: left;
      }
      .part {
        float: left;
        margin-left: 10px;
        height: 150px;
        width: 455px;
        margin-bottom: 20px;
        h2 {
          margin: 0;
          border: none;
          font-weight: normal;
          font-size: 18px;
        }
      }
      .last-part {
        height: auto;
      }
    }
		table.inside {
			margin: 10px 0 20px;
			border-top: 1px solid #afc9cf;
			border-bottom: 1px dotted #afc9cf;
			td {
				padding: 15px 10px;
			}
			tr.odd td {
				background: #c3dce2
			}
			pre {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 18px;
			}
			a {
				text-decoration: none;
				text-shadow: 0px 1px white;
				color: #2c2929;
				font-weight: bold;
				font-size: 12px;
			}
			a:hover {
				border-bottom: 1px dotted #333;
			}
		}
		h2#blog-title {
			position: relative;
			a {
				position: absolute;
				display: block;
				right: 0;
				top: -3px;
				bottom: 5px;
			}
			a:hover {
				border: none;
			}
		}
		ul#blog {
			list-style-type: none;
			.read-rest {
				font-size: 11px;
			}
			p {
				margin:0 0 5px;
			}
			h3 {
				font-family: MuseoSlab500;
				font-size: 18px;
				margin: 0 0 5px;
				list-style-position:outside;
			}
			li {
				position: relative;
				padding-left: 65px;
				min-height: 60px;
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px dotted #999;
			}
			.date {
				float:left;
				margin-left:-65px;
				display:inline;
				width: 49px;
				height: 59px;
				background: url(../images/backgrounds/calendar.png);
				color: white;
				text-align: center;
				.month, .year {
					font-size: 10px;
					text-transform: uppercase;
					letter-spacing: 1px;
					padding-top: 3px;
					color: #c3dce2;
				}
				.day {
					font-family: MuseoSlab500;
					font-size: 24px;
					margin-top: 5px;
					text-shadow: 0px 1px #666;
				}
				.year {
					padding-top: 0px;
				}
			}
		}
		ul.team {
			list-style-type: none;
			li {
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px dotted #999;
				p {
					margin: 0
				}
				h4 {
					margin-top: 0;
				}
				img {
					float: left;
					border: 5px solid #a6cdd8;
					margin: 0 10px 0 0;
				}
			}
		}
		ul.github {
			li {
				margin-bottom: 10px;
				a {
					font-weight: bold;
				}
				list-style:none;
			}
			code {
				display: block;
				margin:0;
				margin-top: 12px;
				padding: 10px;
				background: #c3dce2;
				line-height: 18px;
				.normal {
					font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
				}
			}
		}
		.download {
			padding-top: 10px;
			margin-bottom: 5px;
			min-height: 50px;
			.download-link {
				display: block;
				float: left;
				margin-right: 20px;
				width: 247px;
				padding-left: 68px;
				height: 50px;
				background: url(../images/backgrounds/download/funcunit.png);
				color: white;
				strong {
					display: block;
					font-family: MuseoSlab500;
					font-size: 18px;
					padding-top: 8px;
					font-weight: normal;
				}
			}
			a.download-link:hover {
				border: none;
			}
		}
		#download-stealjs {
			a.download-link {
				background: url(../images/backgrounds/download/stealjs.png);
			}
		}
		#download-documentjs {
			a.download-link {
				background: url(../images/backgrounds/download/documentjs.png);
			}
		}
		#download-jquerymx {
			margin-bottom: 0;
			.download-link {
				background: url(../images/backgrounds/download/jquerymx.png);
				width: 582px;
				float: none;
				a {
					color: #c3dce2;
				}
				a:hover {
					border-color: white;
				}
			}
			.description {
				float: right;
				margin: -42px 15px 0 0;
				color: white;
				width: 155px;
				line-height: 18px;
			}
		}
		#download-javascriptmvc {
			a.download-link {
				color: #2e352b;
				width: 356px;
				height: 71px;
				padding-left: 95px;
				background: url(../images/backgrounds/download/javascriptmvc.png);
				text-shadow: 0px 1px #b5c074;
				strong {
					font-size: 24px;
					margin-bottom: 3px;
					padding-top: 18px;
				}
			}
			a.download-link:hover {
				color: white;
				text-shadow: 0px 1px #2e352b;
			}
		}
		iframe {
		    background: none repeat scroll 0 0 transparent;
		    border: medium none;
		    height: 1916px;
		    margin: 0;
		    padding: 0;
		    width: 100%;
		}
		
	}
	#sidebar {
		width: 230px;
		float: left;
		.greenbox {
			padding: 15px;
		}
		#what-is-funcunit {
			margin-top: 41px;
			text-shadow: 0px 1px #9dc619;
			line-height: 16px;
		}
	}
}

#twitter-feed-wrapper {
	margin-top: 15px;
	word-wrap:break-word;
	a {
		border: none;
	}
	#twitter-feed {
		font-size: 12px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background: #242e24;
		color: #E0E0E0;
		li {
			padding: 10px 15px;
			border-bottom: 1px solid #2b352b;
			p {
				line-height: 16px;
				a {
					color: #afc9cf;
					text-decoration: none;
				}
				a:hover {
					border-bottom: 1px dotted white;
				}
			}
		}
		
		.date {
			color: #a39696;
			font-size: 10px;
			margin-top: 3px;
		}
	}
}

.greenbox {
	background-color: #9dc619;
	background-repeat: repeat-x;
	background-image: url(../images/backgrounds/greenbox.png);
	background-position: bottom;
	color: #1b1f1b;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a {
	color: #b03a00;
	text-decoration: none;
}
a:hover {
	border-bottom: 1px dotted #333;
}

pre {
	background: #c3dce2;
	margin: 0 0 10px;
	padding: 10px;
	font-size: 12px;
	line-height: 18px;
}

#jmvc-stack {
  margin-top: 20px;
  display: block;
}
#jmvc-stack:hover {
  border: none
}
.small {
  font-size: 85%;
  color: #666;
}


.step {
  border-bottom: 1px dotted #333333;
  position: relative;
  margin: 20px 0 0 40px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #363636;
  float:left;
  width:570px;
  text-shadow: 0px 1px white;
}
.step a { color: #363636; }
.step a:hover { text-decoration: none; }
.step #funcit-link {
  display: inline-block;
  right: 50px;
  color: white;
  padding: 0 10px;
  background: #414141;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #242424;
  text-shadow: 0px 1px black;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
}
.step img {
  display: block;
  margin-top: 10px;
  margin-left: -3px;
}
.step #arrow {
  position: absolute;
  right: 0;
  margin-top: -63px;
  margin-left: 0;
}
.step .number {
  position: absolute;
  margin: -7px 0 0 -40px;
  height: 29px;
  width: 28px;
  line-height: 29px;
  color: white;
  text-shadow: 0px 1px #364c18;
  text-align: center;
  font-size: 18px;
  background: url(../images/number.png);
}
.last-step {
  padding-bottom: 0;
  border-bottom: none;
}