@font-face
{
  font-family: "opensans";
  src: url(fonts/OpenSans-Regular.ttf) format("truetype");
}

@font-face
{
  font-family: "opensans";
  src: url(fonts/OpenSans-Semibold.ttf) format("truetype");
  font-weight: bold;
}

@font-face
{
  font-family: "opensans";
  src: url(fonts/OpenSans-Italic.ttf) format("truetype");
  font-style: italic;
}

@font-face {
    font-family: 'mainAwFont';
    src: local('MyriadPro-Regular'), url('fonts/MyriadPro-Regular.otf') format('opentype');
}

html { background-color: #f4f4f4; }

body { background-color: #f5f4f4; font-size:16px; color: #222; margin:0px; font-family: opensans, mainAwFont,Arial; text-align: left; }
body.langja { font-size: 14px; }

p {margin-top: 0px; margin-bottom:15px;}
h1, h2, h3 { font-weight: bold; margin: .8em 0; }
h1 {font-size:150%;}

/*a {text-decoration: none; color:#222;}*/
a:hover {text-decoration:underline; color: gray; }
a:visited {text-decoration: none; }
img {border:0px;}
#bgWhite {height: 500px; background-color: white; position: absolute; width:100%; top:0; }
#cloud {background: url(images/awbg.png) repeat-x; background-position: 50% 330px; width:100%; height:1000px; position:absolute;
		top:0; z-index:5; min-width: 1000px; }
#container {margin:0px 50px; position: relative; z-index: 10; }

#content { width: 800px; margin:auto; position: relative;  margin-top: 206px; }
.foggedglass { background: rgba(255,255,255,.5); padding: 20px; border-radius: 10px; margin-bottom: 20px;  }
div.raised { margin-top: -90px; } /* remove top margin from content */

#toppage { text-align: center; }
#toppage .title { font-size: 42px; margin-top: 240px; }
#toppage .quote { margin-top: 157px;  color: #666; font-size: 24px;  line-height: 36px; text-shadow: -1px -1px 3px rgba(255, 255, 255, .8); }
#toppage .quote .line { opacity: 0; }
#toppage .quote .author { line-height: 40px;  font-size: 18px; }

#blogIndex .catdate { color: #bcbcbc; }
#blogIndex .author { color: #666; }

#topHalf {margin-top:-20px;}
#bottomHalf{/*margin-top:40px;*/}
.layout30 {width:30%; float:left; margin: 0px 10px;}
.layout70 {width:65%; float:left; margin: 0;}
.layout70b {width:30%; margin-left: 70%; }
.clear {clear:both;}
.appstore {padding-top:100px; text-align:right;}
.awMain { text-align:center;}
#footer {margin-top:60px; font-size:65%; text-align:center;}
#content .sub { font-style: italic; font-size: 90%; color: #666; }

.whitebox { background: rgba(255,255,255,.6); border-radius: 10px; padding: 10px; }
.fullWhitebox { background: white; border-radius: 4px; padding: 10px; border: 1px solid lightgray; oveflow: hidden; }
.solid { background: rgba(255,255,255,.9); }

/* menu */
#menuHolder { text-align: center; width: 100%; left: 0; top: 0px; padding: 6px 0; background: rgba(255,255,255,.8);
		position: fixed; z-index: 5; opacity: .9; $transition(opacity 300ms ease-in-out);}
#menu { border: 1px solid #D3D4D6; width: 800px; border-radius: 6px; display: inline-block;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(211,211,211,1) 0%, rgba(232,232,232,1) 43%, rgba(232,232,232,1) 52%, rgba(211,211,211,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(0%,rgba(211,211,211,1)), color-stop(43%,rgba(232,232,232,1)), color-stop(52%,rgba(232,232,232,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,1) 0%,rgba(232,232,232,1) 43%,rgba(232,232,232,1) 52%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,1) 0%,rgba(232,232,232,1) 43%,rgba(232,232,232,1) 52%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,1) 0%,rgba(232,232,232,1) 43%,rgba(232,232,232,1) 52%,rgba(211,211,211,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(211,211,211,1) 0%,rgba(232,232,232,1) 43%,rgba(232,232,232,1) 52%,rgba(211,211,211,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}


