@charset "utf-8";
/* CSS Document */
/*
*  Converted to CSS by Prashant Shrestha             *
*  Young Innovations Pvt. Ltd.                       *
*/

/*--------------Global Reset---------*/
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, 
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-weight: inherit; 
  font-style: inherit; 
  font-size: 100%; 
  font-family: inherit; 
  vertical-align: baseline; 

} 
/* remember to define focus styles! */ 
:focus  { 
  outline: 0; 
} 
body  { 
  line-height: 1; 
  color: black; 
  background: white; 
} 
ol, ul  { 
  list-style: none; 
} 
/* tables still need 'cellspacing="0"' in the markup */ 
table  { 
  border-collapse: collapse; 
  border-spacing: 0; 
} 
caption, th, td  { 
  text-align: left; 
  font-weight: normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after  { 
  content: ""; 
} 
blockquote, q  { 
  quotes: "" ""; 
}

label {
  font-weight: bold;
}  
/*--------------Layout---------------*/
body {
  text-align: center;
}

#container {
  font-size: 0.75em; /* 16px x .75 = 12px */
  line-height: 1.333; /* 12px x 1.333 = 16px */
  margin: 0 auto;
  width: 970px;
  text-align: left;
}

#header {
  height:100px;
  width:970px;
}

#navbar {
  height:30px;
  background:#ededed;
  border-top:#b3b2b2 solid 4px;
  float:left;
}
#logo-box {
  width:234px;
  height:88px;
  margin-left:207px;
  float:left;
  
}
#sign-up-box {
  height:27px;
  float:right;
  background-color:#ff0000;
  border-top:#ff8080 solid 4px;
  
}
#intro-container {
  overflow:hidden;
  height:85px;
}
#intro {
  width:593px;
  float:left;
  padding-top:5px;
}
#login-box {
  background: #ededed;
}

#slides-container {
  width:596px;
  padding: 22px 0px;
  float:left;
}

#slides {
  border:14px solid #fff4d0;
  width:568px;
}

#step-container {
  width:345px;
  float:right;
  padding-top:22px;
  
}

#main-content {
  

}

#content {
  width:609px;
  float:left;
}
#content-inner {
  position: relative;
  padding: 0 6px 25px 10px;
}
#content-area {
  background-color: #f4f4f4;
  padding: 10px;
}
#sidebar-right {
  float:right;
  width:345px;
  margin-top: 6px;
  
}

#footer {
  clear:both;
}
.clear {
  clear: both;
}
/*--------------End of Layout---------*/

/*--------------Html elements---------*/
/*--- html-elements --*/
body {
  /*font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;*/
  font-family: Arial, Helvetica;
  font-size: 100%;
}
h1 {
  background: url('../images/title-bottom.jpg') repeat-x bottom left;
  font-family: Georgia, "Times New Roman", "Bitstream Vera Serif", serif;
  font-size: 2.833em; /*-- 12px x 2.833 = 34px --*/
  font-weight: normal;
  margin-top: 0;
  padding-bottom: 10px;
}

h2 {
  font-size: 1.666em; /*-- 12px x 1.666 = 20px --*/
  margin-top: 14px;
}

h2 span {
  font-size: 0.631em; /*-- 19px x 0.631 = 12px --*/
  font-weight: normal;
  color: #a29741;
}
h3 {
  font-size: 17px;
  font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  font-weight: bold;
}
ul {
  list-style: none;
}

ul.nav-links li {
  display: inline;
}
p, ul, ol, dl, pre, table, fieldset, blockquote {
  margin: 10px 5px;
  color:#58585a;
  padding:0px 5px 0px 2px;
}
li {
    margin: 0;
    padding: 0;
}

a.active {
	border : 1px solid #000;
	}
/** links **/
  /* The order of link states are based on Eric Meyer's article:
   * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
   */
a:link {
  color:#026080;
  text-decoration:none;
  font-weight: bold;
  
}

a:visited {
  color:#012e3d;
  text-decoration:none;
  font-weight: bold;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:active {
  color: #012e3d;
  text-decoration:none;
}
#navbar ul {
  margin:0;
  padding-top:4px;
}
#navbar ul li a {
  padding:9px;
  border-right:#b3b2b2 solid 1px;
}

#navbar ul li a.last {
  border:none;
}

span.sign-up {
  
}

#sign-up-box a {
  color:#FFFFFF;
  font-size:14px;
  padding:8px 16px 4px;
  font-weight:bold;
  
}

#intro #make-your-story {
  width:209px;
  background:#00bbf9;
  padding:6px 9px 4px;
  margin-top:12px;
  height:15px;
  text-align:center;
}

#intro #make-your-story h2 a {
  color:#FFFFFF;
  font-size: 0.833em;
}

#login-box .username input {
  margin-left:10px;
  width:140px;
}

#login-box .password input {
  margin-left:16px;
  width:140px;
  margin-top:5px;
}

