sinorcaish : Design 7 « Templates « HTML / CSS

sinorcaish
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>The Sinorcaish Stylesheet v1.3</title>
  <meta name="Author" content="John Zaitseff, J.Zaitseff@zap.org.au" />
  <meta name="Description" content="A description of the Sinorcaish CSS stylesheet" />
  <meta name="Copyright" content="Copyright (C) 2004-07, John Zaitseff.  This file may be redistributed and/or modified on the condition that the original copyright notice is retained." />
  <meta name="SVNInfo" content="$Id: index.html 193 2007-03-22 04:16:45Z john $" />
  <meta name="Language" content="en" />
  <meta name="Generator" content="Hand-written XHTML using Emacs under Debian GNU/Linux" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="en" />
<style type='text/css'>
/************************************************************************
*                                                                       *
*                  Sinorcaish Screen-based Style Sheet                  *
*                 Copyright (C) 2004-07, John Zaitseff                  *
*                                                                       *
************************************************************************/

/* Author:  John Zaitseff <J.Zaitseff@zap.org.au>
   Version: 1.3

   $Id: sinorcaish-screen.css 189 2007-03-22 01:35:44Z john $

   This file provides the Sinorcaish style sheet for screen-based user
   agents (ie, for ordinary Web browsers).  This file conforms to the
   Cascading Style Sheets 2.1 specification.

   The design of Sinorcaish is influenced by Sinorca (available from the
   Open Source Web Design site, http://www.oswd.org/), which in turn was
   based on the Acronis company web site (http://www.acronis.com/).  You
   can find more information about this design from its home page on the
   ZAP Group web site, http://www.zap.org.au/documents/styles/sinorcaish/.

   This file may be redistributed and/or modified on the condition that
   the original copyright notice is retained.
*/


/********** Global Styles **********/

        /* The global font size is set to 90% as  */
        /* most browsers' normal font size is too */
        /* large, at least when using Verdana     */

body {
   font-family:     Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
   font-size:       90%;  /* Allow IE/Win to resize the document */
   color:           black;
   background:      #F0F0F0;
   margin:          0;
   padding:         0;
   border:          none;
}

.hidden {      /* Used for content that should be displayed */
        /* by non-stylesheet-aware browsers          */
   display:         none !important;
}

.notprinted {      /* Used for content that should not be */
}        /* printed to paper                    */


/* Headings */

h1,        /* Headings (H1-H6) should only be used in */
h2,        /* the main content area                   */
h3 {
   font-weight:     bold;
   text-align:      left;
   margin:          1.5em 0 0 0;
   padding:         0;
}

h4,
h5,
h6 {
   font-weight:     bold;
   text-align:      left;
   margin:          1.25em 0 0 0;
   padding:         0;
}

h1 { font-size:     175% }
h2 { font-size:     145% }
h3 { font-size:     120% }
h4 { font-size:     105% }
h5 { font-size:     80%  }
h6 { font-size:     65%  }


/* Anchors */

a:link {
   text-decoration: none;
   color:           #0066CC;
   background:      transparent;
}

a:visited {
   text-decoration: none;
   color:           #003399;
   background:      transparent;
}

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


/* Inline elements and classes */

        /* This style sheet assumes B, BIG, EM, I, */
        /* SMALL, STRONG, SUB and SUP are defined  */
        /* by the browser as per the HTML4 sample  */
        /* style sheet.                            */
code,
kbd,
samp,
tt {
   font-family:     "Courier New", Courier, monospace;
   font-size:       115%;  /* Courier tends to be a little too small */
   line-height:     1.0;  /* Otherwise lines tend to spread out */
}

kbd,
code.markup,      /* HTML/CSS markup */
span.markup,      /* Alternative form for HTML/CSS markup */
.title {      /* Title in floating boxes / left sidebar */
   font-weight:     bolder;
}

abbr,
acronym {
   font:            inherit;  /* Don't use small-caps, etc. */
}

.tooltip {
   cursor:          help;
   border-bottom:   1px dotted #CCCCCC;
}

abbr[title],
acronym[title] {
   cursor:          help;
   border-bottom:   1px dotted #CCCCCC;
}

cite,
dfn,
var,
.fn,        /* Filename */
.url,        /* Uniform Resource Locator */
.email {      /* E-mail address */
   font-style:      italic;
}

.program,      /* Command-line name of a computer program */
.window,      /* Window or dialog box name */
.menu,        /* Menu item in a computer program */
.gui,        /* Generic GUI element in a computer program */
.key {        /* Keypress in a computer program */
   font-weight:     bolder;
}

.clearboxes {      /* Clear navboxes and floatboxes */
   clear:           right;
}

.unicode {
   font-family:     "Arial Unicode MS", "Lucida Sans Unicode", Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
}