#menu { font-size: 0; }
#menu a { font-size: 14px; }
#menu a { display: inline-block;  width: 190px; color: #888; text-align: center; border-right: 1px solid #BCBEC0; padding: 3px; }
#menu a:last-child { border-right: 0px;  }
#menu a.selected
{
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 0%, rgba(249,249,249,1) 43%, rgba(249,249,249,1) 52%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(0%,rgba(229,229,229,1)), color-stop(43%,rgba(249,249,249,1)), color-stop(52%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 0%,rgba(249,249,249,1) 43%,rgba(249,249,249,1) 52%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 0%,rgba(249,249,249,1) 43%,rgba(249,249,249,1) 52%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 0%,rgba(249,249,249,1) 43%,rgba(249,249,249,1) 52%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 0%,rgba(249,249,249,1) 43%,rgba(249,249,249,1) 52%,rgba(229,229,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

#adminmenu { position: fixed; z-index: 10; left: 8px; top: 8px; background: rgba(200, 200, 200, .3); border: 1px solid lightgray; radius(8); }
#adminmenu a { display: block;  width: 190px; color: #888; text-align: center; border-bottom: 1px solid #BCBEC0; padding: 3px; }
#adminmenu a:last-child { border-bottom: 0px;  }
#adminmenu a.selected { background: #rgba(0,0,0,.1); }

/* Front Page */
#note { font-size: 90%; margin: 10px 0; position: relative; padding: 20px 10px; }
#note .noteTitle { font-weight: bold; font-size: 110%; }
.subTitle { font-size: 75%; text-align: left; margin-top: 30px; }

#content .spacer { height: 200px; }

/* Contributors Page */
#signupBox { position: fixed; width: 600px; display: none; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); background-color: white;  }
.selectabletip { display: none; }
.selectabletip.selected { display: inline-block; }
.button.sunYellow { background-color: #f8c42a; }
.button.sunYellow.large { width: 200px; }
#affirmationList .button.sunYellow {  background-color: rgba(248, 196, 42, .3); }
#affirmationList .button.selected.sunYellow { background-color: #f8c42a; }
#affirmationList td[contenteditable='true'] { background:powderblue; }

/* .css2 .formField { position: relative; overflow: visible; } */
/*.css2 .formInfo { white-space: nowrap; }*/

#signupClose { cursor: pointer; background: url(bbStatic/images/closeDialog.png); width: 46px;
		height: 46px; right: -15px; top: -15px; position: absolute; }

.formContainer { border: 1px solid lightgray; }

.formContainer input[type="reset"],.formContainer input[type="submit"]
{
	padding: 3px 8px;
	border-radius: 4px;
}


.formContainer input:focus { border: 0; focus: none; outline: none; }
 /*  :focus { outline: none; }   */

.formContainer input { color: white; }

.formContainer .fieldset.offset
{
	clear: left;
	overflow: hidden;
}

.formContainer .fieldset.offset > div
{
	clear: left; overflow: hidden; border: 1px solid lightgray; padding-top: 14px; background: #f8f8f8; border-radius: 10px;
	margin-top: 14px;
}

.animLeft { -webkit-transition: left 1000ms ease-in-out;  -moz-transition: left 1000ms ease-in-out; -o-transition: left 1000ms ease-in-out; }

#logout { font-weight: bold; background: #f0f0f0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 6px;  position: fixed; top: 0; right: 100px;  display: inline-block; z-index: 10;}
#loginBox { display: none; }

#addCategory { font-size: 80%; padding: 2px 4px; border-radius: 4px; border: 1px solid lightgray; background: #f4f4f4;
	cursor: pointer;  margin-bottom: 1em;  text-align: center;  width: 200px;}
	#addCategoryBox { display: none; }

#contribRegFormCont { display: none; }

#affirmationList { margin: 20px; display: none; }
#affirmationListTable { width: 100%;  font-size: 80%; }
#affirmationListTable tbody td.dateAdded { text-align: center; font-size: 90%; }
#affirmationList tr.deleting { text-decoration: line-through; color: red; }

#aff { width: 500px; }

h3.pressable { border-radius: 4px; padding: 2px 6px; border: 1px solid gray; cursor: pointer; background: rgba(250, 215, 41, .2); }

.img-shadow { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); float: left; margin: 0 1em .5em 0; line-height: 0; border: 5px solid white; }
.uploadForm { float: left; }
.uploadForm > div { clear: left; }

#iPhoneDemo { width: 395px; height: 858px; position: relative; margin: auto; display: none; }
#iPhoneBG { background: url("images/iPhone 4-320 minus glare - screen at 38 x 133.png"); width: 395px;
		height: 858px; position: absolute; top: 0; left: 0; }