#login-box input.submit
 {
  background: #4d4c4c;
  border:1px solid #777575;
  color: #fff;
  width:53px;

  
}

span.blue {
  color:#00bbf9;
  
}
#step-container .step {
  height:27px;
  margin-bottom:6px;
  padding:14px 5px 2px 75px;
  color:#FFFFFF;
  font-size:11px;
  font-family:Helvetica, sans-serif;

}

#step-container #step-1 {
  background:#462a01 url(images/step-1.gif) no-repeat top left;
}
#step-container #step-2 {
  background:#ededed url(images/step-2.gif) no-repeat top left;
  color:#012e3d;
}
#step-container #step-3 {
  background:#ededed url(images/step-3.gif) no-repeat top left;
}
span.step-sign-up {
  font-size:13px;
}

.clear-block {
  clear:both;
}

.story-title {
	height: 30px;
}





/*-------Create Story -----*/

#create-story label  {
  display: block;
}
  
/*-------Form Styles----*/

.form-item {
  margin:1em 0;
}

.form-item label {
  font-weight:bold;
  display:block;
}
/**
* Sidebar styles
*/
.sidebar-block {
}

.sidebar, .sidebar-block {
  background: #ededed;
  padding: 9px;
}

.sidebar h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.4em;
  margin-top: 0;
}

#login-box input,
#login-box input  {
  display: inline;
  width: 130px;
  border: none;
  padding: 6px;
}
#login-box .login-field {
  margin-bottom: 5px;
}
#login-box .login-field label  {  
  width: 75px;
  display: block;
  float: left;
  padding-top: 4px;
}
#login-box div#password {
  width: 225px;
  float: left;
}
#login-box div#submit input  {
  background: #4d4c4c;
  color: #FFF;
  border: none;
  padding: 2px 4px;
  width: 50px;
}
#login-box #forgot-password {
  clear: both;
}
#step-guide {
  padding: 0;
}
#step-guide ul {
  margin: 0;
  padding: 0;
}
#step-guide li {
  padding: 15px 0px 15px 75px;
  border-bottom: 5px solid #FFF;
  font-size: 12px;
}
#step-guide li.first {
  background: #462a01 url(../images/step-1.png) no-repeat top left;
  color: #FFF;
}
#step-guide li.first a {
  font-size: 14px;
  color: #FFF;
}
#step-guide li.second {
  background: url(../images/step-2.png) no-repeat top left;
}
#step-guide li.third {
  background: url(../images/step-3.png) no-repeat top left;
  border-bottom: none;
}

.popular-story {
  margin-top: 16px;
}

.popular-story-block-coverimage {
  float: left;
  margin-right: 12px;
}

#user-dashboard.sidebar-block {
  background: none;
  padding: 0;
} 

#user-dashboard ul {
  margin: 0;
  padding: 0;
}

a.dashboard, a.create-story, a.my-account{
  display: block;
  height: 26px;
  margin-bottom: 2px;
  padding: 13px 2px 0 46px;
  width: 297px;
}

a.dashboard {
  background: #ededed url('../images/dashboard-icon.png') no-repeat 9px;
}

a.create-story {
  background: #ededed url('../images/create-new-story.png') no-repeat 9px;
}

a.my-account {
  background: #ededed url('../images/my-account.png') no-repeat 9px;
}


/**
* Front page styles
*/
#content .content-block {
  padding: 25px 0px 10px;
  position: relative;
}

.header-wrapper {
  background: url('../images/content-block-header-bg.png') no-repeat bottom left;
  width: 609px;
  position: absolute;
  padding-bottom: 12px;
  left: -19px;
}
.header-wrapper .title {
  background: #bdbcbc url(../images/recently-added-icon.gif) no-repeat 17px;
  padding:5px 0 5px 44px;
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
}
.content-block .story-wrapper {
  background-color: #FFF;
  margin: 50px 10px 0;
  padding: 10px 8px 12px;
}
.content-block .story {
  width: 133px;
  float: left;
}

/**
* Dashboard page
*/
.user-stories .story  {
  background-color: #FFF;
  padding: 10px;
  margin-bottom: 10px;
}
.user-stories a:visited  {
  color: #026080;
}
.user-stories .story-details  {
  margin: 0 0 5px 140px;
}
.user-stories h3  {
  color: #026080;
  font-size: 14px;
}
.user-stories .story-image  {
  float: left;
}
.story-stats  {
  color: #666;
  font-size: 11px;
}
.config-link  {
  margin-top: 10px;
}
.config-link a  {
  padding: 5px 0px 4px 30px;
  margin-right: 7px;
}
.config-link a.view-story  {
  background: url(../images/view-story.png) no-repeat top left;
}
.config-link a.edit-story  {
  background: url(../images/edit-story.png) no-repeat top left;
}
.config-link a.unpublish-story  {
  background: url(../images/unpublish-story.png) no-repeat top left;
}
.config-link a.publish-story  {
  background: url(../images/publish-story.png) no-repeat top left;
}
.config-link a.delete-story  {
  background: url(../images/delete-story.png) no-repeat top left;
}

