source: projects/vine-manual-base/trunk/css/vine.css @ 2797

/* $Id$ */

body {
        margin: 0;
        padding: 0;
        background: #FFFFFF url(/home/yasumichi/Vine/web/images/header.jpg) repeat-x left top;
        font-size: 13px;
        color: #222222;
}

body {
        color: black;
        margin-left: 1em;
        margin-right: 1em;
}

h1.title {
        color: #fff;
        text-align: center;
        background-color: #669;
        padding: 0.2em;
}

h2.title {
        background-color: #aad;
        border-width: 0px 0px 2px 12px;
        border-style: solid;
        border-color: #77a;
        padding: 1px;
        text-indent: 0.3em;
}

h3.title {
        background-color: #bbe;
        border-width: 0px 0px 2px 10px;
        border-style: solid;
        border-color: #669;
        padding: 1px;
        text-indent: 0.3em;
}

h4.title {
        background-color: #cce;
        border-width: 0px 0px 1px 8px;
        border-style: solid;
        border-color: #669;
        padding: 1px;
        text-indent: 0.3em;
}

h5.title {
        background-color: #dde;
        border-width: 0px 0px 1px 6px;
        border-style: solid;
        border-color: #669;
        padding: 1px;
        text-indent: 0.3em;
}

.important h3.title {
        color: white;
        background-color: red;
        border-style: none;
}

.warning h3.title {
        background-color: yellow;
        border-style: none;
}

.note h3.title {
        background-color: aqua;
        border-style: none;
}

pre.screen {
        background-color: #AAAAAA;
        padding: 3px;
}

p {
        text-indent: 1em;
}

a:link {
        color: #4444aa;
        text-decoration: none;
}

a:visited {
        color: #6600dd;
        text-decoration: none;
}

a:hover, a:focus, a:active {
        color: #3333bb;
        text-decoration: underline;
}

.guimenu {
        color: MenuText;
        background-color: Menu;
        border-style: outset;
        border-width: 2px;
}

.guimenuitem {
        color: MenuText;
        background-color: Menu;
        border-style: outset;
        border-width: 2px;
}

.guibutton {
        color: ButtonText;
        background-color: ButtonFace;
        border-style: outset;
        border-color: ButtonShadow;
        border-width: 2px;
}

.keycap {
        border-style: outset;
        border-color: gray;
        word-break: keep-all;
        padding-left: 3px;
        padding-right: 3px;
}

.table  .keycap {
        border-style: none;
}

/*
 * Header
 */

#toplogo {
        width: 950px;
        height: 108px;
        margin: 0 auto;
        padding: 0 10px;
}

#toplogo #toplogo-title {
        float: left;
}

#toplogo h1, #toplogo p {
        //float: left;
        margin: 0;
        color: #FFFFFF;
}

#toplogo h1 {
        padding: 22px 0 0 0;
        text-transform: uppercase;
        font-family: 'VL Pゴシック', 'VL PGothic', Arial, Tahoma, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, sans-serif;
        font-weight: normal;
        font-size: 3em;
        text-shadow: 1px 1px 8px #CCCCCC;
}

#toplogo strong {
        padding: 22px 0 0 0;
        text-transform: uppercase;
        font-size: 1.1em;
        text-shadow: 1px 1px 8px #CCCCCC;
}

#toplogo p {
        text-transform: uppercase;
        //padding: 58px 0 0 3px;
        font-family: 'VL Pゴシック', 'VL PGothic', Arial, Tahoma, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, sans-serif;
        font-size: 10px;
        color: #FFFFFF;
        text-shadow: 1px 1px 3px #CCCCCC;
        clear: both;
}

#toplogo a {
        border: none;
        text-decoration: none;
        color: #FFFFFF;
}

#toplogo img {
        padding: 13px 0 0 0;
        float: left;
        margin: 0 20px 0 0;
}

#toplogo #ads {
        float: right;
        margin: 0;
        padding: 25px 0 0 0;
}

