@charset "UTF-8";
/* ---------------MAIN STYLES---------------- */

* {
 margin: 0;
}

html, body {
	height:100%;
}

img {
	border:0;
}

body {
	background-color: #313131;
	background-image: url(../images/backgrounds/site_background.jpg);
	background-repeat: no-repeat;
	background-position:center 0;
	font-family:Arial, Helvetica, sans-serif;
}

a:link {
	color: #8DC63F;
}
a:visited {
	color: #8DC63F;
}
a:hover {
	color: #666;
}
a:active {
	color: #8DC63F;
}

h1 {
	font-size:x-large;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:lighter;
	color:#8DC63F;
	padding-bottom:10px;
}

h2 {
	font-size:x-large;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:lighter;
	color:#8DC63F;
	line-height:50px;
}

/* ---------------END MAIN STYLES---------------- */


/* ---------------NAV MENU STYLES---------------- */

#menubar {
	width:100%;
	height:75px;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
}

#mb_container {
	width: 780px;
	height: 75px;
	margin:auto;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
}

.menu{
	width: 100%; /* The menu should be the entire width of it's surrounding object, in this case the whole page */
} /* dark grey bg */

.menu ul{
	margin: 0;
	padding: 0;
	float: right;
}

.menu ul li{
	display: inline;
}	

.menu ul li a{
	float: left;
	text-decoration: none; /* removes the underline from the menu text */
	color: #666; /* text color of the menu */
	height:35px;
	padding: 40px 15px 0px 15px;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
	outline:none;
}

.menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
	color: #666;
	text-decoration: none;}

.menu ul li a:hover {
	color: #030;
	background-image:url(../images/backgrounds/menubar_hover.png);
	background-repeat:repeat-x;
} /* change the background color of the list item when you hover over it */

#about li.about a {
	color: #8dc63f;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
	cursor:default;
}
#services li.services a {
	color: #8dc63f;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
	cursor:default;
}
#portfolio li.portfolio a {
	color: #8dc63f;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
	cursor:default;
}
#contact li.contact a {
	color: #8dc63f;
	background-image:url(../images/backgrounds/menubar_back.png);
	background-repeat:repeat-x;
	cursor:default;
}

#logo {
	background-image:url(../images/graphics/ocg_logo.png);
	width:213px;
	height:91px;
	position:absolute;
	top:4px;
}

#logo a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  outline:none;
}


/* ---------------END NAV MENU STYLES---------------- */


/* ---------------HEADER STYLES---------------- */

#header {
	height:240px;
	width:780px;
	margin:auto;
	position:absolute;
}

#header_wrap {
	width:780px;
	margin:auto;
}

#header_pic {
	position:absolute;
	right:0px;
	top:-6px;
}

#header_quote {
	position:absolute;
	left:0px;
}


/* ---------------BODY STYLES---------------- */

#bodywrap {
	width:100%;
	margin-top:230px;
}

#body {
	width:100%;
	padding-top:35px;
	padding-bottom:35px;
	background-color:#FFF;
}

#content {
	width: 780px;
	margin:auto;
	line-height: 22px;
	font-size:small;
	overflow:auto;
}

/* copy styling */

#bodycopy {
	padding-bottom:25px;
	font-size:14px;
}

#bolded_copy {
	font-weight:bolder;
	color:#8dc63f;
	font-size:larger;
}

/* end copy styling */

#body_drop_top {
	width:100%;
	background-image:url(../images/backgrounds/top_drop.png);
	height:10px;
}

#body_drop_bottom {
	width:100%;
	background-image:url(../images/backgrounds/bottom_drop.png);
	height:10px;
	margin-bottom: 50px;
}
/* portfolio widgets */

.widget_box {
	width:780px;
}

.widget_header {
	width:780px;
}

ul.widget {
	list-style: none;
	margin:0;
	padding:0;
	display:inline;
}

ul.widget li {
	background-image:url(../images/backgrounds/widget_back.jpg);
	width:248px;
	margin-left:9px;
	margin-bottom:9px;
	height:175px;
	float:left;
}

ul.widget li:hover{
	background-image:url(../images/backgrounds/widget_back.jpg);
}

.widget_picture {
	width:228px;
	height:155px;
	background-color:#090;
	border:5px solid #fff;
	margin:5px;
}

.widget_caption {
	background-image:url(../images/graphics/prov_caption.png);
	background-repeat:no-repeat;
	background-position: 500px 0px;
	text-indent:-5000px;
	font-size:15px;
	width:228px;
	padding-top:120px;
	text-align:center;
	height:35px;
	margin:10px 10px;
	position:absolute;
	z-index:1000;
	line-height:14px;
}

.widget_caption:hover {
	background-image:url(../images/graphics/prov_caption.png);
	background-repeat:repeat-x;
	background-position: 0px 0px;
	color:#FFF;
	text-indent:0px;
	z-index:1000;
}

ul#widget_box li a {
	text-decoration:none;
	cursor: pointer;
	outline:none;
	border:none;
}



/* end portfolio widgets */

/* ---------------END BODY STYLES---------------- */

/* ---------------FOOTER STYLES---------------- */

.wrapper { 
	min-height: 100%; 
	height: auto !important; 
	height: 100%; 
	margin: 0 auto -25px;
}

.push { 
	height:25px;
}

.footer {
	font-size:10px;
	color:#8dc63f;
	height:25px;
	width:780px;
	margin:auto;
}

#footer_copy {
	padding-top:5px;
}

#sm_box {
	float:right;
	margin-right:5px;
}

ul.social_media {
	list-style: none;
	margin:0;
	padding:0;
	display:inline;
}

ul.social media li {
	float:left;
	text-indent:-5000px;
}

ul.social_media li#facebook {
	width:20px;
	height:20px;
	background-image:url(../images/graphics/sm_icons.png);
	background-position:bottom left;
	float:left;
	text-indent:-5000px;
}

ul.social_media li#facebook:hover {
	background-position:bottom right;
}

ul.social_media li#twitter {
	width:20px;
	height:20px;
	background-image:url(../images/graphics/sm_icons.png);
	background-position:top left;
	float:left;
	text-indent:-5000px;
	margin-left:5px;
}

ul.social_media li#twitter:hover {
	background-position:top right;
}

ul.social_media a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  outline:none;
}