/* Block-inline elements and classes */

img {
   vertical-align:  baseline;
   margin:          0;
   padding:         0;
   border:          none;
}

img.icon16 {      /* For 16x16 file-type icons */
   vertical-align:  -2px;
}

del,
del * {        /* Required for Mozilla */
   text-decoration: line-through;
}

ins,
ins * {        /* Required for Mozilla */
   text-decoration: underline;
}

.floatleft {      /* Left-floating images and spans */
   margin:          0.5em 1.5em 0.5em 0;
   float:           left;
}

.floatright {      /* Right-floating images and spans */
   margin:          0.5em 0 0.5em 1.5em;
   float:           right;
}

.nowrap {
   white-space:     nowrap;
}


/* Block elements */

p {
   margin:          1em 0;
   padding:         0;
}

blockquote {      /* Should only be used in main content area, */
        /* floating boxes or left sidebar.           */
   margin:          1em 2.5em;
   padding:         0;
}

pre {        /* Should only be used in main content area  */
        /* and floating boxes.                       */
   font-family:     "Courier New", Courier, monospace;
   font-size:       115%;  /* Courier tends to be a little too small */
   line-height:     1.2;
   margin:          1em 2.5em;
   padding:         0;
}

pre code,
pre kbd,
pre samp,
pre tt {
   font-size:       100%;  /* PRE is already enlarged above */
   line-height:     1.2;  /* Use same value as for PRE above */
}

hr {
   color:           #999999;
   background:      transparent;
   height:          1px;  /* Required for IE/Win */
   margin:          0;
   padding:         0;
   border-color:    #999999;
   border-width:    1px;
   border-style:    none none solid none;
}

hr.lighter {      /* Warning: not printed out on paper */
   color:           #F0F0F0;
   background:      transparent;
   border-color:    #F0F0F0;
}


/* Lists */

ol {
   list-style:      decimal outside;
   margin:          1em 0;
   padding:         0 0 0 2.5em;
}

ol.alpha {
   list-style-type: lower-alpha;
}

ol.number {
   list-style-type: decimal;
}

ul {
   list-style:      square outside;
   margin:          1em 0;
   padding:         0 0 0 2.5em;
}

ol ol,
ol ul,
ul ol,
ul ul {
   margin-top:      0;
   margin-bottom:   0;
}

ol ul,        /* Override possible browser styles */
ol ol ul,
ol ul ul,
ul ul,
ul ol ul,
ul ul ul {
   list-style:      square outside;
}

li {
   margin:          0;
   padding:         0;
}

dl {
   margin:          1em 0;
   padding:         0;
}

dt {
   font:            inherit;  /* Don't make the text bold by default */
   margin:          1em 0 0.25em 0;
   padding:         0;
}

dd {
   margin:          0 0 1em 2.5em;
   padding:         0;
}


/* Tables */
        /* Tables should never be used for visual */
        /* formatting: that is the role of CSS!   */

table.simple {
   color:           inherit;
   background:      inherit;  /* Don't make tables transparent */
   border-collapse: collapse;
   border-spacing:  0;
   empty-cells:     show;
   margin:          0.5em 2.5em;
   padding:         0;
   border:          1px solid #999999;
}

table.simple caption {
   text-align:      center;
   caption-side:    top;
   margin:          0 2.5em 0.75em;
   padding:         0;
   border:          none;
}

table.simple td,
table.simple th {
   text-align:      center;
   vertical-align:  middle;
   margin:          0;
   padding:         0.25em 0.5em;
   border:          1px solid #999999;
}

table.simple th,
table.simple td.highlight,
table.simple th.highlight {
   font-weight:     bold;
   color:           inherit;
   background:      #F0F0F0;
}

table.simple td.lighter,
table.simple th.lighter {
   color:           inherit;
   background:      #F8F8F8;
}

table.simple td.left,
table.simple th.left {
   text-align:      left;
}

table.simple td.center,
table.simple th.center {
   text-align:      center;
}

table.simple td.right,
table.simple th.right {
   text-align:      right;
}


/* Forms */

form {
   margin:          1em 0;
   padding:         0;
   border:          none;
}

input,
button,
select,
fieldset,
legend {
   font-family:     Verdana, "DejaVu Sans", "Bitstream Vera Sans", "Lucida Sans", Arial, Helvetica, sans-serif;
   font-size:       95%;
   color:           black;
   background:      inherit;
   vertical-align:  middle;
}

textarea {
   font-family:     "Courier New", Courier, monospace;
   font-size:       100%;
   color:           black;
   background:      inherit;
   vertical-align:  middle;
}

fieldset {
   font-size:       100%;
   margin:          1em 0;
   border:          1px solid #999999;
}

legend {
   font-size:       100%;
   margin:          0 0.5em;
   padding:         0 0.25em;
   border:          none;
}