#iPhoneGlare { position: absolute; top: 0; left: 0; background: url("images/iPhone 4-320 glare.png");
		height: 858px; width: 395px; }
#iPhoneContent { passing: 0; position: absolute; top: 133px; left: 38px; height: 480px; width: 320px; overflow: auto;
	background: lightgray;}

#iPhoneContent h1 { text-align: center; margin: 0; color: white; padding: 2px 0; font-weight: normal;
	border-bottom: 1px solid #2D3642;
	background: #FACD28;
	background: -moz-linear-gradient(top, rgba(250, 205, 40, 1) 0%, rgba(249, 210, 41, 1) 17%, rgba(235, 190, 42, 1) 60%, rgba(235, 190, 42, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250, 205, 40, 1)), color-stop(17%,rgba(249, 210, 41, 1)), color-stop(60%,rgba(235, 190, 42, 1)), color-stop(100%,rgba(235, 190, 42, 1)));
	background: -webkit-linear-gradient(top, rgba(250, 205, 40, 1) 0%,rgba(249, 210, 41, 1) 17%,rgba(235, 190, 42, 1) 60%,rgba(235, 190, 42, 1) 100%);
	background: -o-linear-gradient(top, rgba(250, 205, 40, 1) 0%,rgba(249, 210, 41, 1) 17%,rgba(235, 190, 42, 1) 60%,rgba(235, 190, 42, 1) 100%);
	background: -ms-linear-gradient(top, rgba(250, 205, 40, 1) 0%,rgba(249, 210, 41, 1) 17%,rgba(235, 190, 42, 1) 60%,rgba(235, 190, 42, 1) 100%);
	background: linear-gradient(top, rgba(250, 205, 40, 1) 0%,rgba(249, 210, 41, 1) 17%,rgba(235, 190, 42, 1) 60%,rgba(235, 190, 42, 1) 100%);
	text-shadow: -1px -1px rgba(0, 0, 0, .1);
}

h3 .toggleViewerTip { float: right; font-size: 80%; color: gray; position: relative; top: 4px; }

#infoMsg { position: fixed; width: 90%; left: 5%; top: 40px; background: rgba(220,250,230,.5); padding: 10px; border: 1px solid green;
		text-align: center; }

.affDelTip { color: gray; font-size: 80%; float: right;}
#countTip { color: gray; font-size: 80%; }

body.i18nOn span.i18n:hover { background: rgba(255,0,0,.1); }
body.i18nOn span[contenteditable='true'] { background:powderblue; }

#blueDialog .buttons a { color: white; }
#blueDialog .bd { background: white; color: #202020; }
#blueDialog .ft { background: #f4f4f4; }

div.example { float: right; width: 287px; margin-left: 20px; font-size: 90%; text-align: center; }
div.example .credit { font-size: 60%; color: gray;  }

.whitebox .css2 .formField { min-height: 58px; }
.whitebox .css2 .fieldInfo,.whitebox .css2 .fieldError { clear: left; font-size: 80%; }

#moon
{
	width: 100px;
	height: 100px;
	margin-left: -50px;
	position: absolute;
	left: 50%;
	z-index: 2;
	/*border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;*/
	border-radius: 50px;
	background-image: initial;
	background-attachment: initial;
	background-origin: initial;
	background-clip: initial;
	background-color: #F9C212;
	top: 80px;
	bbox-shadow: #F9C212 0 0 80px;
}

#moon.set { top: 400px; }

