/* Styles.css
	Site: 
	Author: 
	Date:
*/


body {
	margin: 0px;
	padding: 0px;
	
	font-family: Helvetica;
	font-size: 14px;
	line-height: 20px;
}


/* ! Links & Buttons */
/* --------------------------------------------------------------------------------- Links & Buttons
*/

a, a:visited {
}
a:hover, a:active {
}




/* ! Headers */
/* --------------------------------------------------------------------------------- Headers
*/

h1 {
	color: #8E9699;
	font-size: 40px;
	font-style: italic;
	font-weight: 800;
	margin-bottom: 0px;
}
h2 {
	color: #252C33;
	font-size: 30px;
	margin-bottom: 0px;
	font-style: italic;
}
h3 {
}



/* ! Standards & Hacks */
/* ------------------------------------------------------------- Standards & Hacks
*/
.clearer {
	display: block;
	clear: both;
	height: 1px;
	line-height: 1px;
	margin-top: -1px;
	text-indent: -9999px;
}

ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.float-left {
	display: block;
	float: left;
	margin: 0px 10px 10px 0px;
}
.float-right {
	display: block;
	float: right;
	margin: 0px 0px 10px 10px;
}
.clear {
	clear: both;
}
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}
.clear-none {
	clear: none;
}


img {
	border: none;
}
.image {
}
.image img {	
	display: block;
	margin: 0px;
	border: 1px solid #638B82;
}
.image .caption {
	display: block;
	/* text-align: center; */
	text-transform: uppercase;
	color: #638B82;
	margin: 4px 0px;
}
.image .caption.center {
	text-align: center;
}

.image .sub-caption {
	display: block;
	color: #000;
	font-size: 14px;
}

.image.float-left {
	margin: 0px 10px 10px 0px;
}
.image.float-right {
	margin: 0px 0px 10px 10px;
}


.justify {
	text-align: justify;
}


blockquote {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	font-style: italic;
}
blockquote .author {
	display: block;
	margin-top: 10px;
	font-style: normal;
	text-align: right;
}


.serif {
	font-family: "Sabon Roman", "Times New Roman", Georgia, serif;
}
.sans-serif {
	font-family: Helvetica, Verdana, Sans-serif;
}



/* ! Status Styles  */
/* --------------------------------------------------------------------------------- 
 */
.highlight,
.neutral {
	background-color:#dff4ff;
    border: 1px solid #c2e1ef;
    color:#336699;
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.error, 
.negative {
	background-color: #fbe6f2;
	border: 1px solid #d893a1;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.positive {
	background-color:#E6EFC2;
    border: 1px solid #C6D880;
    color:#529214;
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

/* Specific errors */
div.error,
div.positive,
div.negative,
p.error,
p.positive {
	padding: 10px;
	margin-top: 0px;
}
span.error {
	background-color: transparent;
	border: none;
	color: #d893a1;
	font-style: italic;
	font-size: 12px;
}

p.highlight {
	padding: 10px;
}



/* ! Structure */
/* --------------------------------------------------------------------------------- Structure
*/

#site {
}
#header {
	margin: 0px auto;
	background-image: url(../images/header-bg.png);
	background-position: center top;
	background-repeat: repeat-x;
}
#logo {
	display: block;
	text-indent: -9999px;
	background-image: url(../images/logo.png);
	width: 192px;
	height: 145px;
	margin: 0px auto;
	margin-top: 20px;
	margin-bottom: 30px;
}
#diagram {
	display: block;
	background-image: url(../images/diagram.png);
	width: 903px;
	height: 242px;
	margin: 0px auto;
	margin-left: -10px;
}
#main {
	color: #7F8585;
}
#footer {
	background-color: #727878;
	padding-top: 20px;
	color: #B1B8B8;
	padding-bottom: 20px;
}
.content {
	width: 900px;
	margin: 0px auto;
	position: relative;
}
.section {
	background-image: url(../images/hr.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	padding: 25px 0px 25px 20px;
	
}
.section p {
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 15px;
	
}
.section p a {
	color: #7F8585;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #7F8585;
}
.section.last {
	background-image: none;
}

/* Navigation  */
/* --------------------------------------------------------------------------------- Navigation
*/

#navigation {
}