table.formtable {
   color:           inherit;
   background:      inherit;
   border-collapse: collapse;
   border-spacing:  0;
   empty-cells:     show;
   margin:          0;
   padding:         0;
   border:          none;
}

table.formtable td,
table.formtable th {
   text-align:      justify;
   vertical-align:  middle;
   margin:          0;
   padding:         0.25em 0.5em;
   border:          none;
}

table.formtable th {
   text-align:      center;
   font-weight:     bold;
}

table.formtable td.label,
table.formtable th.label {
   text-align:      right;
   vertical-align:  top;
}

table.formtable td.vertspace,
table.formtable th.vertspace {
   empty-cells:     show;
   margin:          0;
   padding:         0.5em 0;
   height:          1em;  /* Required for IE/Win */
}

table.formtable fieldset {
   margin:          0;
}

table.formtable fieldset td,
table.formtable fieldset th {
   margin:          0.25em 0.5em;
}

.reqfield {
   color:           red;
   background:      transparent;
   font-weight:     bolder;
}

.info {
   color:           gray;
   background:      transparent;
   font-size:       90%;
}


/* The following HTML elements should NOT be used in documents using this
   style sheet:

       address - use the #footer style instead
       q       - use &ldquo; and &rdquo; instead
*/


/********** Styles for Main Content **********/

#main {
   text-align:      justify;
   line-height:     1.5;
   color:           black;
   background:      white;
   margin:          0 0 0 12.5em;
   padding:         0.25em 1.5em 0.5em 1em;
   border-left:     1px solid #999999;
}

#main h1 {      /* Should be used once, following navhead */
   color:           #999999;
   background:      transparent;
   margin:          0 0 0.5em 0;
}

#main .highlight {    /* Highlight box (for warnings, etc) */
   color:           inherit;
   background:      #F0F0F0;
   margin:          1em 0;
   padding:         1em 2.5em;
   border:          1px solid #999999;
}

#main .totop {      /* For "Top ^" lines in FAQs, etc */
   font-size:       90%;
   text-align:      right;
   margin:          -0.75em 0 1em 0;
   padding:         0 0 0.25em 0;
   border-bottom:   1px solid #F0F0F0;
}

#main table.simple td.highlight,  /* Else "#main .highlight" will override */
#main table.simple th.highlight {
   margin:          0;
   padding:         0.25em 0.5em;
}


/* Other styles related to the main content */

#mainlink {      /* "Skip to main content" link */
   display:         none !important;
}

#navhead {      /* "Path to this page" information */
        /* Warning: not printed out on paper */
   font-size:       90%;
}

#navhead hr {
   display:         none;
}

#endmain {
   visibility:      hidden;
   clear:           both;  /* Doesn't always work under IE/Win */
}


/********** Styles for Floating Boxes **********/

        /* "navbox" is used to provide intra/inter- */
        /* page links; it is NOT printed out on     */
        /* paper.  "floatbox" is used to provide    */
        /* floating boxes that may appear anywhere  */
        /* in the main content; they ARE printed.   */
.floatbox,
.navbox {
   overflow:        visible;
   font-size:       95%;
   line-height:     1.25;
   margin:          0 0 0.75em 1.5em;
   padding:         0.5em 1em;
   border:          1px solid #999999;
   float:           right;
   clear:           right;
}

.floatbox {
   color:           black;
   background:      #F0F0F0;
   width:           35%;
}

.navbox {
   text-align:      left;
   color:           black;
   background:      white;
   width:           12.5em;
}

.floatbox hr,      /* Used for non-stylesheet-aware browsers */
.navbox hr {
   display:         none !important;
}

.floatbox p,
.navbox p {
   margin:          0.75em 0;
   padding:         0;
}

.floatbox ol,
.floatbox ul {
   margin:          0.75em 0;
   padding:         0 0 0 1.5em;
}

.navbox ol,
.navbox ul {
   margin:          0.5em 0;
   padding:         0 0 0 1.5em;
}

.floatbox blockquote {
   margin:          0.75em 1.5em;
   padding:         0;
}

.floatbox pre {
   font-size:       95%;
   margin:          0.75em 1.5em;
   padding:         0;
}

.floatbox dt {
   margin:          0.75em 0;
   padding:         0;
}

.floatbox dt {
   margin:          0.75em 0 0.25em 0;
   padding:         0;
}

.floatbox dd {
   margin:          0 0 0.75em 1.5em;
   padding:         0;
}

#main .floatbox .highlight {
   color:           inherit;
   background:      white;
   margin:          0.75em 0;
   padding:         0.75em 1.5em;
}

#main .floatbox table.simple {
   margin:          0.75em 0;
}

