/*------------------------------------------------------------------
|     Site Color Theme
| Colors used 
| Dark Grey - 2f3234
| Mid Grey - 57595c
| Light Grey - 45484b
| Smoke White - dddddd
| Blue - 9cb9d5
| Dark Blue - 435b6f
--------------------------------------------------------------------*/
body, html{
	background-color:#2f3234;
	color:#efefef;
	font-family: "trebuchet ms",verdana, tahoma, verdana, sans-serif;
	font-size:1.1em;
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	width:100%;
}
/*=======================
|   Default Overrides
=========================*/
a {
	color:#9cb9d5;
        padding:0 2px;
	text-decoration:none;
}
a:hover {
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
	color:#dddddd;
}
img {
	border:none;
}
hr {	
	background-color:#57595c;
	border:0;
	color:#57595c;
	height:1px;
}
form {
	padding:0px;
	margin:0px;
}
	.formTag {
		float:left;
		margin-right:2px;
		margin-top:2px; 
		text-align:right; 
		width:58px;
	}
	.formTagTextArea {
		float:left;
		margin-right:2px;
		margin-top:2px; 
		text-align:right; 
		width:58px;
	}
	.formButtonContainer {
		width:100%;
	}
input {
	background-color:#45484b;
	border:1px solid #2f3234;
	color:#dddddd;
}
	.formInput {
		margin-top:2px;
		width:100%;
	}
textarea {
	background-color:#45484b;
	border:1px solid #2f3234;
	color:#dddddd;
	font-family: verdana, tahoma, verdana, sans-serif;
	font-size:.9em;
	overflow:auto;
}
	.textareaContainer {
		float:left;
		margin-top:2px;
		width:100%;
	}

/*=======================
|    Lists
=========================*/
ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0px;
	padding:0px;
	left:0px;
}
li {	
	display:block;
	float:left;
	list-style-type:none;
	margin:0px;
	padding:0px;
	width:auto;
	left:0px;
}
/*=======================
|    Headers
=========================*/
h1 {	
	display:inline;
	font-size:1em;
	font-weight:normal;
	margin:0px;
	padding:0px;
}
h2 {	
	display:inline;
	font-size:1em;
	font-weight:normal;
	margin:0px;
	padding:0px;
}
h3 {	
	display:inline;
	font-size:1em;
}
h4{
	display:inline;
	font-size:1em;
}
/*------------------------------------------------------------------
|     Containers
| 
--------------------------------------------------------------------*/
#siteContainer {	
	background:#45484b url(../images/bg1.png);
	position:relative;
	margin:0px auto;
	text-align:center;
	width:100%;
}
/*=======================
|   Top
=========================*/
#topContainerOutter {
/*url(../images/bgtop1.png) no-repeat 80% 0%*/
	background:#2f3234 url(../images/bgtop1.png) no-repeat 80% 0%;
	padding-top:5px;
	position:relative;
	height:85px;
	text-align:left;
}
	#topContainerInner {
		position:absolute; 
		text-align:left; 
		width:421px;
	}
	#topContent {
		/*this class is mainly used as an underlay for the image fade to keep the menu correctly aligned*/
		position:relative;
		right:83px;
		float:left;
		top:0px;
		visibility:hidden;				
	}
	.topMenu {
		font-size:1.1em;
		position:absolute;
		text-align:left;
		top:20px;
		right:5%;
	}
	.topMenu a {
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
		background:#777777;
		color:#efefef;
		float:left;
		height:25px;
		padding:10px 0px 10px 0px;
		margin-left:5px;
		text-align:center;
		width:108px;		
	}
	.topMenu a:hover {
		background-color:#435b6f;
		color:#efefef;
	}
	.topMenu .active {
		background-color:#435b6f;
		color:#efefef;
	}
	#logoImage {
		cursor:pointer;
		position:relative;
		right:83px;
	}
	
.linkbar {
	background-color:#57595c;
	height:40px;
}	
/*=======================
|   Main Content
=========================*/
#contentContainer {
	background:#414344 url(../images/bg1.png);
	font-size:.8em;
	position:relative;
}
#contentContainer a:hover {
	background-color:#45484b;
}
	.hugeBox {
		float:left;
		width:95%;
	}
	.biggerBox {
		float:left;
		width:55%;
	}
	.smallerBox {
		float:left;
		width:40%;
	}
