/* www.saroy.net sub-page stylesheet */
/* Note to self - */
/* blah is resetting the HTML code, .blah is a class, #blah is an id (can only be applied once) */

/* ===== MAIN HTML ===== */
BODY {
	MARGIN: 0px;
	BACKGROUND: #eee;
	/* default font parameters */
	COLOR: #444;
	FONT-SIZE: 12px;
	FONT-FAMILY: verdana, arial, helvetica, sans-serif;
	TEXT-ALIGN: center;
}
A:link {
	COLOR: #333;
	TEXT-DECORATION: underline;
}
A:visited {
	COLOR: #369;
	TEXT-DECORATION: underline;
}
A:hover {
	COLOR: #369;
	TEXT-DECORATION: none;
}
A:active {
	COLOR: #69c;
	TEXT-DECORATION: none;
}
p.floatRight { FLOAT: right; VERTICAL-ALIGN: top; }
p.floatLeft { FLOAT: left; }
p.right { TEXT-ALIGN: right; }
p.left { TEXT-ALIGN: left; }


/* ===== PAGE LAYOUT ===== */

#outerBorder {
	MARGIN: 0px auto;
	WIDTH: 760px;
	BACKGROUND-COLOR: #ccf;
}
#outerBorderSub {
	MARGIN: 0px auto;
	WIDTH: 760px;
	BACKGROUND-COLOR: #ff9;
}
#innerBorder {
	MARGIN: 15px auto;
      WIDTH: 730px;
	BORDER: #000 1px dashed;
}
#innerBorderSub {
	MARGIN: 15px auto;
      WIDTH: 730px;
	BORDER: #000 1px dashed;
}
#header {
	MARGIN: 10px 10px 10px 10px auto;
	FONT-SIZE: 18px;
	COLOR: #000;
	TEXT-ALIGN: left;
}
#mainContainer {
	MARGIN: 20px 0px 10px 0px auto;
	WIDTH: 700px;
	TEXT-ALIGN: left;
}
#leftSide {
	FLOAT: left;
	MARGIN: 0px auto;
	PADDING: 0px 0px 0px 0px;
	WIDTH: 560px;
	TEXT-ALIGN: left;
}
#rightSide {
	FLOAT: right;
	MARGIN: 0px auto;
	PADDING: 0px 0px 0px 0px;
	WIDTH: auto;
}
.footer {
	MARGIN: 20px 10px 20px 10px auto;
	FONT-SIZE: 9px;
	TEXT-ALIGN: center;
}


/* ===== MAINPAGE SUB-LAYOUT ===== */
/* ----- BLOG ----- */
#blogcontainer {
	BORDER: #bbb 1px solid;
	PADDING: 0px 10px 10px 10px;
	BACKGROUND-COLOR: #fff;
	TEXT-ALIGN: left;
}
.dateHeader {
	FONT-SIZE: 12px;
	COLOR: #99f;
	FONT-WEIGHT: bold;
	TEXT-TRANSFORM: uppercase;
}
.postTitle {
	FONT-SIZE: 12px;
	COLOR: #555;
	FONT-STYLE: italic;
}
.post {
	FONT-SIZE: 12px;
	COLOR: #000;
}
.postImg {
	PADDING: 3px 3px 3px 3px auto;
	BORDER: 1px solid #aaa;
}
.postFooter {
	FONT-SIZE: 10px;
	COLOR: #aaa;
}

/* ----- NAV BAR ----- */
.navigation {
	FONT-SIZE: 11px;
	TEXT-ALIGN: right;
}

/* ----- FLICKR ----- */
.flickr-frame {
	BACKGROUND-COLOR: #ccf;
	TEXT-ALIGN: center;
	BORDER: 1px solid #bbb;
	PADDING-TOP: 8px;
	/* other code is in index.html file */
}
.flickr-photo {
	BORDER: 1px solid #aaa;
	PADDING: 2px 2px 2px 2px auto;
}

/* ===== BLOG POST STYLE HELPERS ===== */
.postTable { WIDTH: 540px; }
.postTableColumn {
	FLOAT: left;
	MARGIN: 0px 10px 0px 0px;
}

/* ===== TEXT STYLES ===== */
.white { COLOR: #fff; }
.ltGray { COLOR: #eee; }
.black { COLOR: #000; }
.mainblue { COLOR: #99f; }
.small { FONT-SIZE: 9px; }
.twelve {
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
}
.number {
	FONT-WEIGHT: bold;
	FONT-COLOR: #ccc;
}
.tripCaption {
	FONT-COLOR: #ccc;
	FONT-SIZE: 11px;
}

/* ===== IMAGE STYLES ===== */
img.floatRight {
	FLOAT: right;
	MARGIN: 3px;
	CLEAR: right;
}
.captionRight {
	FLOAT: right;
	MARGIN: 5px 0px 5px 5px;
	FONT-STYLE: italic;
	FONT-SIZE: 11px;
	TEXT-ALIGN: center;
	CLEAR: right;
}
img.floatLeft {
	FLOAT: left;
	MARGIN: 3px;
	CLEAR: left;
}
.captionLeft {
	FLOAT: left;
	MARGIN: 5px 5px 5px 0px;
	FONT-STYLE: italic;
	FONT-SIZE: 11px;
	TEXT-ALIGN: center;
	CLEAR: left;
}
.captionRow {
	MARGIN: 5px 5px 5px 5px;
	FONT-STYLE: italic;
	FONT-SIZE: 11px;
	TEXT-ALIGN: center;
}
img.whiteBorder { BORDER: 5px solid #fff; }