DR Prototype Markup: Home Page/Actual Dressing Room v1

dabblet.css

/* DR Prototype Markup: Home Page/Actual Dressing Room v1 */
/* colors
	Expensive Black Wool: rgb(15,10,6);
	Pearl Baloon: rgb(249,244,240);
	Paler Flesh: rgb(255,246,238);
	Boredom: rgb(221,209,200);
	Designer Beige: rgb(196,189,182);
*/
/* border reference
	border: [size px] [line type (solid etc)] [color];
*/
}
body {
	width: 1200px;
	height: 100%;
	color: rgb(255,246,238);
	margin: 0 auto 0 auto;
	padding: 0px;		
	display: block-inline;
	font-family: 'Quattrocento Sans', helvetica, arial, sans-serif;
}
@font-face {
  font-family: 'Quattrocento Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Quattrocento Sans'), local('QuattrocentoSans'), url('http://themes.googleusercontent.com/static/fonts/quattrocentosans/v5/efd6FGWWGX5Z3ztwLBrG9coBJSyBiVuloIc8IXLz46o.woff') format('woff');
}
@font-face {
    font-family: 'raphaeliconsmedium';
    src: url('raphaelicons-webfont-webfont.eot');
    src: url('raphaelicons-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('raphaelicons-webfont-webfont.woff') format('woff'),
         url('raphaelicons-webfont-webfont.ttf') format('truetype'),
         url('raphaelicons-webfont-webfont.svg#raphaeliconsmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* global, repeated divisions */
header {
	position: absolute;	
	top: 0;    
	right: 0;
    	bottom: 0;
    	left: 0;
}
header #topbar {
	width: 100%;
	height: 30px;
	margin: 0px 0px 0px 0px;
	border: 0px;
	background-color: rgba(249,244,240,0.5);
	-moz-box-shadow: rgb(196,189,182) 2px 2px 5px;	
	-webkit-box-shadow: rgb(196,189,182) 2px 2px 5px;
	-border-radius-shadow: rgb(196,189,182) 2px 2px 5px;
}
.drlogosmall {
	Position: absolute;
	top: 5px;
	left: 8px;
}s
aside {
	font: 'Quattrocento Sans', Helvetica, sans-serif;
	position: absolute;
	left: 0px;	
	bottom: 0px;
}
section {

}
/* login space */

#sidebox {
	/* needs to have proper alignment (left) */
	font: inherit;
	float: left;
	width: 350px;
	position: absolute;
	top: 30px;
	left: 0px;
	bottom: 0px;
	background-color: rgb(15,10,6);
	-moz-box-shadow: rgb(196,189,182) 2px 2px 5px;
	-webkit-box-shadow: rgb(196,189,182) 2px 2px 5px;
	-border-radius-shadow: rgb(196,189,182) 2px 2px 5px;
}
#titlebox {
	font-family: helvetica, arial, sans-serif;
	margin: 0px auto auto auto;
	vertical-align: top;
}
#welcometitle {
	color: rgb(255,246,238);
	font-size: 18pt;
	margin: 10px 0px 0px 10px;
}
#welcomesub {
	color: rgb(255,246,238);
	font-size: 12pt;
	margin: 0px 0px 0px 11px;
}
#homelogin {
	margin: auto auto auto 10px;
	font-family: 'Quattrocento Sans', helvetica, arial, sans-serif;
}

