@font-face {
  font-family: 'IropkeBatangM';
  
  src: url(/fonts/IropkeBatangM/IropkeBatangM.eot);
  src: url(/fonts/IropkeBatangM/IropkeBatangM.eot?#iefix) format('embedded-opentype');
  src: url(/fonts/IropkeBatangM/IropkeBatangM.ttf) format('truetype');

  src: url(/fonts/IropkeBatangM/IropkeBatangM.woff) format('woff');
}


/*  BEG:  more definition  */
/*  END:  more definition  */


/*  BEG:  bootstrap modification */
/*  END:  bootstrap modification */

/******************************************************************************* 
 * BEG:  site standard styling 
 */
* {font-family:"IropkeBatangM", georgia, arial; color:#333;}  
.text-white     {color:#FFF;}
.text-silver    {color:silver;}
.text-dim       {color:#eee;}
.text-dark      {color:#aaa;}
.text-black     {color:#000;}
.text-red       {color:#F00;}
.text-blue      {color:#00F;}
.text-green     {color:#0F0;}

.bg-white       {background-color:#FFFFFF;}
.bg-gray-e2     {background-color:#e2e2e2;}
.bg-gray-f3     {background-color:#f3f3f3;}

.border-no      {border:none;}
.border-red     {border:1px solid RED;}
.border-blue    {border:1px solid BLUE;}
.border-green   {border:1px solid GREEN;}
.border-black   {border:1px solid BLACK;}
.border-gray    {border:1px solid GRAY;}
.border-gold    {border:1px solid GOLD;}

.padding-no     {padding:00px;}
.padding-02     {padding:02px;}
.padding-05     {padding:05px;}
.padding-10     {padding:10px;}

.margin-no      {margin:00px;}
.margin-05      {margin:05px;}
.margin-10      {margin:10px;}

.margin-left-05      {margin-left:05px;}

.align-right    {text-align:right;}
.align-left     {text-align:left;}
.align-center   {text-align:center;}
.align-top      {vertical-align:top;}
.align-bottom   {vertical-align:bottom;}
.align-middle   {vertical-align:middle;}
.align-base     {vertical-align:baseline;}

.width-full     {width:100%;}
.width-left     {width:160px;}
.width-right    {width:160px;}
.width-center   {width:590px;}
.width-inner    {width:910px;
                 

/*                 
                 -webkit-box-shadow: inset 2px 2px 10px 2px rgba(0,0,0,0.75);
                -moz-box-shadow:     inset 2px 2px 10px 2px rgba(0,0,0,0.75);
                box-shadow:          inset 2px 2px 10px 2px rgba(0,0,0,0.75);
*/
                }
                
  .btn-circle    {width:32px; height:32px; padding:0px; font-size:16px; line-height:32px; border-radius: 50%;}
  .btn-circle-40 {width:40px; height:40px; padding:0px; font-size:20px; line-height:40px; border-radius: 50%;}
  .btn-circle-60 {width:60px; height:60px; padding:0px; font-size:30px; line-height:60px; border-radius: 50%;}
  
  .badge-right    {text-align:right;}
/* 
 * END:  site standard styling 
 ******************************************************************************/


body.bodyPage     {margin-top:40px; background: #333 url("/images/bg/body-888-4x160.png") repeat-x;}
div.wrapper,
div.navbar-inner  {width:920px;   /* [10] + [5] + [150] + [5] + [580] + [5] + [150] + [5] + [10]*/}

.wrapper  {background-color:#eee;
           margin:auto;
          -webkit-box-shadow: 4px 4px 6px 6px rgba(0%,0%,0%,0.33);
          -moz-box-shadow:    4px 4px 6px 6px rgba(0%,0%,0%,0.33);
          box-shadow:         4px 4px 6px 6px rgba(0%,0%,0%,0.33);
          }

#sectionHeader {
  width:100%;
  position:relative;
  height:120px;
  background-color:#ccc/*#f0efec*/;
/*  opacity:0.2;*/
}
#sectionHeader  .titleHeader  {font-size:36px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#sectionHeader  .quoteHeader  {font-size:12px; position:absolute; bottom:5px; right:5px; width:240px; text-align:right;}

#sectionContent  {
  width:100%;
  position:relative;
}

#sectionFooter {
  width:100%;
  position:relative;
  margin-top:10px;
}
#sectionFooter .copyright {width:100%; color:#FFF; background-color: #000; font-weight:bold; text-align:center; padding:4px;}

  .imgBook-sm   {width:090px; height:120px; border:0px solid #ccc;}
  
  .imgAvatar    {width:080px; height:80px;}
  .imgAvatar-lg {width:120px; height:120px; border:1px solid silver;/* box-shadow:2px 2px 4px 4px rgba(222,222,222,0.5);*/}
  .imgAvatar-sm {width:060px; height:60px;}
  .imgAvatar-xs {width:038px; height:38px; margin:2px; border:1px solid #eee;}
  .imgAvatar-xx {width:016px; height:16px; margin:2px; border:1px solid #eee;}
  .imgAvatar-top{width:018px; height:18px; margin:0px; border:1px solid #eee; vertical-align:-2px; border-radius:0% !important;}
/****************************************************/
/*  showcase                                        */
/****************************************************/
#divShowcases {}
  .tblShowcase  {width:910px; margin:20px 5px 20px 5px; border:0px solid #555;}
  .tblShowcase:nth-child(odd)   {background-color:#f3f3f3;}
  .tblShowcase:nth-child(even)  {background-color:#dcdcdc;}

  .tblShowcase  .showcase-cover   {width:160px; padding:5px; vertical-align:top; border:none;}
  .tblShowcase  .showcase-content {width:590px; padding:5px; vertical-align:top; border:none;}
  .tblShowcase  .showcase-writers {width:160px; padding:5px; vertical-align:top; border:none;}
  
  .tblShowcase  .showcase-genre   {padding:0px 5px 5px 5px; vertical-align:top; border:0px solid red;}
  .tblShowcase  .showcase-info    {padding:0px 5px 5px 5px; vertical-align:top; position:relative; border:none;}
  
  .tblShowcase  .imgBook {width:150px; height:200px; border:1px solid #aa6;}
  
  .tblShowcase .booktitle  {background-color:#eed; font-weight:bold;width:100%; border:0px solid #aa6; height:40px; padding:5px; margin:0px;}
  .tblShowcase .booktitle  a        {font-size:20px; color:#333; text-decoration:none; font-weight:bold;}
  .tblShowcase .booktitle  a:hover  {font-size:20px; color:#39A; text-decoration:none; font-weight:bold;}
  .tblShowcase .story      {width:100%; height:160px; font-size:15px; font-weight:bold; line-height:150%; background-color:#fff; overflow:hidden; margin:0px; padding:10px; border:1px solid #eed;}
  .tblShowcase .writers  .imgAvatar  {width:30px; height:30px; border:1px solid silver; padding:0px;}
  .tblShowcase .writers  .imgAvatar:nth-child(1n)  {margin:0px 5px 5px 0px;}
  .tblShowcase .writers  .imgAvatar:nth-child(2n)  {margin:0px 5px 5px 0px;}
  .tblShowcase .writers  .imgAvatar:nth-child(3n)  {margin:0px 5px 5px 0px;}
  .tblShowcase .writers  .imgAvatar:nth-child(4n)  {margin:0px 0px 5px 0px;}
  .tblShowcase  .showcase-genre .badge{height:18px; font-size:12px; font-weight:normal; border:0px solid red; margin:0px; vertical-align:top;}
  
  .tblShowcase .showcase-info .beg          {position:absolute; top:0px;  left:005px; width:auto; padding:0px; font-size:12px; font-weight:normal; border:0px solid red;}
  .tblShowcase .showcase-info .end          {position:absolute; top:0px; right:005px; width:auto; padding:0px; font-size:12px; font-weight:normal; border:0px solid red;}
  .tblShowcase .showcase-info .count        {position:absolute; top:0px; right:300px; width:auto; padding:0px 0px 0px 5px; font-size:12px; font-weight:normal; border:0px solid red;}
  .tblShowcase .showcase-info .depth        {position:absolute; top:0px;  left:300px; width:auto; padding:0px 0px 0px 5px; font-size:12px; font-weight:normal; border:0px solid red;}
  .tblShowcase .showcase-info .beg a        {font-size:12px; font-weight:normal; text-decoration:none; padding:5px 5px 5px 5px; color:white;}
  .tblShowcase .showcase-info .beg a:hover  {color:gold;}
  .tblShowcase .showcase-info .end a        {font-size:12px; font-weight:normal; text-decoration:none; padding:5px 5px 5px 5px; color:white;}
  .tblShowcase .showcase-info .end a:hover  {color:gold;}

/****************************************************/
/*  story sample                                    */
/****************************************************/
#divStorySamples  {}
  .tblStorySample   {width:910px; margin:20px 5px 20px 5px; border:none;}
  .tblStorySample:nth-child(odd)  {background-color:#f3f3f3;}
  .tblStorySample:nth-child(even) {background-color:#dcdcdc;}
  
  .tblStorySample .story-author     {width:160px; padding:5px; vertical-align:top;}
  .tblStorySample .story-content    {width:590px; padding:5px; vertical-align:top;}
  .tblStorySample .story-feedback   {width:160px; padding:5px; vertical-align:top;}
  
  .tblStorySample .story-author .avatar       {width:60px; height:60px; border:1px solid #aa6;}

  .tblStorySample .booktitle  {background-color:#eed; font-weight:bold;width:100%; border:0px solid #aa6; height:40px; padding:5px; margin:0px;}
  .tblStorySample .booktitle  a        {font-size:20px; color:#333; text-decoration:none; font-weight:bold;}
  .tblStorySample .booktitle  a:hover  {font-size:20px; color:#39A; text-decoration:none; font-weight:bold;}
  .tblStorySample .story      {width:100%; height:160px; font-size:15px; font-weight:bold; line-height:150%; background-color:#fff; overflow:hidden; margin:0px; padding:10px; border:1px solid #eed;}
  
  .tblStorySample .genre        {height:18px; font-size:12px; font-weight:normal; border:0px solid red; margin:0px; vertical-align:top;}
  .tblStorySample .thumbs-up    {height:18px; font-size:12px; font-weight:normal; border:0px solid red; margin:0px; vertical-align:top;}
  .tblStorySample .thumbs-dn    {height:18px; font-size:12px; font-weight:normal; border:0px solid red; margin:0px; vertical-align:top;}
  .tblStorySample .read-more    {height:18px; font-size:12px; font-weight:normal; border:0px solid red; margin:0px; vertical-align:top;float:right;}
  
  .tblStorySample .date-posted  {text-align:center; font-weight:bold; font-size:16px;}
  .tblStorySample .feedback     {width:100%; height:160px; overflow:hidden; margin:0px; padding:0px; border:0px solid #eed;}
  .tblStorySample .info         {padding:0px 5px 5px 5px; position:relative;}
  
/*******************************************************************************/
/*  Story Book                                                                 */
/*******************************************************************************/
.tblBookSummary   {width:910px; border:0px solid red;}
.tblBookSummary  .book-cover   {width:160px; padding:5px; vertical-align:top; border:none;}
.tblBookSummary  .book-content {width:590px; padding:5px; vertical-align:top; border:none;}
.tblBookSummary  .book-writers {width:160px; padding:5px; vertical-align:top; border:none;}
.tblBookSummary  .imgBook {width:150px; height:200px; border:1px solid #aa6;}
.tblBookSummary  .booktitle   {font-size:20px; background-color:#eed; font-weight:bold;width:100%; border:0px solid #aa6; height:40px; padding:5px; margin:0px;}
.tblBookSummary  .story-info  {width:100%; height:160px; font-size:15px; font-weight:bold; line-height:150%; background-color:#fff; overflow:hidden; margin:0px; padding:10px; border:1px solid #eed;}
.tblBookSummary  .book-writers  .imgAvatar  {width:30px; height:30px; border:1px solid silver; padding:0px;}
.tblBookSummary  .book-writers  .imgAvatar:nth-child(1n)  {margin:0px 5px 5px 0px;}
.tblBookSummary  .book-writers  .imgAvatar:nth-child(2n)  {margin:0px 5px 5px 0px;}
.tblBookSummary  .book-writers  .imgAvatar:nth-child(3n)  {margin:0px 5px 5px 0px;}
.tblBookSummary  .book-writers  .imgAvatar:nth-child(4n)  {margin:0px 0px 5px 0px;}
  
.divStoryUnit   {width:100%; padding:0px; border:0px solid red;}
.divStoryUnit .tblUnit  {width:910px; margin:5px; border:0px solid blue; table-layout:fixed;}
.divStoryUnit .tblUnit .book-author   {width:160px; padding:5px; vertical-align:top; border:none; position:relative;}
.divStoryUnit .tblUnit .book-content  {width:590px; padding:5px; vertical-align:top; border:none; position:relative;}
.divStoryUnit .tblUnit .book-feedback {width:160px; padding:5px; vertical-align:top; border:none; position:relative;}

.divStoryUnit .tblUnit .book-author-inner             {position:relative; width:150px; height:110px; background-color:transparent;}
.divStoryUnit .tblUnit .book-author-inner .avatar     {width:40px; height:40px; position:absolute; top:5px; left:5px;}
.divStoryUnit .tblUnit .book-author-inner .avatar img {width:100%; height:100%; border:1px solid silver;}

.divStoryUnit .tblUnit .book-author-inner .posted_info  {position:absolute; top:19px; left:50px; width:95px; border:0px solid #333;}
.divStoryUnit .tblUnit .book-author-inner .posted_caption  {position:absolute; top:-14px; left:-1px; font-size:10px; font-weight:bold;}
.divStoryUnit .tblUnit .book-author-inner .posted_by    {color:#333; font-size:14px; font-family:consolas, monospace;}
.divStoryUnit .tblUnit .book-author-inner .posted_by  a {color:#333; font-size:14px; font-family:consolas, monospace;}
.divStoryUnit .tblUnit .book-author-inner .posted_at {position:absolute; top:60px; left:90px; width:55px; text-align:right; font-size:12px; font-weight:bold;}

.divStoryUnit .tblUnit .book-content .spanDepth {padding:2px; 
                                                background-color: #000; border:1px solid silver;
                                                position:absolute; top:-12px; left:5px; 
                                                color:#fff; font-size:08px; font-weight:bold; 
                                                text-align:center;
                                                min-width:20px; z-index:999;}
.divStoryUnit .tblUnit .book-content .book-content-note {width:100%; line-height:175%; background-color:#F8F6EF; padding:10px; border:0px solid #333;
                                                         /*font-weight:bold;*/
                                                         font-size:15px;
                                                        -webkit-box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.36);
                                                        -moz-box-shadow   : 1px 1px 4px 2px rgba(0,0,0,0.36);
                                                                box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.36);
                                                        }
.divStoryUnit .tblUnit .book-content .book-content-info {margin-top:5px;}
/*******************************************************************************
 *  BEG:: seed
 */
/*
.divSeedUnit  {width:100%; padding:10px;}

.tblForm      {width:100%; background-color:#FFF; border-collapse:separate; border-spacing:5px;}
.tblForm td:nth-child(1) {width:150px; padding:0px; vertical-align:top; background-color:#f0efec;}
.tblForm td:nth-child(2) {width:580px; padding:0px; vertical-align:top; background-color:#f0efec;}
.tblForm td:nth-child(3) {width:150px; padding:0px; vertical-align:top; background-color:#f0efec;}
*/
/*
 *  END:: seed
 *******************************************************************************/

/*******************************************************************************
 *  BEG:: story
 */
/*
.divStoryUnit {width:100%; padding:10px;}
.tblUnit      {width:100%; background-color:#FFF; border-collapse:separate; border-spacing:5px;}
.tblUnit .badge .fa {color:#ffC; margin-right:4px;}

.tblUnit td:nth-child(1) {width:150px; padding:0px; vertical-align:top; background-color:#f0efec; position:relative;}
.tblUnit td:nth-child(1) table {width:100%; table-layout:fixed; background-color:#f0efec; margin:0px;}
.tblUnit td:nth-child(1) table td:nth-child(1) {width:60px; text-align:right; padding:2px; color:#aaa; font-size:12px;}
.tblUnit td:nth-child(1) table td:nth-child(2) {width:90px; text-align:left ; padding:2px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#888; font-size:12px; font-weight:bold;}
.tblUnit td:nth-child(1) table tr:nth-child(1) td:nth-child(1) {text-align:center; padding:0px; vertical-align:top;}
.tblUnit td:nth-child(1) table tr:nth-child(1) td:nth-child(2) {text-align:center; font-size:20px; font-weight:bold;}
.tblUnit td:nth-child(1) table tr:nth-child(2) td:nth-child(1) {text-align:center; font-size:14px; font-weight:bold;}
.tblUnit td:nth-child(1)  .spanDepth {border-radius:4px 4px 0px 0px; 
                                      padding:2px; 
                                      background-color:#66512c;
                                      position:absolute; top:-18px; left:0px; 
                                      color:#fff; font-size:08px; font-weight:bold; text-align:center;
                                      min-width:20px; z-index:999;}

.tblUnit td:nth-child(2) {width:580px; padding:0px; vertical-align:top; background-color:#f0efec; position:relative;}
.tblUnit td:nth-child(2) table {width:100%; table-layout:fixed; height:120px; margin:0px;}
.tblUnit td:nth-child(2) table tr:nth-child(1) td  {width:100%; padding:0px;}
.tblUnit td:nth-child(2) table .story {width:100%; padding:5px; margin:0px;}
.tblUnit td:nth-child(2) table tr:nth-child(2) td  {padding:0px; position:relative;}
.tblUnit td:nth-child(2) span  {vertical-align:top;}
  

.tblUnit td:nth-child(3) {width:150px; padding:0px; vertical-align:top; background-color:#f0efec; position:relative;}
.tblUnit td:nth-child(3) table {width:100%; table-layout:fixed; background-color:#f0efec; margin:0px;}
.tblUnit td:nth-child(3) table td:nth-child(1) {width:150px; text-align:left; padding:2px 2px 2px 5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
  
.tblUnit *[class*="btn-move"]    , .tblUnit .btn-commentWindow      {opacity:0.2; z-index:999;}
.tblUnit *[class*="btn-move"] .fa, .tblUnit .btn-commentWindow .fa  {color:#ffC;}

  .div-movePT {position:absolute; top:30px; left:-70px; width:90px; height:40px; z-index:999;}
  .btn-moveT  {position:absolute; top:00px; left: 50px; display:none;}
  .btn-moveP  {position:absolute; top:00px; left: 50px;}
  
  .div-moveNE {position:absolute; top:30px; right:-70px; width:90px; height:40px; z-index:999;}
  .btn-moveE  {position:absolute; top:00px; left :  0px; display:none;}
  .btn-moveN  {position:absolute; top:00px; left :  0px;}
  
  .btn-moveWP {position:absolute; top:30px; left :-20px;}
  .btn-moveWN {position:absolute; top:30px; right:-20px;}
  
  .btn-moveW  {position:absolute; top:-20px; right:-20px;}                      
  
  .btn-moveD  {position:absolute; bottom:-20px;
               margin-left:auto; margin-right:auto; left: 0px; right: 0px;     
              }
  
  .btn-commentWindow    {position:absolute; top:-20px; right: 0px;}
*/
/*
 *  END:: story
 *******************************************************************************/