#nav1, #nav2 {
	position: absolute;
	top: 60px;
}
#nav1 {
	left: 0px;
}
#nav2 {
	right: 0px;
}

.navigation {
	
}
.navigation li {
	display: block;
	float: left;
	margin: 0px 20px;
}

.navigation li a {
	display: block;
	text-decoration: none;
	padding: 5px 0px;
	font-weight: bold;
	color: #A7ACAD;
}

/* Home  */
/* --------------------------------------------------------------------------------- Home
*/
#main .description {
	font-size: 19px;
	color: #7F8585;
	font-weight: 300;
}
#intro .description {
	width: 564px;
	display: block;
	float: left;
	margin-top: 7px;
}
#intro .section-title {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
a.button {
	display: block;
	background-image: url(../images/button-large.png);
	width: 255px;
	height: 73px;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
}
a:hover.button {
	background-position: 0px -73px;
}
.button span {
	display: block;
}
.button .title {
	font-size: 23px;
	margin-top: 15px;
	display: block;
}
.button .sub-title {
	font-size: 21px;
	margin-top: 3px;
	font-style: italic;
	
}
.button span.title.large {
	display: block;
	margin-top: 27px;
	font-size: 25px;
}
#signup-button-home h2 {
	display: block;
	font-style: italic;
	margin-top: 24px;
	font-size: 28px !important;
	color: #ffffff;
}
#intro a.button {
	display: block;
	float: right;
	margin-top: 7px;
	margin-right: 10px;

}
.first-word {
	color: #252C33;
}

.screenshots li {
	display: block;
	float: left;
	margin-bottom: 38px;
	margin-right: 18px;
	
}
.screenshots h3 {
	width: 185px;
	margin-top: 5px;
}
.screenshots a {
	display: block;
	position: relative;
	margin-right: 20px;
	-webkit-box-shadow:	1px 1px 7px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:	1px 1px 7px rgba(0, 0, 0, 0.3);
	width: 185px;
	height: 125px;

}
.screenshots a.video {
	background-image: url(../images/screenshot_movie.png);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
/*
.screenshots a:hover.video {
	background-position: 0px 0px;
}
*/
.screenshots a.last {
	margin-right: 0px;
}

#api-list li {
	width: 194px;
	display: block;
	float: left;
	padding-right: 13px;
	padding-left: 13px;
	background-image: url(../images/hr-horizontal.png);
	background-position: right 45px;
	background-repeat: no-repeat;
	text-align: center;
}
#api-list li.last {
	background-image: none;
}
#api-list li.first {
	padding-left: 0px;
}
#api-list li h2 {
	height: 60px;
}
#api-list li p {
	line-height: 16px;
	margin: 5px 0px;	
}

/* footer  */
/* --------------------------------------------------------------------------------- Footer
*/
#footer .content {
	padding-left: 30px;
}
#footer h1 {
	font-size: 28px;
	color: #ffffff;
}
#footer a {
	color: #B1B8B8;
}
#footer a:hover {
	color: #FFFFFF;
}

#footer .description {
	font-size: 16px;
}
#footer .col.left {
	width: 410px;
	margin-right: 40px;
}
.col {
	margin-right: 50px;
	width: 400px;
}
.col.right {
	margin-right: 0px;
}
.left {
	display: block;
	float: left;
}
.right {
	display: block;
	float: left;
}

/* ! Twitter button  */
/* --------------------------------------------------------------------------------- 
 */
#twitter {
	margin-top: 20px;
	background: transparent url(../images/twitter-bird.png) no-repeat scroll left top;
	padding: 0px 0px 0px 100px;
	display: block;
	font-size: 24px;
	height: 55px;
	text-decoration: none;
	background-position: 0px 0px;
	margin-bottom: 10px;
	
}
a:hover#twitter {
	background-position: 0px -55px;
}
#footer a#twitter {
	color: #ffffff;
}
/*
#twitter:hover {
	background-position: 0px -75px;
}
*/
#twitter .url {
	display: block;
	text-decoration: none !important;
}
#twitter span {
	color: #B1B8B8;
	font-size: 16px;
}
#twitter span.title {
	font-size: 24px;
	padding-top: 10px;
	display: block;
	color: white;
}
/* ! Aim button  */
/* --------------------------------------------------------------------------------- 
 */

