@charset "utf-8";
/* CSS Document */

/*
 * CSS Reset 2011-12-25
 * https://gist.github.com/gists/1360380
 *
 * Author:  Takeru Suzuki, http://terkel.jp/
 * License: Public domain
 *
 * Inspired by Normalize.css: http://necolas.github.com/normalize.css/
 */
/* HTML5 display definitions */
section, nav, article, aside, hgroup,
header, footer, figure, figcaption, details {
  display: block; }

video, audio, canvas {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

/* The root element */
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* Sections */
body {
  font-family: sans-serif;
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 14px;
  margin: 0; }

/* Grouping content */
p, blockquote, dl, dd, figure {
  margin: 0; }

hr {
  color: inherit;
  height: auto;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

pre {
  font-family: monaco, monospace, sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0; }

ol, ul {
  padding: 0;
  margin: 0; }

/* Text-level semantics */
a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

strong, b {
  font-weight: bold; }

small {
  font-size: 14px; }

q {
  quotes: none; }

abbr[title] {
  border-bottom: 1px dotted; }

code, samp, kbd {
  font-family: monaco, monospace, sans-serif; }

mark {
  color: black;
  background-color: yellow; }

sub, sup {
  font-size: 14px;
  line-height: 0;
  vertical-align: baseline;
  position: relative; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

br {
  *letter-spacing: 0; }

/* Embedded content */
img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

svg:not(:root) {
  overflow: hidden; }

/* Tabular data */
table {
  border-collapse: collapse;
  border-spacing: 0; }

caption {
  padding: 0;
  text-align: left; }

th, td {
  text-align: left;
  vertical-align: baseline;
  padding: 0; }

/* Forms */
form {
  margin: 0; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

legend {
  border: 0;
  *margin-left: -7px; }

input, button, select, textarea {
  font-size: 14px;    padding: 3px; }

input, button {
  line-height: normal;
  vertical-align: inherit;
  *vertical-align: middle; }

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]:focus {
  outline-offset: -2px; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible; }

select {    vertical-align: middle;
}

textarea {
  vertical-align: top;
  overflow: auto; }

body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	color:#333;
	font-size:14px !important; }

a {
  color: #3579b3; }

img {
  vertical-align: bottom; }

a:hover {
  color: #C00; }

pre {
  margin: 15px 0; }

pre strong,
pre strong * {
  color: #C00 !important; }

table {
  margin: 10px 0;
  width: 100%; }

th {
  background: #EFEFEF; }

th, td {
  border: 1px solid #CCC;
  padding: 5px; }

pre code {
  line-height: 1.8;
  font-size: 14px; }

.all {
  margin: 0 auto; }

button[disabled] {
  color: #CCC; }

.mod-header {
  background: #eee7d3;
  padding: 20px 0;
  border-bottom: 3px solid #bfb9a9; }
  .mod-header h1 {
    font-size: 56px;
    padding: 0 0 20px 0;
    text-align: center;
    font-family: 'Amethysta', serif; }
  .mod-header h1 a {
    color: #444;
    text-decoration: none; }
  .mod-header nav ul {
    text-align: center;
    font-size: 20px; }
  .mod-header nav li {
    display: inline-block;
    padding: 0 10px; }
  .mod-header nav li a {
    text-decoration: none; }

.main {
  width: 800px;
  padding: 20px;
  margin: 0px;
  text-align:left; }
  .main h2 {
    color: #504e47; }
  .main h3 {
    color: #504e47;
    border-bottom: 2px solid #bfb9a9;
    padding: 10px 0;
    margin-bottom: 15px;
    font-size: 22px; }
  .main h4 {
    margin: 10px 0;
    font-size: 18px;
    color: #333; }
  .main section {
    margin-bottom: 0px; }
  .main .mod-section01 {
    margin-bottom: 40px; }
  .main .note {
    font-size: 12px; }
  .main ul {
    list-style: circle;
    padding: 5px 0 5px 40px; }
  .main li {
    margin: 5px 0; }

.viewport {
  width: 800px;
  overflow: hidden;
/*  margin: 0 auto;
  padding: 30px 0;*/
  -webkit-transform: translateZ(0); }

.flipsnap {
  width: 4000px;
  /* 230px(item) * 5 + 45px(padding) */
  padding-left:15px; }

.flipsnap:after {
  content: '';
  display: block;
  clear: both;
  height: 0; }

.item {
  width: 800px;/*
  margin: 0 10px;
  font-size: 50px;
  text-align: center;
  padding: 50px 0;
  background: #EFEFEF;
  border: 5px solid #999;*/
  float: left; }

.pointer {
  text-align: center; }

.pointer span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 1px solid #000; }

.pointer span.current {
  background: #FC0; }

.controls {
  text-align: center;
  margin: 0 0 15px 0; }

.controls .num {
  width: 60px; }

#demo-simple .flipsnap {
  width: 960px;
  padding: 0; }
#demo-simple .item {
  width: 310px;
  margin: 0; }

#demo-img .flipsnap {
  width: 960px;
  padding: 0; }
#demo-img .item {
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  height: auto; }

#demo-maxPoint .flipsnap {
  width: 800px;
  /* 80px(item) * 10 */
  padding: 0; }
#demo-maxPoint .item {
  width: 50px;
  font-size: 14px;
  padding: 10px 0; }

#demo-refresh .flipsnap {
  width: 270px; }

#demo-link .item {
  padding: 0; }
#demo-link .item a {
  width: 200px;
  height: 180px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #00F;
  font-size: 14px; }

#demo-moveToPoint .flipsnap {
  width: 2345px; }

#demo-touchevents .log, #demo-cancelmove .log {
  width: 300px;
  margin: 0 auto; }
#demo-touchevents pre.detail, #demo-cancelmove pre.detail {
  background: #EFEFEF;
  padding: 5px;
  border: 1px solid #CCC;
  height: 105px;
  font-size: 14px; }

.sample p {
  text-align: center; }

.sample pre {
  display: none; }

@media screen and (max-width: 480px) {
  .mod-header h1 {
    font-size: 14px;
    padding-bottom: 10px; }
  .mod-header nav ul {
    font-size: 14px; }

  .main {
    width: 300px; }

  .demo {
    position: relative;
    left: -10px; }

  .demo h3 {
    position: relative;
    left: 10px; }

  .github-ribbon {
    display: none; } }
/*
Description: Magula style for highligh.js
Author: Ruslan Keba <rukeba@gmail.com>
Website: http://rukeba.com/
Version: 1.0
Date: 2009-01-03
Music: Aphex Twin / Xtal
*/
pre code {
  display: block;
  padding: 0.5em;
  background-color: #f4f4f4; }

pre code,
pre .ruby .subst,
pre .lisp .title {
  color: black; }

pre .string,
pre .title,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .cbracket {
  color: #050; }

pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk {
  color: #777; }

pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .change,
pre .tex .special {
  color: #800; }

pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .input_number {
  color: #00e; }

pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .xml .tag,
pre .tex .command,
pre .request,
pre .status {
  font-weight: bold;
  color: navy; }

pre .nginx .built_in {
  font-weight: normal; }

pre .coffeescript .javascript,
pre .xml .css,
pre .xml .javascript,
pre .xml .vbscript,
pre .tex .formula {
  opacity: 0.5; }

/* --- */
pre .apache .tag {
  font-weight: bold;
  color: blue; }