.backgroundImageOfMe{
	float:left;
 	margin-right:5px;
	position:relative;
}
/*=======================
|   Background
=========================*/	
.backgroundHeader {
	font-size:.9em;
	font-weight:bold;
	margin:0px auto;
	width:150px; 
}
/*=======================
|   Latest Works
=========================*/
	#innerLatestWorkContent {
		position:relative;
	}
	.latestWorkHeader {
		font-size:.9em;
		font-weight:bold;
		margin:0px auto;
		width:140px; 
	}
		/*images*/
		.workLeftAlignedDiv {
			position:relative;
		}
		.workRightAlignedDiv {
			height:128px;
			overflow:hidden;
			position:absolute;
			right:0px;
			text-align:left;
			top:0px;
			width:36%;
		}	
		#rrdImage {
		cursor:pointer;
		margin:0px auto;
		position:relative;
		text-align:center;
		width:275px;
		display:block;
		}
	/*details*/
	#latestWorkDetails {
		position:relative;
	}
		.detailsLeftColumn {
			position:absolute;
			text-align:right; 
			width:70px;
		}
		.detailsRightColumn {
			left:80px;
			position:absolute; 
		}
	/*buttons*/
	.latestWorkImages {
		height:170px;
		overflow:hidden;
	}
	.latestWorkButtons {
		cursor:pointer;
		position:relative; 
		text-align:right;
	}
		#workButtonsContainer {
			width:234px;
			z-index:9999;
		}
			#aboutButtonContainer {
				width:112px;
			}
			#launchButtonContainer {
				width:112px;
				right:117px;
				position:absolute;
			}

/*=======================
|   Contact
=========================*/	
.contactHeader {
	font-size:.9em;
	font-weight:bold;
	margin:0px auto;
	width:100px; 
}
.formMsgC {
	font-size:.8em;
	float:left;
	margin:2px 0px 0px 5px;
	width:28%;
}
/*=======================
|   Blog Posts 
=========================*/
.blogPostHeader {
	font-size:.9em;
	font-weight:bold;
	margin:0px auto;
	width:180px; 
}
.blogPostHeaderContainer {
	position:relative;
	width:98%;
}
.blogPostTitle {
	font-size:1.2em;
	font-weight:bold;
	text-align:left;
	padding-left:5px;
}
.blogPostDate {
	position:absolute;
	top:2px;
	right:0px;
}
.blogHR {
	background:url(../images/blog/dottedLine.png) repeat-x;
	height:5px;
	margin:5px 0px 5px 0px;
	width:100%;

}
/*=======================
| About   Lists
=========================*/
	#aboutLinks a {
                -moz-border-radius:5px;
                -webkit-border-radius:5px; 
		background:#777777;
		border:1px solid #343434;
		color:#efefef;
		float:left;
		height:25px;
		padding:5px 0px 0px 0px;
		margin-left:5px;
		text-align:center;
		width:121px;		
	}
	#aboutLinks a:hover {
		background-color:#435b6f;
		color:#efefef;
	}
	#aboutLinks .active {
		background-color:#435b6f;
		color:#efefef;
	}
/*=======================
|   Bottom 
=========================*/
#bottomContainer {
	background-color:#57595c;
	color:#efefef;
	font-size:.8em;
	position:relative;
	height:auto;
}
	#bottomContainer  .botNavLinks a{
		background-color:#45484b;
		padding:3px;
		border:1px solid #4c4e51;
	}
	#bottomContainer  .botNavLinks a:hover{
		background-color:#9cb9d5;
		color:#57595c;
	}