#main .floatbox table.simple th,
#main .floatbox table.simple td.highlight,
#main .floatbox table.simple th.highlight {
   color:           inherit;
   background:      white;
   margin:          0;
   padding:         0.25em 0.5em;
}


/********** Styles for Header **********/

        /* In this style sheet, headers are composed */
        /* of three parts: left, right and subheader */
        /* Left part is ideally an image.            */

#header {      /* Warning: not printed out on paper */
   color:           #003399;
   background:      #8CA8E6;
}

#header a:link,
#header a:visited {
   color:           #003399;
   background:      transparent;
}

#header .highlight,
#header a.highlight:link,
#header a.highlight:visited {
   color:           white;
   background:      transparent;
}

/* Left part of header (ideally an image but may be a link) */

#header div.left {
   float:           left;
   clear:           left;
   margin:          0;
   padding:         0;
}

#header div.left img {
   display:         block;  /* Otherwise IMG is an inline, causing gaps */
}

#header div.left,
#header div.left a:link,
#header div.left a:visited {
   font-size:       200%;
   font-weight:     bold;
   text-decoration: none;
   color:           white;
   background:      transparent;
}

#header div.left p {
   margin:          0 0 0 0.25em;
   padding:         0;
}

#header div.left .alt {
   color:           #FF9800;
   background:      transparent;
}

/* Right part of header is for external/global links, search, etc */

#header div.right {
   font-size:       90%;
   text-align:      right;
   margin:          0;
   padding:         0.5em 1.17em 0 1em;
   float:           right;
   clear:           right;
}

#header div.right a:link,
#header div.right a:visited {
   margin:          0;
   padding:         0 0.5em;
}

#header div.right form {
   margin:          0;
   padding:         0.25em 0.5em 0 0;
}

#header div.right form input {
   font-size:       95%;
   vertical-align:  middle;
}

/* Subheader for global links */

#header div.subheader {
   color:           white;
   background:      #003399;
   margin:          0;
   padding:         0;
   border:          1px solid #003399; /* Required for IE/Win */
   clear:           both;
}

#header div.subheader p {  /* To overcome an IE/Win unwanted padding */
        /* bug, still present in IE7.             */
   margin:          0;
   padding:         0.5em;
}

#header div.subheader a:link,
#header div.subheader a:visited {
   font-weight:     bolder;
   color:           white;
   background:      transparent;
   margin:          0;
   padding:         0 0.5em;
}

#header div.subheader .highlight,
#header div.subheader a.highlight:link,
#header div.subheader a.highlight:visited {
   color:           #FDA05E;
   background:      transparent;
}


/********** Styles for Left Sidebar **********/

#sidebar {      /* Warning: not printed out on paper */
   width:           12.5em;
   border-right:    1px solid #999999;
   float:           left;
   clear:           both;
}

#sidebar div {
   font-size:       95%;
   text-align:      left;
   margin:          0;
   padding:         0.5em 1em;
   border-bottom:   1px solid #999999;
}

#sidebar div.lighter {
   color:           inherit;
   background:      white;
}

#sidebar p {
   margin:          0.5em 0;
}

#sidebar .title a:link,
#sidebar .title a:visited {
   color:           black;
   background:      transparent;
}

#sidebar ul {
   list-style:      none outside;
   margin:          0.5em 0;
   padding:         0;
}

#sidebar ul li {
   margin:          0;
   padding:         0.125em 0;
}

#sidebar ul li.highlight {
   color:           inherit;
   background:      white;
   margin-left:     -1em;
   margin-right:    -1em;
   padding-left:    1em;
   border-top:      1px solid #999999;
   border-bottom:   1px solid #999999;
}

#sidebar ul li.highlight a:link,
#sidebar ul li.highlight a:visited {
   color:           black;
   background:      transparent;
}


/********** Styles for Footer **********/

#footer {
   font-size:       90%;
   text-align:      left;
   color:           white;
   background:      #6381DC;
   margin:          0;
   padding:         0.5em 1.67em 0.5em 15.25em;
   clear:           both;
}

#footer a:link,
#footer a:visited {
   text-decoration: underline;
   color:           white;
   background:      transparent;
}

#footer hr {
   display:         none !important;
}

/* End of the Sinorcaish style sheet */

</style>


  <link rel="StyleSheet" href="sinorcaish-screen.css" type="text/css" media="screen" />
  <link rel="StyleSheet" href="sinorcaish-print.css" type="text/css" media="print" />
</head>

<body>

<!-- For non-visual or non-stylesheet-capable user agents -->
<div id="mainlink"><a href="#main">Skip to main content.</a></div>


<!--  Header  -->