/* login forms */
form {
	font-size: 16pt;
}
.logtextbox {
	height: 30px;
	width: 250px;
}
.signinsubmit {
	height:50px;	
	width: 170px;
	font-family: 'Quattrocento Sans', helvetica, arial, sans-serif;
	font-size: 14pt;
	background:
	-webkit-linear-gradient(top, #fff, #f0f0f0);	
	-moz-linear-gradient(top, #fff, #f0f0f0);
	-linear-gradient(top, #fff, #f0f0f0);
	-moz-border-radius: 5px;		
	-webkit-border-radius: 5px;
	-border-radius: 5px;
	border: 1px solid rgb(196,189,182);
	cursor: pointer;
}
/* ******** Main Content ******** */
/* slide space */

#droomslides {
	width: 69%;
	margin: 0px;
	float: left;
	position: absolute;    
	top: 30px;
	right: 0;
    	bottom: 0px
}

/*  ---   ** Actual Dressing Room **  ---  */

.homeprof {
	background-color: rgba(0,0,0,.1);
}
.recclothtext {
	/* title for recent clothing and other info */
	margin: 10% 0px 0px 5%;
	font-size: 12pt;
	color: rgb(221,209,200);
	font-family: Helvetica, Arial, sans-serif;
	
}
.recclothcon {
	/* recent clothing container */
	position: absolute;
	top: 18%;
	left: 4%;
	height: 200px;
	width: 280px;
	float: left;
	list-style: none;
	display: inline;
	background-color: inherit;
	border: 1px solid rgb(255,246,238);
	whitespace: nowrap;
}
.arrowleft {
	font-family: 'raphaeliconsmedium';
	font-size: 20pt;
	color: rgb(255,246,238);
	text-shadow: 0px 0px 3px rgb(15,10,6);
	position: absolute;
	left: 5px;
	margin: 42% auto auto auto;
}
.arrowright {
	font-family: 'raphaeliconsmedium';	
	font-size: 20pt;
	color: rgb(255,246,238);
	text-shadow: 0px 0px 3px rgb(15,10,6);
	position: absolute;
	right: 5px;
	margin: 42% auto 0% auto;
}
.recclothl {
	/* left recent clothing box */
	margin: 7% auto auto auto;
	height: 80%;
	width: 40%;
	border: 1px solid rgb(221,209,200);
	background-color: white;
	display: inline;
	float: left;
}
.recclothr {
	/* right recent clothing box */
	margin: 7% auto auto 3%;
	height: 80%;
	width: 40%;
	border: 1px solid rgb(221,209,200);
	background-color: white;
	display: inline;
	float: left;
}

/* container for selected outfit pieces */

.selectedclothcon {
	float: right;
	
}

/* ****** end of main content ****** */

/* footer */
footer {


}
nav {

}
.smallbnav {
	/* b stands for bottom */
	position: absolute;
	bottom: 15px;
}
.smallbnav > ul {
	list-style: none;
	display: inline;
	padding: 0px auto 0px auto;
}
.smallbnav > ul > li {
	display: inline;
	margin: 0px 3.5% 0px 4%;
}
.smallbnav a {
	text-decoration: none;
	font-family: 'Quattrocento Sans', helvetica, arial, sans-serif;
	color: rgb(255,246,238);
}

.smallbnav a:hover {
	text-decoration: none;
	font-family: 'Quattrocento Sans', helvetica, arial, sans-serif;
	color: rgba(255,246,238,0.7);
	cursor: pointer;
}

dabblet.html

<body>
	<header>
		<div id="topbar">
			<img class="drlogosmall" src="http://f.cl.ly/items/370w1x3p320D0t400r14/[email protected]_-Dressing-Room-logo-.jpg-&-.png" />
		</div>
	</header>
	<!--aside needs to have styling to separate it from the body. Also have it take up about 33% of page.-->
	<aside id="sidebox">
		<!--Some kind of welcome and description of the service. Also an indication of sign in.-->
		<div id="titlebox" style="background-color:rgba(0,0,0,.2)">
			<h2 id="welcometitle">Welcome Joe!</h2>
			<p id="welcomesub">You look nice today.</p>
		</div>
		<h3 class="recclothtext">Recent choices: </h3>
		<section class="homeprof">
			<ul class="recclothcon">
				<li class="arrowleft"><</li>
				<li class="recclothl"></li>
				<li class="recclothr"></li>
				<li class="arrowright">></li>
			</ul>
		</section>
		<footer>
			<nav class="smallbnav">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Terms</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</footer>
	</aside>
	<!--picture turnstyle goes here-->
	<section id="droomslides">
		<img src="" />
	</section>
</body>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}