#bottomBlogContainer {
	background-color:#2f3234;	
	color:#efefef;
	font-size:.8em;
	height:auto;
	position:relative;
}
#bottomBlogBG {
	background:#2f3234 url(../images/bottombg1.png) no-repeat 75% 40%;
}
#bottomBlogContainer a:hover {
	background-color:#435b6f;
}
	#bottomBlogContainer .botNavLinks a{
		background-color:#45484b;
		border:1px solid #333638;
		color:#efefef;
		padding:3px;
	}
	#bottomBlogContainer  .botNavLinks a:hover{
		background-color:#435b6f;
		color:#efefef;
	}
	.leftAlignedDiv {
		float:left;
		left:-1px;
		margin-right:10px;
		position:relative;
		text-align:left;
		top:0px;
		width:30%;
	}
	.rightAlignedDiv {
		position:absolute;
		right:5%;
		text-align:right;
		top:0px;
		width:40%;
	}
	#visitButton {
		background-color:#9cb9d5;
		color:#2f3234;
	}
	#aboutButton {
		background-color:#45484b;
		color:#efefef;
	}
/*------------------------------------------------------------------
|     Classes
| 
--------------------------------------------------------------------*/
/*=======================
|   Colors 
=========================*/
.colorDarkBlue {
	color:#435b6f;
}
.colorLightBlue {
	color:#9cb9d5;
}
.colorLightGrey {
	color:#57595c;
}
.colorSmoke {
	color:#dddddd;
}
/*=======================
|   Cursor
=========================*/
.cursorPointer {
	cursor:pointer;
}
/*=======================
|   Divs 
=========================*/
.innerDivAlign {
	margin:0px auto;
	position:relative;
	text-align:left;
	width:84%;
}

.roundedCorner {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.cornerStyleDarkGrey {
	background-color:#232323;
	text-align:center;
}
.cornerStyleMedGrey {
	background-color:#45484b;
	text-align:center;
}
.cornerStyleLightGrey {
	background-color:#57595c;
	color:#efefef;
	text-align:center;
}
.cornerStyleBlue {
	background-color:#9cb9d5;
	color:#2f3234;
	text-align:center;
}
.cornerStyleDarkBlue {
	background-color:#435b6f;
	color:#9cb9d5;
	text-align:center;
}
/*=======================
|   Image Fade 
=========================*/
.imageFadeAbsoluteRight {
	position:absolute; 
	right:0px
}
/*=======================
|   Positioning 
=========================*/
.absoluteRight {
	position:absolute;
	right:0px;
}
.absoluteRightButton2 {
	position:absolute;
	right:100px;
}
.alignCenter {
	text-align:center;
}
.alignRight {
	text-align:right;
}
.alignLeft {
	text-align:left;
}

.clear {
	clear:both;
}
.floatLeft {
	float:left;
	position:relative;
}
.floatRight {
	float:right;
}

.hidden {
	visibility:hidden;
}

.inline {
	display:inline;
}

.margin5px {
	margin:5px;
}
.margin5pxLeft{
	margin-left:5px;
}
.margin5pxRight{
	margin-right:5px;
}
.margin5pxTop{
	margin-top:5px;
}
.margin5pxTopBot {
	margin:5px 0px 5px 0px;
}
.margin10px {
	margin:10px;
}
.margin10pxLeft {
	margin-left:10px;
	position:relative;
}
.margin20pxLeft {
	margin-left:20px;
	position:relative;
}

.padding1px {
	padding:1px;
}
.padding2px {
	padding:2px;
}
.padding5px {
	padding:5px;	
}
.paddingtop5px {
	padding:5px;
}
.padding10px {
	padding:10px;
}
.padding20px {
	padding:20px;
}
.paddingTopBot20px {
	padding:20px 0px 20px 0px;
}
.paddingLeftRight10px {
	padding:0px 10px 0px 10px;
}

.positionAbsolute {
	position:absolute;
}
.positionRelative {
	position:relative;
}
.position85Left {
	position:relative;
	left:85%;
}

.width98 {
	width:98%;
}
/*=======================
|   Text 
=========================*/
.bold {
	font-weight:bold;
}
.fontSize8em {
	font-size:.8em;
}
.textBig {
	font-size:1.3em;
	font-weight:bold;
}
.textHuge {
	font-size:1.7em;
	font-weight:bold;
}
.textMed {
	font-size:1.2em;
}
.textMedBold{
	font-size:1.2em;
	font-weight:bold;
}
.textSmall {
	font-size:.7em;
}