CSS

dabblet.css

/**
* CSS
* 
* @version 2.0
* @author Louis Bullock
* louisbullock.com.au
*
*/

/* RESET
------------------------------------------------------------*/

* {margin:0;padding:0;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,.footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,.footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline}html{font-size:100%}body,button,input,select,textarea{font-family:sans-serif}a{color:#00e}a:visited{color:#551a8b}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#222}pre,code,kbd,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:none}q:before,q:after{content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}svg:not(:root){overflow:hidden}fieldset{margin:0 2px;padding:.35em.625em.75em}legend{margin-left:-7px}button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0}button,input{line-height:normal;overflow:visible}table button,table input{overflow:auto}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer}input[type=checkbox],input[type=radio]{padding:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}audio:not([controls]),[hidden]{display:none}body,figure,form{margin:0}


/* BASICS
------------------------------------------------------------*/

html {
font-size:100%;
overflow-y:scroll;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none
}

html,body {
height: 100%;
overflow: hidden;
}

body {
font: normal normal normal 16px/24px Helvetica Neue, Helvetica, Arial, sans-serif;
word-wrap:break-word;
color:#333;
-webkit-font-smoothing: antialiased;
text-shadow: 0 0 1px rgba(0,0,0,0.01);
-webkit-text-stroke: 1px transparent;
text-rendering: optimizeLegibility;
background:#fff;
outline:0;
vertical-align:baseline;
-webkit-tap-highlight-color:rgba(0,0,0,0)
}

/* LINKS */
/* you can customize links further down the page too */
a:link, a:visited {
text-decoration: none;
color: #1A93CA;
 }
a:active {
color:#0B5577;
border-bottom:1px solid #0B5577;
}
a:hover {
border-bottom:1px solid #86c8e3;
}

a img {
border: none;
}

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* TYPOGRAPHY
------------------------------------------------------------*/
/* 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 */

h1 { font-size: 24px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 21px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 18px; margin-bottom: 1em; }
h4 { font-size: 16px; margin-bottom: 1em; }

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p, code, blockquote { width: 450px; margin-bottom: 1em; /* line-height: 1.3em; */ }

/* Highlight */
.highlight { background: #FFC645; color: #111; }

/* CONTENT, LAYOUT etc
------------------------------------------------------------*/

/* WRAPPER */
/* To center your website, edit the index.php, and add this: <div class="wrapper"> before <div id="index">, and then put: </div> before <plugin:page:append_page /> */
.wrapper {
position:relative;
width:940px;
margin:0 auto;
padding:0
}

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */

#index, #exhibit {
height:100%;
}


#index {
width: 215px;
background: white;
float:left;
}

#exhibit {
margin: 0 0 0 215px;
background:#eee;
}

/* styling the index */
#index ul { list-style: none; margin: 0; padding:0;}
#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: bold; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link, #index a:visited {  }
#index a:hover {  } 
#index a:active {  } 


/* links styles only for the #exhibit region */
#exhibit a:link, #exhibit a:visited {  } 
#exhibit a:hover {  } 
#exhibit a:active {  } 

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 27px 9px 25px 27px; }

/* this is where you pad them separately */
#index .container {  }
#exhibit .container {  }


/* MISC
------------------------------------------------------------*/

::selection,::-moz-selection,::-webkit-selection {
background:#fecb6e;
text-shadow:none
}

img::selection,img::-moz-selection,img::-webkit-selection {
background-color:transparent
}​

dabblet.html

<!doctype html>
<html lang='en-us'>
<head>
<meta charset='utf-8'>
<title>Main : Louis Bullock</title>

<link rel='alternate' type='application/rss+xml' title='RSS' href='http://cdn.host22.com/xml/' />

</head>
<body class='exhibits section-1 exhibit-1 format-visual_index'>
<div id='index'>
<div class='container'>

<div class='top'><h1><a href='/' title='Louis Bullock'>Louis Bullock</a></h1></div>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://cdn.host22.com/index.php/project/' id='section_link_2'>Projects</a></span>
<ul>
</ul>
</li>
</ul>
<ul class='section active_section' id='section_1'>
<li><span id='section_title_1' class='section_title active_section_title'><a href='http://cdn.host22.com/' id='section_link_1'>Main</a></span>
<ul>
</ul>
</li>
</ul>

<div class='bot'><p>Copyright 2007-2012<br />
<a href='http://www.indexhibit.org/'>Built with Indexhibit</a></p></div>


</div>
</div>

<div id='exhibit'>
<div class='container'>

<div class='top'><!-- --></div>
<!-- text and image -->

<!-- end text and image -->

</div>
</div>


</body>
</html>​

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}