<div id="header">
  <div class="left">
    <p><a href="http://www.zap.org.au/documents/styles/sinorcaish/">Sinorca<span class="alt">ish</span></a></p>
  </div>

  <div class="right">
    <span class="hidden">Useful links:</span>
    <a href="index.html">Contacts</a> |
    <a href="index.html">Feedback</a> |
    <a href="index.html">Search</a> |
    <a href="index.html">About</a>
  </div>

  <div class="subheader">
    <p>
      <span class="hidden">Navigation:</span>
      <a href="index.html">Home</a> |
      <a href="index.html">Products</a> |
      <a href="index.html">Services</a> |
      <a href="index.html">Support</a> |
      <a href="index.html">About</a> |
      <a class="highlight" href="index.html">Other</a>
    </p>
  </div>
</div>


<!--  Left Sidebar  -->

<div id="sidebar">
  <div>
    <p class="title"><a href="index.html">Other</a></p>
    <ul>
      <li class="highlight"><a href="index.html">Overview</a>
        <span class="hidden">(this page)</span></li>
      <li><a href="template.html">Template</a></li>
      <li><a href="sample.html">Sample Page</a></li>
      <li><a href="logo.html">Logo Images</a></li>
    </ul>
  </div>

  <div>
    <p class="title">W3C Validation</p>

    <p>Check this document for <a
      href="http://validator.w3.org/check?uri=referer"
      title="Validate against the XHTML 1.0 Strict standard">XHTML
      1.0 Strict conformance</a> and <a
      href="http://jigsaw.w3.org/css-validator/check/referer"
      title="Validate against the CSS 2.1 standard">CSS 2.1
      conformance</a>.</p>
  </div>
</div>


<!--  Main Content  -->

<div id="main">

<div id="navhead">
  <hr />
  <span class="hidden">Path to this page:</span>
  <a href="index.html">Home</a> &raquo;
  <a href="index.html">Other</a> &raquo;
</div>


<h1>The Sinorcaish Stylesheet v1.3</h1>

<p>Welcome to the <strong>Sinorcaish stylesheet</strong>!  This stylesheet
gives your web site an attractive, clean-look interface while maintaining
a separation of style and content to the greatest possible extent.  This
allows you to concentrate on the structure and content of your documents,
safe in the knowledge that the Sinorcaish stylesheet will do a great job
of presenting them to the rest of the world.</p>


<h2>Features and Benefits</h2>


<div class="floatbox">
  <hr />
  <p class="title">Images for Sinorcaish</p>

  <p>The version of Sinorcaish available from the <a
    href="http://www.oswd.org/">Open Source Web Design group</a> does
    <em>not</em> contain any graphical images.</p>

  <p>If you would like some appropriate sample images that you can use in
    your own documents, you should download the version available from the
    <a href="http://www.zap.org.au/documents/styles/sinorcaish/">official
    Sinorcaish web site</a>.</p>

  <hr />
</div>


<p>The Sinorcaish stylesheet was designed with <em>you</em>, the web site
document writer, in mind:</p>

<ul>

  <li><p>The Sinorcaish distribution comes with an extensive <a
    href="sample.html">sample document</a> that illustrates many of the
    features of this stylesheet.  This eliminates the guess-work of asking
    &ldquo;how do I do that?&rdquo; in creating top-quality
    documents.</p></li>

  <li><p>A simple <a href="template.html">template</a> makes writing your
    own documents relatively painless.</p></li>

  <li><p>As much as possible, style has been separated from content; for
    example, tables are not used for visual formatting.  In addition, the
    amount of &ldquo;boilerplate&rdquo; markup is kept to a
    minimum.</p></li>

  <li><p>Full step-by-step instructions are included to make it easy for
    you to <a href="logo.html">create your own logo image</a> similar to
    the one used by Sinorcaish.</p></li>

  <li><p>Sinorcaish conforms to the <a
    href="http://www.w3.org/TR/xhtml1">XHTML 1.0 Strict</a> and <a
    href="http://www.w3.org/TR/CSS21"><acronym
    title="Cascading Style Sheets">CSS</acronym> 2.1</a> Web standards.
    This, along with an emphasis on structure and content, allows you to
    meet the <a href="http://www.w3.org/TR/WCAG10">Web Content
    Accessibility Guidelines 1.0</a> at Level Double-A (or even Triple-A)
    with ease.</p></li>

  <li><p>Sinorcaish has been tested under the latest versions of
    <a href="http://www.mozilla.org/products/firefox/">Mozilla Firefox</a>,
    <a href="http://www.konqueror.org/">Konqueror</a>,
    <a href="http://www.apple.com/safari/">Safari</a>,
    <a href="http://www.opera.com/">Opera</a>,
    <a href="http://lynx.isc.org/">Lynx</a> and
    <a href="http://www.microsoft.com/windows/ie/">Internet Explorer</a>.
    You can rest assured that your documents will look their best in
    <em>any</em> modern browser.</p></li>

</ul>


<h2>Inspiration and Acknowledgements</h2>