/*a, a:link, a:visited, a:active { background: rgba(0, 0, 0, .3); padding: 2px 6px; border-radius: 4px;  }
a:hover { color: white; }*/

#cmt td.status, #affirmationListTable td.status { background: #999999; color: #f4f4f4;  font-weight: bold; }
#affControl { display: none; }
.buttonControl { background: #999999; border-radius: 8px; padding: 8px; }
.buttonControl .button { margin: 0 4px; }
table.v2 tr.selected { background: rgba(100,120,180,.3) }
#affirmationListTable td.category { background: rgba(248, 196, 42, .3); color: #202020;  font-weight: bold; }

#languageSelect { position: fixed; right: 12px; bottom: 2px; opacity: .3; z-index: 6; $transition(opacity 300ms ease-in-out);}
#languageSelect:hover { opacity: 1; $transition(opacity 300ms ease-in-out);}
#languageSelect img { width: 20px; }

/* Blog */
.blogEntry { padding: 30px; border: 1px solid lightgray; }
.blogEntry .content { margin-top: 20px;  overflow: visible; }
.blogEntry > h1 { margin-bottom: 4px; }
.blogEntry .content img
{
	margin: 20px 20px;
	border-radius: 8px;
	/*box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);*/
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,.3)
}
.blogEntry .content h2 { clear: left; }
.blogEntry .content img[align=left] { margin-left: 0; }
.blogEntry .content img[align=right] { margin-right: 0; }
.blogEntry .sig {  border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0; border-top: 1px solid #ddd; }
.blogEntry .sig .photo img { box-shadow: 2px 2px 6px 0px rgba(0,0,0,.3); }

.singleBlogBrief { clear: both; }
#blogDirectory h1 { margin: 0; }
#blogDirectory h2.blogSubtitle { font-style: italic; font-size: 14px; color: #bcbcbc; margin-bottom: 16px; }

#recentArticles { margin-bottom: 20px; padding: 1px; background: #bcbcbc; }
#recentArticles h1 { font-size: 16px; color: white; padding: 6px; margin: 0; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#recentArticles .inner { background: white; border-radius: 10px; padding: 2px 6px; }
#recentArticles h2 { font-size: 16px; }
#recentArticles .date { color: #202020; }

ul.softer > li { color: #666; }

/* Contributor Profile Preview */
#contribProfile { background: lightgray; }

.featureBox { padding: 10px; margin: 10px; border-radius: 10px; background: rgba(255,255,255,.7); }

#profileSection h2 /* name */
{
	font-size: 22px;
	color: #202020;
	line-height: 1.2;
	margin-top: 0;
}

#profileSection h3 /* tagline */
{
	font-style: italic;
	font-weight: normal;
	font-size: 16px;
	color: #606060;
}

#profileSection h2 { clear: left; display: block; text-align: center; }
#profileSection h3 { clear: left; display: block; text-align: center; }
#profileSection .contribPhoto { float: none; text-align: center; }
#profileSection .imgShadow { float: none; display: inline-block; }

.contribPhoto
{
	overflow: hidden;
	float: left;
	margin-bottom: 10px;
}

#contribBrief { clear: left; }

textarea#brief { height: 85px; }

#profileSection img { max-width: 140px; max-height: 170px;  min-width: 100px; min-height: 100px; }

.imgShadow
{
	-moz-box-shadow: 2px 2px 7px -2px black;
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	float: left;
	margin: 0 1em .5em 0;
	line-height: 0;
	border: 5px solid white;
}

#contribURL a { text-decoration: none;  white-space: nowrap;  color: #777; }

#contribAffLink span { white-space: nowrap; }

.bigButton2 {
	width: 262px; height: 51px;
	background: url(images/yellowBigButton.png);
	background-size: 262px 51px;
	color: white;
	border: 0;
	margin: 20px auto;
	font-size: 18px;
	text-shadow: -1px -1px rgba(0, 0, 0, .1);
	text-align: center;
	line-height: 51px;
	font-weight: bold;
}

.bigButton2.white {
	background: url(images/whiteButton.png);
	color: lightgray;
}

.img-shadow { float: none; display: inline-block; }