/**
* Create Story
*/
#create-story  {
  background-color: #FFF;
  padding: 10px;
}

/**
* List Slides page
*/
#story-elements {
  background-color: #FFF;
  min-height: 140px;
  height: auto !important;
  height: 140px;
  margin-bottom: 20px;
}
#slide-elements  {
  background-color: #FFF;
  padding: 10px;
}
#story-elements .user-stories{
  padding: 10px;
}
#add-slide-link {
  margin: 10px 0;
}
#add-slide-link a {
  background: url(../images/add-slide-icon.png) no-repeat top left;
  padding: 10px 0 10px 35px;
}
#story-edit-link {
  margin-top: 15px;
}

#story-edit-link .edit-link {
  display: inline;
}
#story-edit-link .edit-link a {
  margin-right: 10px;
  padding: 5px 0 5px 28px;
}
#story-edit-link #view-story a {
  background: url(../images/view-story.png) no-repeat left top;
}
#story-edit-link #view-story a {
  background: url(../images/view-story.png) no-repeat left top;
}
#story-edit-link #unpublish a {
  background: url(../images/unpublish-story.png) no-repeat left top;
}
#story-edit-link #publish a {
  background: url(../images/publish-story.png) no-repeat left top;
}
#story-edit-link #delete-story a {
  background: url(../images/delete-story.png) no-repeat left top;
  margin-right: 10px;
  padding: 5px 0 5px 25px;
}
#edit-story {
  background: url(../images/edit-story.png) no-repeat left top;
  display: inline;
  margin-right: 10px;
  padding: 5px 0 5px 30px;
  color: #026080;
}

#slide-elements li {
  min-height:140px;
  height: auto !important;
  height: 140px;
}
.slide-wrapper {
  padding:5px 4px 20px;
  position:relative;
}

.slide-details {
  margin:0 0 10px 140px;
}
.background {
  height: 90px;
  width: 120px;
  position:absolute;
  left:0;
}
.slide-title h3 {
  color: #026080;
  font-size: 14px;  
}
.edit-delete-link {
  clear:both;
  padding-top:10px;
}
.edit-delete-link a {
  margin-right: 10px;
  padding: 5px 0 5px 25px;
}
.edit-delete-link a.slide-edit {
  background: url(../images/edit-story.png) no-repeat left top;
}
.edit-delete-link a.slide-delete {
  background: url(../images/delete-story.png) no-repeat left top;
}

#edit-form {
  background-color: #FFF;
  padding: 10px;
}
#add-new-story-cover {
  clear: both;
  padding-top: 15px;
}
.story-edit-links {
  display: inline;
  padding: 5px 0 5px 28px;
  margin-right: 10px;
}
#edit-story-buttons #add-new-story-cover-link {
  background: url(../images/add-cover.png) no-repeat top left;
  color: #026080;
}
#edit-story-buttons #save-story {
  background: url(../images/save.png) no-repeat top left;
  color: #026080;
}
#edit-story-buttons #cancel-story {
  background: url(../images/cancel.png) no-repeat top left;
  color: #026080;
}
#edit-story-buttons #remove-story-cover {
  background: url(../images/remove-cover.png) no-repeat top left;
  color: #026080;
}

/*-- view story page --*/
#story-creator-date {
  font-size: 1.666em; /*12px x 1.666 = 20px*/
  color: #00bbf9;
  margin-top: 14px;
}

#canvas-visible-story-title, #canvas-visible-story-creator, canvas-visible-slide, #canvas-visible-story-date {
  display: none;
}

#story-submit, .submit-buttons {
	margin-top: 30px;
	overflow: hidden;
	width: 100%;
}

.required-field {
  color: #CC3300;
  font-weight: bold;
  float: left;
}

#register-form > div {
	float: left;
}
.register-user {
	margin-top: 15px;
}
#register-button {
  margin-top: 25px;
}
#register-button > span {
	color: #CC3300;
}
#slide-title {
	margin-top: 20px;
}
#slide-description {
	margin-top: 40px;
	clear: both;
}

#background-options {
	margin-top: 100px;
}
#actor-options {
	margin-top: 15px;
}
#description {
	margin-top: 40px;
}
#title input, #description textarea {
  float: left;
}
#new-cover {
  margin-top: 80px;
}

/*
input, textarea {
	float: left;
} 
*/
.clear-left {
  clear: left;
}
.errors {
	margin-top: 10px;
  border: 1px solid red;
}
.errors p {
  color: red;
  background: transparent url(../images/error.png) no-repeat scroll top left;
  padding-left: 20px;
  
}
.hidden {
  display: none;
}

/* Custom Button */
a.button {
    background: transparent url(../images/bg_button_a.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 25px;
    margin-right: 20px;
    padding-right: 17px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url(../images/bg_button_span.gif) no-repeat;
    display: block;
    line-height: 15px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}