<p>The design of Sinorcaish was influenced by <a
href="http://www.oswd.org/design/preview/id/1165/">Sinorca</a>,
implemented by <a href="http://www.oswd.org/user/profile/id/3013/">Haran
Sivakumaran</a>.  Sinorca, in turn, was based on the look-and-feel of the
<a href="http://www.acronis.com/">Acronis</a> company web site as it
existed at the time.</p>

<p>Although the Sinorca stylesheet is quite good, it is rather limited: it
does not allow <span class="tooltip"
title="An example of a floating text box on this page is &ldquo;Images for Sinorcaish&rdquo;.">floating
text boxes</span>, does not really cater for computer-oriented
documentation (which requires appropriate styling for elements like <code
class="markup">&lt;code&gt;</code>, <code
class="markup">&lt;kbd&gt;</code> and <code
class="markup">&lt;pre&gt;</code>), and completely ignores (data) tables
and many other XHTML elements.  These limitations, along with the desire
to update parts of the visual interface, led to Sinorcaish: a complete
redesign and reimplementation of the Acronis look-and-feel.</p>

<p>The Sinorcaish stylesheet could not have been designed without Eric
Meyer&rsquo;s excellent book, <cite><a
href="http://www.oreilly.com/catalog/css2/">Cascading Style Sheets: The
Definitive Guide (Second Edition)</a></cite>, published by O&rsquo;Reilly
(ISBN-13 9780596005252).  This book is simply one of the best in its
class!  A <a href="http://www.oreilly.com/catalog/csstdg3/">Third
Edition</a> is now available&hellip;</p>


<h2>Some Testimonials</h2>

<p>Sinorcaish is being used successfully on web sites all over the world,
as illustrated by just some of the responses received by e-mail
(reproduced with permission):</p>

