/*-------------------------------------------------
  General layout
-------------------------------------------------*/
body { color: #000000; background-color: #ffffff; font-size: medium; padding: 0; margin: 0; font-family: 'ＭＳ Ｐゴシック', Osaka, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 130%; }
div { margin: 0; padding: 0: }
img { border: 0; }
form { margin: 0; }

/* Headings */
h1, h2, h3, h4, h5, h6 { margin : 0; font-weight: bold; font-size: 16px; }

/* Lists */
ul { list-style: square; margin: 0; padding: 0; }
li { margin: 0 0 0 24px; padding: 0 0 0 10px; }

/* Links */
a { text-decoration: none; }
a:link { color: #000080; }
a:visited { color: #0000ff; }
a:active { color: #800000; }
a:hover { color: #ff0000; }

/* strong */
strong { font-weight: bold; }
em { color: #ff0000; font-style: normal; }

/* Basic classes */
.hidden { display: none; }
.centerize { text-align: center; }
.right { text-align: right; }
.clearing { clear: both; }

/*-------------------------------------------------
  mainwrapper
-------------------------------------------------*/
div#mainwrapper { width: 880px; margin: 32px auto 0 auto; padding: 0; }

/*-------------------------------------------------
  Header
-------------------------------------------------*/
div#header { width: 880px; margin: 0 auto; padding: 0; }

div#header h1 { float: left; width: 660px; height: 340px; color: #000000; background-color: #ffffff; margin: 0 0 10px 0; padding: 0; }
div#header h1 a { display: block; color: #000000; background-color: transparent; text-decoration: none; }

/*-------------------------------------------------
  Content wrappers
-------------------------------------------------*/
div#wrapper { width: 880px; margin: 0; padding: 0; }

/*-------------------------------------------------
  Main content
-------------------------------------------------*/
div#container { float: left; width: 640px; margin: 10px 0 0 0; padding: 0; }
div#container div.itemnavi{ text-align: left; margin-bottom: 6px; }
div.content { margin: 0 0 24px 0; padding: 0; bold; }

div.content h2 { clear: both; width: 592px; height: 30px; color: #000000; background-color: #ffffff; background-image: url(http://shararun-kako.com/skins/kakomon/images/midashi.jpg); background-repeat: no-repeat; margin: 0 0 9px 0; padding: 6px 24px 0 24px; font-size: 16px; font-weight: }
div.content h2 a  { color: #000000; }
div.content h2 a:visited { color: #000000; }
div.content h2 a:link  { color: #000000; }
div.content h2 a:active  { color: #000000; }

div.content ul { list-style: none; margin: 0; padding: 0; line-height: 22px; }
div.content li { margin: 0 0 0 4px; padding: 0 0 0 24px; background-image: url(http://shararun-kako.com/skins/kakomon/images/icon.jpg); background-repeat: no-repeat; }

div.content div.searchform {}
div.content div.searchform input.formfield {  color: #000000; background-color: #eeeeee; width: 140px; padding: 1px 2px; }
div.content div.searchform input.formbutton { color: #000000; background-color: #eeeeee; padding: 1px 2px; }

div.content div.loginform { text-align: left; }
div.content div.loginform input { color: #000000; background-color: #ffcc99; }
div.content div.loginform input.formfield { width: 140px; padding: 1px 2px; }
div.content div.loginform input.formbutton { padding: 1px 2px; }

div.content div.problem { margin: 3px 0; }
div.content div.answer { margin: 12px 0 6px 0; padding: 1px; border: 2px solid #000000; font-size: large; font-weight: bold; text-align: center; }
div.content div.explanation { margin: 6px 0 0 0; }
div.content div.quote { margin: 0 0 3px 0; text-align: right; }

/*-------------------------------------------------
  Item styles
-------------------------------------------------*/
div.contenttitle h2 { clear: both; width: 592px; height: 30px; color: #000000; background-color: #ffffff; background-image: url(http://shararun-kako.com/skins/kakomon/images/midashi.jpg); background-repeat: no-repeat; margin: 0 0 9px 0; padding: 6px 24px 0 24px; font-size: 16px; font-weight: bold; }
div.contenttitle h2 a { color: #000000; }
div.contenttitle h2 a:visited { color: #000000; }
div.contenttitle h2 a:link { color: #000000; }
div.contenttitle h2 a:active { color: #000000; }
div.contentbody { margin: 0 0 12px 0; padding: 0; }

/*-------------------------------------------------
  Item info
-------------------------------------------------*/
div.contentitem { margin: 0 0 12px 0; padding: 0; }
div.contentitem div.contentitemcategory { margin: 0; padding: 0 2px 0 62px; text-indent: -60px; font-size: small; }
div.contentitem div.contentitemurl { margin: 0; padding: 0 2px 0 62px; text-indent: -60px; font-size: small; }
div.contentitem div.contentitemcomment { margin: 0; padding: 0 2px; font-size: small; text-align: right; }
div.contentitem div.contentitemedit { color: #000000; background-color: #ffeedd; margin: 0; padding: 0 2px; border: 1px solid #999999; font-size: small; }
div.contentitem div.contentitemedit div.edittitle { font-weight: bold; }
div.contentitempostedby {}
div.contentitemcomments {}
div.contentitem1 {}
div.contentitem2 {}
div.contentitem3 {}
div.contentitem4 {}

/*-------------------------------------------------
  Comments
-------------------------------------------------*/
div.itemcomment { margin: 0; padding: 1px 2px; border: 1px solid #cccccc; font-size: small; }
.id1 {} /*This is to give the admin a special comment style, to distinguish him/her from the rest of the commentors*/
div.itemcomment h3 { padding: 0 0 3px 0; font-size: small; font-weight: bold; }
div.itemcomment div.commentinfo { font-size: small; font-weight: bold; }

/*-------------------------------------------------
  pageswitch
-------------------------------------------------*/
div.pageswitch { text-align: center; }

/*-------------------------------------------------
  Menu
-------------------------------------------------*/
div#sidebarcontainer { float: right; width: 200px; margin-top: 34px; }
div.sidebar { margin: 0 0 18px 0; font-size: 12px; }

/* Menu lists */
div.sidebar h2 { color: #ffffff; widht: 200px; height: 40px; background-image: url(http://shararun-kako.com/skins/kakomon/images/SIDEIMG.jpg); background-repeat: no-repeat; margin: 0 0 3px 0; padding: 11px 0 0 40px; font-size: 16px; font-weight: bold; }
div.sidebar div { margin: 0; padding: 1px 2px; }

div.sidebar ul { list-style: none; margin: 0; padding: 0; }
div.sidebar ul li { margin: 0 0 0 0; padding: 0 0 0 18px; background-image: url(http://shararun-kako.com/skins/kakomon/images/icon2.jpg); background-repeat: no-repeat; }
div.sidebar ul.special_ul {}
div.sidebar ul.special_ul li { padding: 2px 0 4px 24px; background-image: url(http://shararun-kako.com/skins/kakomon/images/icon.jpg); background-repeat: no-repeat; }

div.sidebar div.searchform { text-align: left; }
div.sidebar div.searchform input { color: #000000; background-color: #ffcc99; }
div.sidebar div.searchform input.formfield { width: 140px; padding: 1px 2px; }
div.sidebar div.searchform input.formbutton { padding: 1px 2px; }

div.sidebar div.loginform { text-align: left; }
div.sidebar div.loginform input { color: #000000; background-color: #ffcc99; }
div.sidebar div.loginform input.formfield { width: 140px; padding: 1px 2px; }
div.sidebar div.loginform input.formbutton { padding: 1px 2px; }

/*-------------------------------------------------
  Footer
-------------------------------------------------*/
div#footer { clear: both; color: #ffffff; background-color: #662a00; width: 880px; margin:0 0 18px 0; padding: 1px 2px; text-align: right; font-size: small; }

/*-------------------------------------------------
  Forms
-------------------------------------------------*/
.loginform, .searchform {}
.commentform, .mailform {}
.commentform img{ }
.formfield { display:block; }
.formbutton {}
.commentform .formfield, .commentform .formbutton, .loginform .formbutton { display: block; }
.searchform .formfield {}
.searchform .formbutton {}
.loginform .formfield {}
.loginform .formbutton {}
.mainform .formfield {}
.mailform .formbutton {}

.commentform textarea, .commentform .formfield, .mailform textarea, .mailform .formfield {}
.commentform .formbutton {}
.error { color: red; font-weight: bold;}


/*-------------------------------------------------
  Miscelaneous
-------------------------------------------------*/
/* VBlog image onion skin shadow - From AListApart.com*/
.wrap1, .wrap2, .wrap3
{ display:inline-table; /* \*/display:block;/**/ }
.wrap1 { float:left; background:url(skins/kakomon/images/shadow.gif) right bottom no-repeat; margin: 0 5px 3px 0; }
.wrap2 { background:url(skins/kakomon/images/corner_br.gif) left bottom no-repeat; }
.wrap3 { background:url(skins/kakomon/images/corner_tr.gif) right top no-repeat; padding:0 5px 5px 0; }
.wrap3 img { display:block; border: 3px solid white; }

/* Search highlight color */
.highlight { color: #000000; background-color: #99ffff; font-weight: bold; }

/* Leftbox and Rightbox toolbar buttons */
.leftbox, .rightbox { margin: 3px; padding: 3px; font-size: larger; width: 20%; }
.leftbox { float: left; border-right: 2px solid #ccc; }
.rightbox { float: right; border-left: 2px solid #ccc; }