/*
 * Menu
 */
#menu {
        width: 950px;
        height: 45px;
        margin: 0 auto;
        padding-top: 5px;
        font-family: 'VL Pゴシック', 'VL PGothic', Arial, Tahoma, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, sans-serif;
}

#menu ul {
        margin: 0 auto;
        padding: 0;
        list-style: none;
}

#menu li {
        display: inline;
}

#menu a {
        display: block;
        float: left;
        //margin: 0 3px 0 0;
        background: url(/images/sep.gif) no-repeat left 50%;
        padding: 10px 15px 10px 15px;
        border: none;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 11px;
        color: #444444;
}

#menu a:hover {
        margin: 0 0 0 0;
        padding: 10px 15px 10px 15px;
        color: #000000;
        border-bottom: dashed 1px;
        font-weight: normal;
}

#menu a.left {
        background: none;
        margin: 0 3px 0 0;
        padding: 10px 15px 10px 0px;
        border: none;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 11px;
        color: #444444;
}

#menu a.left:hover {
        margin: 0 3px 0 0;
        padding: 10px 15px 10px 0px;
        color: #000000;
        border-bottom: dashed 1px;
        font-weight: normal;
}

#menu .current a {
        background: none;
        margin: 0 3px 0 0;
        padding: 10px 15px 10px 0px;
        color: #000000;
        font-weight: bold;
}

/*
 * linktrail
 */
ul.linktrail {
  display: block;
  margin: 0.2em 0 0 0;
  text-align: right;
}
li.linktrail { display: inline; margin: 0; padding: 0; }

li.linktrail::before {
  content: '  /  ';
  color: #3f3f3f;
}

/*
 * Sidebar
 */
div.sidebar {
  float: right;
  padding: 0; margin: 0; width: 12em;
}
div.sidenav {
  padding: 0.5em 1em 0 1em;
  background-color: #ffffff;
  border: solid 1px #e0e0df;
}
div.sidenav div.autotoc {
  background-color: #ffffff;
  border: none; padding: 0; margin: 0;
}
div.sidenav div.autotoc div.autotoc { margin-top: 0.5em; }
div.sidenav div.autotoc li { margin-bottom: 0.5em; }
div.sidenav div.autotoc div.autotoc div.autotoc {
  margin-left: 1em;
  margin-top: 0;
}
div.sidenav div.autotoc div.autotoc div.autotoc li { margin-bottom: 0; }

div.autotoc {
  display: table;
  margin-top: 1em;
  margin-left: 1.72em;
  padding: 0.5em 1em 0.5em 1em;
  background-color: #f0f9ff;
  border: solid 1px #c0c9ff;
}
div.autotoc ul { margin: 0; padding: 0; }
div.autotoc li { list-style-type: none; margin: 0; }
div.autotoc div.autotoc-title { margin-bottom: 0.5em; }
div.autotoc div.autotoc { border: none; padding: 0; margin-top: 0; margin-bottom: 0.5em; }
div.autotoc div.autotoc div.autotoc { margin-bottom: 0; }

/*
 * Navibar
 */
div.body-sidebar {
  margin-right: 13em;
}

div.navbar {
  padding: 0.5em 1em 0.5em 1em;
  /*max-width: 60em;*/
  margin-right: 13em;
  background-color: #ffffff;
  border: solid 1px #e0e0df;
}
div.navbar-top { margin-bottom: 1em; }
div.navbar-bottom { margin-top: 1em; clear: both; }
div.navbar img { border: 0; vertical-align: -0.4em; }
table.navbar { width: 100%; margin: 0; border: none; }
table.navbar td { padding: 0; border: none; }
td.navbar-next {
  text-align: right;
}
a.navbar-prev::before {
  
  content: '◀  ';
  color: #3f3f3f;
}
a.navbar-next::after {
  
  content: '  ▶';
  color: #3f3f3f;
}