<ul>

  <li><p>&ldquo;Just saw your Sinorcaish template on OSWD and I must say
    that it&rsquo;s brilliant.  You&rsquo;ve obviously put a lot of work
    into it, and it really shows.  It looks great, is functional and the
    tutorial is an excellent inclusion.&rdquo;

    &mdash;&nbsp;<strong>Haran Sivakumaran, designer of <a
      href="http://www.oswd.org/design/preview/id/1165/">Sinorca</a></strong>,
      12th December, 2004 (the day Sinorcaish was accepted by the <a
      href="http://www.oswd.org/">Open Source Web Design</a>
      group!)</p></li>


  <li><p>&ldquo;1st i want to thank u for this wonderful template.  its a
    great work and will surely simplify my web-design work&hellip;  again,
    thank you kindly for your work &mdash; u made an html-hater like
    myself to be able to make a nice looking pages, and this my friend, is
    not an easy task <code>;)</code>&rdquo;

    &mdash;&nbsp;<strong>Elia Yehuda, <a
      href="http://user-contributions.org/intro.html">User
      Contributions.org</a></strong>, 29th December, 2004.</p></li>


  <li><p>&ldquo;I was just admiring all the work you put into the
    Sinorcaish CSS on the OSWD server and your own server.  I used Sinorca
    CSS for our small company web site&hellip;&rdquo;

    &mdash;&nbsp;<strong>David Parker, <a
      href="http://www.uplifting.com.au/">Uplifting
      Solutions</a></strong>, 10th January, 2005.</p></li>


  <li><p>&ldquo;I&rsquo;ve been looking all over the web for a starting
    point for my new site until I found <span class="url">oswd.org</span>.
    I narrowed it down to a half dozen templates and then had my family
    make the final choice.  Sinorcaish was the winner.  Thanks for making
    it available.  You saved me a ton of work.&rdquo;

    &mdash;&nbsp;<strong>Jim Chambers</strong>, 25th January,
      2005.</p></li>


  <li><p>&ldquo;I want to thank you for providing the Sinorcaish style
    sheets.  I&rsquo;ve never worked with style sheets before and
    I&rsquo;m using yours as a learning tool, as well as for the web pages
    for my online documents.  Thanks again for making it open
    source.&rdquo;

    &mdash;&nbsp;<strong>Jane Gilliam</strong>, 29th January,
      2005.</p></li>


  <li><p>&ldquo;I was about to redesign a website when I came to your
    Sinorcaish which I&rsquo;m using now for the relaunch.  It is really
    great!&rdquo;

    &mdash;&nbsp;<strong>Max Sievers, Fachschaft Biologie, Technische
      Universit&auml;t Darmstadt</strong>, 9th March, 2005.</p></li>


  <li><p>&ldquo;on OSWD i found your design Sinorcaish and i like it very
    much!  i&rsquo;m still a beginner in design of homepages, but with
    your example i will learn more and more how to make this
    things.&rdquo;

    &mdash;&nbsp;<strong>Markus von D&auml;niken</strong>, 30th March,
      2005.</p></li>


  <li><p>&ldquo;Just wanted to say hi and thank you very much for an
    excellent stylesheet.  It&rsquo;s not only the style as such but also
    the very profound and comprehensive documentation you have written
    which made the conversion from my old web page to the new style a
    matter of a few hours only (most time went into creating the shadowed
    logo with GIMP&hellip;)&rdquo;

    &mdash;&nbsp;<strong><a href="http://www.svenkrahn.de/">Sven
      Krahn</a></strong>, 2nd April, 2005.</p></li>


  <li><p>&ldquo;I found your design on OSWD website and I find it the most
    suitable for my needs among the others.  I basically need a design
    idea for a web admin system I am working on, it&rsquo;s an intranet
    thing for administring our business ecc.  Yours really has some good
    usability standards and it&rsquo;s pretty stylish.&rdquo;

    &mdash;&nbsp;<strong>Maxim Maletsky</strong>, 11th May, 2005.</p></li>


  <li><p>&ldquo;I liked the template and the modifications you made on the
    original design of Haran.  Thank you for the effort and making it such
    a good template.&rdquo;

    &mdash;&nbsp;<strong>Sanjay Saha</strong>, 21st June, 2005.</p></li>


  <li><p>&ldquo;I am a registered nurse and in a graduate program at Duke
    University in Durham, North Carolina, USA&hellip;  I am not a
    professional web designer and will not be one.  I like your template
    because of the usability considerations and the ample documentation
    you include (very useful for us novices) and appreciate all your hard
    work.&rdquo;

    &mdash;&nbsp;<strong>Kenneth Bavier</strong>, 22nd June,
      2005.</p></li>


  <li><p>&ldquo;Just wanted to say thanks for your Sinorcaish stylesheet
    which I have found on OSWD.  It is by far the best documented
    stylesheet at their website and I was just overwhelmed by all your
    instructions how to use it, specialities to it, plus a brief
    html-sampler.  Wow!  You made it easy to get my head around CSS, which
    I have never worked with before.&rdquo;

    &mdash;&nbsp;<strong>Johann Balheim</strong>, 9th July, 2005.</p></li>


  <li><p>&ldquo;I have literally looking for months for a style that was
    both pleasing to look at <em>and</em> easy to use.  Your Sinorcaish is
    both.  I have put it in use at my website.&rdquo;

    &mdash;&nbsp;<strong>Charlie Smith, Smith Data Processing
      Services</strong>, 10th January, 2006.</p></li>


  <li><p>&ldquo;I just finished reading the instruction page you have
    written for the latest version of Sinorcaish (downloaded from Open
    [Source] Web Design a few days ago), and I am truly impressed&hellip;
    I could not very well ignore the opportunity to acknowledge this
    amazing contribution to the world of web design and publishing.
    Thank you for demonstrating so thoroughly what can and should be
    accomplished with the web standards we have today (as opposed to
    waiting for some distant future of consistent user agent support for
    these definitions), and thank you additionally for reminding me what
    humility is <code>:-)</code>.&rdquo;

    &mdash;&nbsp;<strong>Seth Steben</strong>, 29th January, 2006.</p></li>


  <li><p>&ldquo;Long time I looked for a template for my site based on
    CMS.  I have found the Sinorcaish Stylesheet, and I admired with
    unique typographics of this fine template.  It is magic.  This
    template is made with huge professionalism.  Even if someone will not
    use it in the work, all should look at this template because it is a
    classical example.&rdquo;

    &ldquo;<span lang="ru"
    title="Part of a much longer e-mail sent 26th November, 2006.">Sinorcaish
    &mdash; &#x044D;&#x0442;&#x043E;
    &#x0443;&#x043D;&#x0438;&#x043A;&#x0430;&#x043B;&#x044C;&#x043D;&#x0430;&#x044F;
    &#x0430;&#x0432;&#x0442;&#x043E;&#x0440;&#x0441;&#x043A;&#x0430;&#x044F;
    &#x0440;&#x0430;&#x0431;&#x043E;&#x0442;&#x0430;.
    &#x0421;&#x043F;&#x0430;&#x0441;&#x0438;&#x0431;&#x043E;.</span>&rdquo;

    &mdash;&nbsp;<strong>Dmitry Surrentchick</strong>, 22nd July,
      2006.</p></li>


  <li><p>&ldquo;The main reason for [writing] is to let you know that I
    (an old technically savvy geek with 40+ years of verifiable
    experience in the business) am quite impressed with the quality of
    the workmanship used in the design of this template.  Very well
    done!&rdquo;

    &mdash;&nbsp;<strong>Beryl Shmuel</strong>, 13th October, 2006.</p></li>

</ul>


<h2>The Final Word</h2>

