/* CSS Document */

/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #FD6000;
	}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #FD6000;
	}

h3	{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #999999;
	font-style: italic;
}

h4	{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	color: #999999;
	font-style: italic;
}

.smalltext	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	font-style: italic;
}

.redtext {
	font-size: 12px;
	color: #CC0000;
}

.img  {
	padding: 0 0 0 5px;
}
img {border: 0;}

img.thumbpad {
	padding: 0 0 3px 0;
}

p  {
    font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
	line-height: normal;
}

body {
background-image: url(images/bg.jpg);
background-position: center;
background-repeat:repeat-y;
background-color: #f6f5f0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center; /* Centers the page content container in IE 5 browsers. */
}

a {
color: #666666;
}

a:hover {
text-decoration: none;
color: #F29900;
}

.normal {
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
.thximg { margin-bottom:-50px;}

#outerWrapper {
	background: url(images/header4.jpg) no-repeat;
	background-color: #fff;
	margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: left; /* Redefines the text alignment defined by the body element. */
	width: 800px;
}

#header {
  height: 350px;
  font-size: 18px;
  font-weight: bold;
  line-height: 15px;
}
#contact {
	background-color:#0F0;
	height:30px;
	width:70px;
}


/*navigation menu*/

#minitabs {
  float: left;
  text-align: left; 
  color: #7D8085; 
  height: 10px;
  width: 60px;
  padding: 10px 10px 0 0;
  margin: -130px 2px 0px 0;
  list-style: none;
	left: 288px;
	top: 155px;
}

#minitabs li {
margin: 0 0 6px 0;
padding:  0 10px 0 10px;
border-bottom: 1px solid #F29900;
}

#minitabs a {
font-weight: bold;
text-decoration: none;
color: #7D8085;
}

#minitabs a.active {
padding-bottom: 0px;
color: #F29900;
}

#minitabs a:hover {
    color: #F29900; 
	text-decoration: none; 
}

/*navigation menu end*/

/*--Home Pge Gallery Main Container--*/
.main_view {
	float: left;
	position: relative;
	margin-top:-20px;
	padding: 0 0 30px 0px;
}
/*--Window/Masking Styles--*/
.window {
	height:280px;	width: 800px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:70px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 75px;
	background: url(images/paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/*End homepage Gallery Viewer*/

#bizzpack a{
	background:url(images/bizzpacks.png);
	width:256px;
	height:120px;
	float: right;
	display: block;
	border: none;
	text-indent: -9999px;
	overflow: hidden;
		position: relative;
	margin: 30px -140px 0 20px;

		}

#bizzpack a:hover{background:url(images/bizzpacks_hover.png);}

#leftColumn1 {
  background-color: #ebebeb;
  float: left;
  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 200px;
}

#content {
  margin: 0 0 0 60px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 50px 130px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  min-height: 200px;
}

#design {
	margin: 30px 5px 20px 0;
	width: 170px;
	float: left;
}

#illustration {
	margin: 30px 0 20px 0;
	padding: 0 10px 0 25px;
	width: 170px;
	float: left;
	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #999999;
	border-left-width: 1px;
	border-left-style: dashed;
	border-left-color: #999999;
}

#photo {
	margin: 30px 10px 20px 25px;
	width: 170px;
	float: left;
}
#needs {
	width:140px;
	float:right;
	margin: -290px 0 0 0;
	padding-right: 50px;
	}

/* ----------- My Form ----------- */
.myform{
margin: 0;
width:400px;
height:480px;
padding:0;
}

/* ----------- stylized ----------- */
#stylized{
background:#FFF;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:dashed 1px #999;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
font-size:16px;
text-align:right;
width:140px;
float:left;
}
#stylized .line2{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #999;
width:220px;
margin:2px 0 20px 10px;
}
#message{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #999;
width:220px;
height: 100px;
margin:2px 0 20px 10px;
}

.button2 {
	background:url(images/submit.png) no-repeat;
width:90px;
height:50px;
border: none;
text-indent:-9999px;
cursor: pointer;
}
.button2:hover
 {
     background: url(images/submit.png) 0 -51px no-repeat;
	 cursor:pointer;
 }

/* ----------- End Form stylise ----------- */
#footer {
	background: #21201b;
	height: 235px;
	margin: 20px 0 0 0;	
	position:relative;
}

#footer p {
	text-align:left;
	margin: 0;
	color: #999;
	}
	
.footertxt {
	font-size: 9px;
	color: #999999;
	text-align: center;
	position:absolute;
	bottom: 0;
	padding-bottom:3px;
	right: 10px;
}

#footLeft {
	width: 210px;
	float:left;
	margin: 20px 0 0px 60px;
}

#tweet {
	width:140px;
	position:absolute;
	left: 293px;
	top: 20px;

}
#tweet h2 a{display: block; /* Anchors are inline by default, change it to block... */
		width: 110px; height: 117px; /*...Which then allows us to specify width and height (according to the image) */
		margin-left:-15px;
		color: #6b5c4e;  /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
		text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
		background-image: url(images/contact.png);
	}
#tweet h2 a:hover{
		background-position: 0 -120px;
	}
#tweet h3 a{display: block; /* Anchors are inline by default, change it to block... */
		width: 129px; height: 76px; /*...Which then allows us to specify width and height (according to the image) */
		margin: -15px 0 10px 30px;
		color: #6b5c4e;  /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
		text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
		background-image: url(images/twitter.png);
	}
#tweet h3 a:hover{
		background-position: 0 -75px;
	}

div.feedburnerFeedBlock ul {
list-style-type: none;
margin: 8px 0 0 12px;
padding-left:0; 
color: #999;
}
div.feedburnerFeedBlock li { padding-top: 10px;}
div.feedburnerFeedBlock ul li div {
padding-bottom: 8px;
}
div.feedburnerFeedBlock a { color: #d8953d;
text-decoration:none;}
div.feedburnerFeedBlock a:hover { color: #FD6000;}
div.feedburnerFeedBlock span.headline {
font-weight:bold;
text-indent:0;
color: #FD6000;
padding-top: 8px;
}
#creditfooter {margin-left: -9999px;}
#FlickrImages{
	width: 340px;
	float: right;
	margin: 20px 10px 10px 0px;
	margin-bottom:1em;}
	
#FlickrImages p{ margin-left: 45px;}
#FlickrImages h2{ margin-left: 30px;}
	
#FlickrImages li{
float:left;
padding:4px;
list-style-type: none;
margin: 0 4px 4px 0;
}
#FlickrImages img{
width:70px;
height:60px;
border: none;
}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper #content .clearFloat {
  clear: left;
  display: block;
}