/*This is the CSS document for the Sun Swing Media Company website.*/
/*Designed by Brent Leavitt*/

/*This is general parameters for the document*/

body {

  margin: 0;
  padding: 0;
  color: #666628;
  font-family: arial, helvetica;	
  background-color: #A8A675;
  text-align: center;
  
}

a img {
  border: 0;
}

a {
  	color: #666628;
  	text-decoration: none;
}

a:hover{
color: #FF9900;
}


#wrap {
  width: 792px;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  background-color: #DAD6A5;

} 

#header {
  background-color: #A8A675;
  margin: 0;
  padding: 0;
}

#header .title a {
  background: url(../img/header.jpg) no-repeat top left;
  display: block;
  padding-top: 54px;
  font-size: 0;
  text-align: right;
  float: left;
  width: 234px;
  height: 0px;
  overflow: hidden;
}


.sitemap {
  padding-right: 30px;
  float: right;
  text-align: right;
  width: 528px;
  height: 54px;
  background: #A8A675;
 
}

.sitemap a {
  font-family: Placard Condensed, arial, _sans;
  font-size: 20px;
  text-decoration: none;
  position: relative;
  top: 34px;
}


#content_wrap {
  clear: both;
  height: 396px;
  width: 792px;
}

#menu_wrap {
  float: left;
  padding-top: 18px;
  width: 144px;
  height: 363px;
  background-color: #E4E1BE;
  
}

#flash_menu {
  float: left;
  padding-top: 15px;
  width: 144px;
  height: 363px;
  background: #DAD6A5;
}

#menu {
  margin-left: 0;  margin-right: 0;  margin-bottom: 0;
  padding-right: 18px;  padding-left: 18px;
  width: 108px;
  height: 0px;
  overflow: hidden;
  background: #DAD6A5;
  text-align: right; 
  font-weight: bold;
  font-family: verdana, arial, sans;
  font-size: 12pt;
  letter-spacing: -1px;
}
#menu_item_top {
border-top: dotted #666628 3px;
border-bottom: dotted #666628 3px;
height: 19px;
width: 108px;
padding-top: 50px;
}


#menu_item_top a{
height: 19px;
width: 108px;
padding-top: 50px;
background: url(../img/menu_bg.jpg) no-repeat top left;

}

#menu_item_top a:hover {
background: url(../img/menu_bg.jpg) no-repeat bottom left;
color: #A8A675;
}

.menu_item {
border-bottom: dotted #666628 3px;
height: 19px;
width: 108px;
padding-top: 50px;
}

.menu_item a{
height: 19px;
width: 108px;
padding-top: 50px;
background: url(../img/menu_bg.jpg) no-repeat top left; 
clear: both;
}

.menu_item a:hover {
background: url(../img/menu_bg.jpg) no-repeat bottom left; 
color: #A8A675;
}


#content {
  float: right;
  width: 648px;
  min-height: 396px;
  background-color: #F5F2E9;
}

/****************** Sub pages ***************************/
.page_menu{
 width: 628px;
 height: 18px;
 background: #E4E1BE; 	
  padding-left: 20px;
  font-size: 12px;
}

#page_title{
  width: 628px;
 padding-left: 20px;
  height: 72px;
 background: #666628;

}
/***************Page Title Graphics   *************************/
#web_design_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_web_design_and_web_development_shop.gif) top left no-repeat #666628;
 overflow: hidden;
}
/*
#web_portfolio_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_web_portfolio.gif) top left no-repeat #666628;
 overflow: hidden;
}

#original_web_packages_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_original_web_packages.gif) top left no-repeat #666628;
 overflow: hidden;
}

#web_applications_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_web_applications.gif) top left no-repeat #666628;
 overflow: hidden;
}
*/
#animation_shop_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_animation_shop.gif) top left no-repeat #666628;
 overflow: hidden;
}

#flash_animation_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_flash_animation.gif) top left no-repeat #666628;
 overflow: hidden;
}

#friend_swing_series_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_friend_swing_series.gif) top left no-repeat #666628;
 overflow: hidden;
}

#theater_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_theater.gif) top left no-repeat #666628;
 overflow: hidden;
}

#peach_baby_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_peach_baby.gif) top left no-repeat #666628;
 overflow: hidden;
}

#company_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_company.gif) top left no-repeat #666628;
 overflow: hidden;
}

#news_room_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_news_room.gif) top left no-repeat #666628;
 overflow: hidden;
}

#site_map_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_site_map.gif) top left no-repeat #666628;
 overflow: hidden;
}

#_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_.gif) top left no-repeat #666628;
 overflow: hidden;
}


#designed_web_packages_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_designed_web_packages.gif) top left no-repeat #666628;
 overflow: hidden;
}



#page_not_found_title{
  width: 628px;
 padding-top: 72px;
 height: 0px;
 background: url(../img/title_page_not_found.gif) top left no-repeat #666628;
 overflow: hidden;
}

/******************* end Page Title Graphics  *******************************/


#breadcrumb{
 padding-left: 20px;
 padding-top: 5px;
 font-size: 10px;
}

#content_text{
padding: 20px 30px 20px 20px;
text-align: justify;
}

#content_text_portfolio{
padding: 20px ;
text-align: justify;
}

#artwork_name_right{
text-align: right;

}

#content_text h3{
clear: both;
margin: 30px 0 10px 0;
padding-bottom: 10px;
border-bottom: dotted #666628 3px;
}

#content_text_portfolio  h3{
clear: both;
margin: 30px 0 0 0;
padding-bottom: 0;
border-bottom: dotted #666628 3px;
}


.content_right{

width:600px;
height: 300px;
clear: both;
}

.content_left{
width:600px;
height: 300px;
float:left;
}