.aim {
	margin-top: 20px;
	background: transparent url(../images/ichat-bubble.png) no-repeat scroll left top;
	padding: 0px 0px 0px 100px;
	display: block;
	height: 61px;
	font-size: 24px;
	text-decoration: none;
	background-position: 0px 0px;
}
a:hover.aim {
	background-position: 0px -61px;
} 

#footer a.aim {
	color: #ffffff;
}
/*
.aim:hover {
	background-position: 0px -67px;
	text-decoration: none;
}
*/
.aim .url {
	display: block;
	text-decoration: none !important;
	padding-left: 15px;
}

.aim span {
	background: transparent url(http://big.oscar.aol.com/osmekcms?on_url=http://dev.osmek.com/assets/images/icons/active-active.png&off_url=http://dev.osmek.com/assets/images/icons/active-inactive.png) no-repeat scroll left 2px;
	color: #B1B8B8;
	font-size: 16px;
	
}
.aim span.title {
	font-size: 24px;
	padding-top: 10px;
	display: block;
	background: none;
	color: white;
}

/* Signup   */
/* --------------------------------------------------------------------------------- Signup
*/

#accounts a {
	float: left;
	color: #7F8585;
	text-align: center;
	text-decoration: none;
	background-color: #FAFAFA;
	width: 159px;
	margin-right: 20px;
	padding-bottom: 15px;
	-webkit-box-shadow:	1px 1px 7px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:	1px 1px 7px rgba(0, 0, 0, 0.3);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
#accounts a.last {
	margin-right: 0px;
}
#accounts a.selected{
	background-color: #727878;
	color: #FFFFFF;
}
#accounts h2{
	margin-top: 15px;
	margin-bottom: 10px;
}
#accounts h3{
	margin: 0px;
}

#accounts a.selected h2{
	color: #FFFFFF;
}
#signup-form{
	margin: 0px auto;
	background-color: #f7f7f7;
	border: 1px solid #efefef;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 15px 40px;
	margin-top: 20px;
}
#signup-form h3.form-title {
	border-top: 1px solid #FFFFFF;
	padding-top: 15px;
}
#signup-form span.label {
	width: 110px;
	display: block;
	float: left;
	margin-top: 8px;
	margin-right: 10px;
	text-align: right;
}
#signup-form input {
	width: 230px;
	float: left;
	display: block;
	margin-right: 20px;
}
#signup-form input:focus {
	border: 1px solid #6dace2;
	outline: none;
	-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, .3);
}
#signup-form span.small.label {
	width: 50px !important;
}
#signup-form span.small.label {
	width: 50px !important;
}

input.small {
	width: 40px !important;
}
#signup-form select {
	float: left;
	display: block;
	margin-top: 10px;
}
#signup-form button {
	background-image: url(../images/create-account-button.png);
	width: 254px;
	height: 41px;
	display: block;
	float: left;
	border: none;
	background-color: transparent;
	margin-top: 5px;
	cursor: pointer;
	text-align: center;
	font-size: 17px;
	color: #ffffff;
	
}
#signup-form button:hover {
	background-position: 0px -41px;
}

.note {
	margin-top: 10px;
	float: left;
	display: block;
}
#total_note {
	margin-top: 15px;
	float: left;
	display: block;
}
/* ! Forms  */
/* --------------------------------------------------------------------------------- 
 */
input {
	border: 1px solid #DDDDDD;
	padding: 10px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #FFFFFF;
}
select {
	margin-top: 10px;
	margin-right: 10px;
}
label {
	display: block;
}

/* ! Pricing  */
/* --------------------------------------------------------------------------------- Pricing
 */
 
#pricing h1{
	margin-bottom: 25px;
}

/* ! Success  */
/* --------------------------------------------------------------------------------- Success
 */
#success-button {
	margin-top: 10px;
	display: block;
	margin-left: 45px;
}

h2 a {
	color: #7F8585;
}