/*
 * Styles for CamiStinson.com
 */


/*
 * GENERAL TAG STYLES
 */
body{
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12pt;
	letter-spacing: .12em;
	color: #333;
}

a{
	text-decoration: none;
	border-bottom: dotted 1px;
	color: #000;
	padding: auto 2px;
}

a:hover{
	color: #990022;
	border-bottom: none;
}

h1,h2,h3,h4,h5,h6 {
    /** background-color: rgb(136, 0, 102); */
	background-color: rgb(90,90,90);
	background-color: rgba(0,0,0, .5);
    border: solid 3px white;
    padding: 20px 5px 3px;
    font-weight: 100;
    color: white;
}

input {
    font-size: large;
}

textarea {
    font-size: small;
    width: 325px;
}

textarea, input {
    background: none;
    border: dotted 1px;
    padding: 3px;
    letter-spacing: .1em;
    font-family: Georgia, Times, "Times New Roman", serif;
}



/*
 * GLOBAL STYLES (APPLY TO ALL PAGES)
 */
#pageContent{
	position: absolute;
	top: 98px;
	left: 300px;
	right: 300px;
	z-index: 9;
}

#camiLogo{
	position: fixed;
	top: 5px;
	left: 5px;
	height: 101px;
	width: 272px;
	background-image: url(images/camiLogo.png);
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 9;
}

#mainnav{
	position: fixed;
	top: 108px;
	left: 16px;
	z-index: 9;
}

#mainnav ul, #mainnav ul li{
	list-type: none;
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#mainnav ul li a{
	color: #828282;
	font-size: 14pt;
	line-height: 1.9em;
	letter-spacing: .13em;
	border: 0;
	text-transform: UPPERCASE;
	background-color: transparent;
	padding: auto;
}

#bgCami{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 521px;
	height: 630px;
	background-image: url(images/bgCami.jpg);
	background-repeat: no-repeat;
	z-index: 0;
}

#bgCamiMask{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(images/bgCamiMask.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	z-index: 1;
}

#bgSmoke{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/bgSmoke.jpg);
	background-repeat: no-repeat;
	opacity: .6;
	filter: alpha(opacity=60);
	z-index: 2;
}

#bgStripes{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-image: url(images/bgStripes.png);
	background-repeat: repeat;
	opacity: .18;
	filter: alpha(opacity=18);
	z-index: 3;
}

#bgRococo{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/bgRococo.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	opacity: .06;
	filter: alpha(opacity=06);
	z-index: 4;
}




/*
 * BLOG ENTRY STYLES
 */
.blogentry {
    margin-bottom: 80px;
}

.blogentry .title {
    text-transform: uppercase;
    font-size: larger;
    letter-spacing: .15em;
	background-color: rgb(90,90,90);
    background-color: rgba(0,0,0, .5);  /** rgb(136, 0, 102); */
    color: #f0f0f0;
    padding: 20px 5px 3px;
    border: solid 3px white;
}

.blogentry .date {
    font-size: small;
    padding: 0 10px;
}

.blogentry .body {
    padding: 0 0 0 10px;
}



/*
 * CALENDAR STYLES
 */
#calendar{
	position: fixed;
	right: 15px;
	top: -267px;
	width: 237px;
	height: 300px;
}

#calendarTitle{
	position: absolute;
	right: 0;
	bottom: 0;
	height: 18px;
	font-size: 11pt;
	letter-spacing: .1em;
	color: #FFF;
	background-color: rgb(40,40,40);  /** #880066; */
	border-left: solid 4px #fff;
	border-bottom: solid 4px #fff;
	border-right: solid 4px #fff;
	padding: 4px 10px 7px;
	cursor: pointer;
	z-index: 9;
}

#calendarList{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 29px;
	background-color: rgb(100,100,100);
    background-color: rgba(90,90,90, .6);  /** #880066; */
    border-left: solid 4px #fff;
    border-right: solid 4px #fff;
    border-bottom: solid 4px #fff;
    z-index: 8;
    font-size: x-small;
    color: white;
    overflow-y: auto;
    overflow-x: hidden;
}

.calendarItem{
    padding: 1.5em 2em;
    float: left;
    clear: both;
    width: 180px;
}

.calendarItem .date{
    float: left;
    clear: left;
    font-size: large;
}

.calendarItem .time{
    float: right;
    clear: right;
    font-size: small;
    font-style: italic;
    color: #fff;  /** #AA1088; */
}

.calendarItem .title{
    float: left;
    clear: both;
}