.content_layout{
width: 300px;
height: 300px;
float:left;

}



.content_right img{
clear: both;
float:right;
padding-left: 30px;
}

.content_left img{
clear: both;
float:left;
padding-right: 30px;
}

#web_icon_links{
width: 598px;
height: 223px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}


#designed_icon {
width: 274px;
height: 223px;
border-right: dotted #666628 3px;
padding-right: 10px;
}

#designed_icon_a{
width: 274px;
height: 0px;
padding-top: 223px;
overflow: hidden;
background: url(../img/designed_icon.jpg) top left no-repeat;
}

#original_icon{
float: right;
width: 301px;
height: 223px;
}

#original_icon_a{
width: 301px;
height: 0px;
padding-top: 223px;
overflow: hidden;
background: url(../img/original_icon.jpg) top left no-repeat;
}

#web_portfolio{
border-top: dotted #666628 3px;
padding: 10px 0;
}

.package img {
padding: 20px 50px 0 50px;

}

.web_design_image {
float: right;
}

#temp{
padding: 40px;
}

#content_flash{
  width: 648px;
  height: 396px;
}

#content2_wrap {
  margin-right: 18px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background: #DAD6A5;

}

#content2_spacer {
  width: 144px;
  height: 138px;
  float: left;
}

#content2 {
  margin-top: 14px;
  margin-bottom: 14px;
  padding-right: 14px;
  padding-left: 14px;
  float: right;
  border-left: dotted #666628 3px;
  border-right: dotted #666628 3px;
  width: 458px;
  background-color: #DAD6A5;

  
}

#content2_right {
  margin-top: 14px;
  margin-bottom: 14px;
  border-right: dotted #666628 3px;
  margin-left: 10px;
  padding-right: 10px;
  float: right;
  width: 110px;
  min-height: 140px;
}

#main {
  margin: 0 0 0 10px;
  padding: 20px;

  width: 360px;
}


#main_wrap {
  background-color: #F5F2E9;
  border-top: 18px solid #E4E1BE;
  float: right;
  width: 648px;
  min-height: 396px;
  
}


#main_right_side {
  float: right;
  width: 160px;
  margin: 20px;
  padding-left: 20px;
  border-left: dotted #666628 3px;
  min-height: 358px;
}


#main_right_side a img {
  border: 0;
  width: 160px;
}

#payment{
  width: 380px;
  border-top: dotted #666628 3px;
  padding: 20px;
  margin: 10px 0 10px 10px;
  
}

#payment form{
 float: right;
 margin-top: 25px;
}

#payment h2{
margin: 0;
}

#footer {
  clear: both;
  background-color: #DAD6A5;
  text-align: center;
  font-family: arial, helvetica;
  color: #666628;
  font-size: 10px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}


#footer a img {
  border-style: none;
}

#links {
  padding: 20px;
}



/*Font Declarations*/


	.small { 
	font-family: arial, helvetica;
	color: #666628;
	font-size: 12px;
	text-decoration: none;
 	text-align: right;
	position: relative;
	top: 50px;
}

	.small1 { 
	font-family: arial, helvetica;
	text-align: right;
	color: #666628;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
 

	.small1:link, .small1:visited {
	color: #666628;
}

h1, h2, h3 {	font-family: Placard Condensed, arial, _sans;
	margin-top: 5px;
	font-size: 30px;
	text-decoration: none;
	text-align: left;
	
}

#content_text h1 a{text-decoration:none; color: #666628;}

#content2 h1{
font-family: arial, helvetica;
font-size: 20px;
color: #000000;

}

h4{
font-size: 18px;
}


	.med:link, .med:visited { font-family: arial, helvetica;
	color: #666628;
	font-size: 14px;
	text-decoration: underline;
}

	.med:hover { font-family: arial, helvetica;
	color: #000;
	font-size: 14px;
	text-decoration: none;
}

	.med1:link, .med1:visited { font-family: arial, helvetica;
	color: #666628;
	font-size: 14px;
	text-decoration: none;
}

	.med2 { font-family: arial, helvetica;
	color: #000;
	font-size: 14px;
	text-decoration: none;
}

	p, #content_text ul { font-family: arial, helvetica;
	color: #666628;
	font-size: 14px;
	line-height: 20px;
	
	
}

	p a {
       text-decoration: underline;
		
}


	#main_right_side p a{
  	color: #666628;
  	text-decoration: none;
}

	#main_right_side p a:hover {
  	color: #000;
}




/***********THESE ARE FOR THE ANIMATION PAGES************/
.border_wrap{
 border-top: dotted #666628 3px;
 padding: 10px 0;
 clear: both;
}


#intro_right_side{
float: right; 
text-align: right; 
padding-left: 20px;
clear: both;
}

a.money_btn{
display: block;
float: right;
padding-bottom: 107px;
height: 24px;
width: 107px;
margin-left: 20px;
text-align: center;
margin-bottom: 10px;
}

a.money_btn span{
font-size: 13px;
font-weight: bold; 
}

a#fund_btn{
background: url(../img/fund_icon.jpg) bottom right no-repeat;
}

a#donate_btn{
background: url(../img/donate_icon.jpg) bottom right no-repeat;
}

a:hover#fund_btn, a:hover#donate_btn{
background-position: 3px bottom;
}
#main_right_side h4{
margin: 0; 
padding: 0
}

.progress_report{
font-size: 12px;
text-align: left;
padding: 0;
margin: 5px 0;
}

ul.progress_report{
margin: 5px 0 5px 15px;
}

.progress_report li{
font-size: 12px;
}

#fine_print p{
font-size: 12px;
}


#fine_print ul{
margin: 10px 0px;
}

#fine_print li{
font-size: 12px;
line-height: 15px;
margin-bottom: 5px;

}