<p>The Sinorcaish stylesheet was created by <a
href="http://www.zap.org.au/~john/">John Zaitseff</a> and submitted to
the <a href="http://www.oswd.org/">Open Source Web Design group</a> in
December, 2004; it was last updated in March, 2007.  You should consult
the <a href="http://www.zap.org.au/documents/styles/sinorcaish/">official
Sinorcaish web site</a> for updated style sheets and associated
images.</p>

<p>You may freely redistribute and/or modify the Sinorcaish CSS stylesheet
files (<a href="sinorcaish-screen.css" type="text/css"
class="fn">sinorcaish-screen.css</a> and <a href="sinorcaish-print.css"
type="text/css" class="fn">sinorcaish-print.css</a>) on the condition that
the original copyright notice is preserved.  The same condition applies to
this <a href="index.html">overview document</a>, to the <a
href="sample.html">sample document</a> and to the <a href="logo.html">logo
image instructions</a>.  You may redistribute and/or modify the associated
<a href="template.html">template file</a> without <em>any</em> such
restriction.  These conditions may be waived; write to <a
href="mailto:J.Zaitseff@zap.org.au">John Zaitseff</a> for details.</p>

<p>Your comments, suggestions, corrections and enhancements are always
warmly welcomed!  Please send these by e-mail to <a
href="mailto:J.Zaitseff@zap.org.au"
class="email">J.Zaitseff@zap.org.au</a>.  In addition, you are encouraged
to send a short note to the same address should you use this stylesheet in
one of your own web sites.  Happy coding!</p>


<br id="endmain" />
</div>


<!--  Footer  -->

<div id="footer">
  <hr />
  Copyright &copy; 2004&ndash;07, John Zaitseff.  All rights reserved.
  <span class="notprinted">
    <a href="index.html">Terms of Use</a>.
    <a href="index.html">Privacy Policy</a>.
  </span>
  <br />

  This web site is maintained by
  <a href="mailto:J.Zaitseff@zap.org.au">John Zaitseff</a>.
  Last modified: 22nd March, 2007.<a href="http://csstemplatesfree.net">CssTemplatesFree.net</a>
</div>

</body>
</html>
Related examples in the same category

1.	SimpleSimple
2.	simplestyle_1
3.	simplestyle_2
4.	simplestyle_3
5.	simplestyle_4
6.	simplestyle_5
7.	simplestyle_6
8.	pomodoro
9.	portcentral
10.	portfolio-extended
11.	portfolio
12.	postscriptum
13.	powderpuff
14.	power
15.	precision
16.	predilection
17.	premiumseries
18.	prepaid
19.	presented
20.	pressurized
21.	prideandprejudice
22.	primitiveelement
23.	printing
24.	pristine
25.	private-lawyer-co
26.	product-landing-page
27.	production
28.	ProductPackage
29.	programme
30.	progress
31.	projection
32.	proofing
33.	Prosperity
34.	province
35.	purensimple
36.	purgatory_shuffle
37.	puzzled
38.	quadrangle
39.	quartz-istorage
40.	quatrain
41.	racetrackplaya
42.	radiance
43.	rainonleaves
44.	ramblingsoul-2
45.	ramblingsoul-9
46.	ramblingsoul3
47.	ramblingsoul4
48.	ramblingsoul5
49.	ramblingsoul7
50.	ramblingsoul_2
51.	ramblingsoul_3
52.	random
53.	rational
54.	realize
55.	realone
56.	rebel-magazine
57.	reckoning
58.	recreations
59.	reference
60.	regeneracy
61.	rehabilitation
62.	reinvent
63.	replenish
64.	republic
65.	resizeme
66.	resplendissant
67.	revolt-01
68.	ridinghood
69.	rockband
70.	rogue
71.	Rothko
72.	route66
73.	rust
74.	safe-as-houses
75.	sahara
76.	sampling
77.	Sapphire
78.	schemermag
79.	scotchmark
80.	scribbled
81.	secretlab
82.	seduction
83.	selcouth
84.	sensa
85.	settings
86.	shallowgrunge
87.	shalom-typo
88.	shape
89.	she
90.	showcase
91.	sifiso
92.	silenceandharmony
93.	SILK
94.	Simpatico
95.	sindromk
96.	singapore
97.	six-oh-six
98.	sixpence
99.	sixties_style
100.	skipopia
101.	skitemplate
102.	sky
103.	sliced
104.	slight_amnesia
105.	socialnet
106.	softenedcells
107.	solemnity
108.	solitude
109.	soloss
110.	solutions
111.	somewhere-peaceful
112.	soniatemplate
113.	space
114.	spaced
115.	spasaloon
116.	spatter
117.	speedracing
118.	spheroids
119.	spidercity
120.	splash
121.	splatt
122.	spontaneous