@charset "utf-8";
/* ------------------------------------------------------------

 * Filename:              style.css
 * Description:           Global CSS
 * Vision:                1.0.0(2009-08-17)
 * Website:               http://next.sgda.cc
 * Autor:                 SGDA

------------------------------------------------------------ */

/*   __body 
------------------------------------------------------------ */
* { margin: 0; padding: 0; }

html { margin: 0; padding: 0; font-size: 62.5%; overflow-x: hidden; }
body { background: #F2F3F4; text-align: center; color: #000000; margin: 0; padding: 0; text-align: left; font-family:"Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; overflow-x: hidden; line-height: 1.8em; }

h1 {
	font-size: 1.2em;
	z-index: 2000px;
}

h2 {
	color: #ff5aa1;
	height: 30px;
}


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

p { line-height: 1.8em; color: #333; }

a { font-weight: bold; color: #ff5aa1; text-decoration: none; }
a:hover { color: #ff5aa1; text-decoration: underline; }
a.noHover:hover { text-decoration: none; }
*:active { outline: none; -moz-outline-style: none; }

a img { text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
img { -ms-interpolation-mode: bicubic; }

.hidden { display: none; }
.clear { clear: both; }

/*   __form
------------------------------------------------------------ */

textarea { border: #AAA 0px solid; }

textarea { width: 400px; padding-top: 4px; padding-left: 6px; background: #eeeeee; }

.textBox  { background: #eeeeee; height: 20px; width: 244px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; font-family: Helvetica, Arial, sans-serif; color: #333; padding-top: 4px; padding-left: 6px; margin: 0px; padding-right: 0px; font-weight: bold; outline: none; }

.submit { font-size:12px; background-color: #ff5aa1; font-weight: bold; color: #fff; border: 0px; margin-top: 10px; text-align: center; width: 80px; height: 25px; diaply: block; }

.radioLabel {  vertical-align: bottom; margin-left: 5px;  margin-right: 15px; line-height: 1.6em; }

.checkLabel { vertical-align: bottom; margin-left: 5px; }

/*   __layout
------------------------------------------------------------ */

#wrapper { width: 950px; margin: auto;  padding: 30px 0px 20px 0px;  }

/*   __header
------------------------------------------------------------ */

#header { position: relative; margin-bottom: 45px; }

#header h1 { font-size: 24px; }

#navMain { list-style-type: none; float: right; position: absolute; top: 0; right: 0; }

#navMain li { display: inline; margin-left: 5px; list-style-type: none; }

/*   __mainContent
------------------------------------------------------------ */

#mainContent { }

/*   __Channel
------------------------------------------------------------ */

.Channel { float: left; width: 310px; height: 225px; margin: 5px 10px 5px 0px; overflow: hidden; background: #FFFFFF; padding: 0; position: relative;}

#greatPeopleChannel, #tvChannel { margin-right: 0px; }

.designChannelContent { padding: 2px; margin-left: 86px; }

.designChannelContent ul li { float: left; width: 110px; height: 110px; position: relative; overflow: hidden; }

.designChannelContent ul li span { position: absolute; font-weight: bold; background: #000; height: 18px; width: 130px; color:#FFF; left: 0; bottom: 0; padding-left: 10px; padding-top: 3px; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }

.more { position: absolute; bottom: 0; left: 0; padding: 0px 0px 5px 15px;  }

#badDesignChannel .more a { color: #00A8EB }

.flashInfo { padding: 10px; }

/*   __navgation
------------------------------------------------------------ */

#navgation { margin-bottom: 10px; }

#navgation ul li { float: left; padding: 5px 10px 5px 10px; background: #FFFFFF; margin-right: 5px; }

#badNav a { color: #00A8EB;  }

/*   __greatPeople
------------------------------------------------------------ */

#video { float: left; margin-right: 15px; }

/*   __slider
------------------------------------------------------------ */ 

#slider { width: 310px; height: 225px; position: relative; overflow: hidden;  }

.sliderImage{ float: left; position: relative; height: 225px; overflow: hidden; }

#sliderContent { position: absolute; top: 0; left: 0; }

.sliderImage span { position: absolute; padding: 10px; width: 290px; height: 45px; color: #fff; background-color: #000; filter: alpha(opacity=70);   -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }

.bottom { bottom: 0; left: 0; }


/*   __entry
------------------------------------------------------------ */ 

#entryContent h2 { height: 100%; margin-bottom: 15px; }

.publishers { font-style: italic; color: #ccc; font-size: 14px; margin-bottom: 15px; }

.info p { margin-bottom: 10px; }

#goodvote { margin-right: 10px; }

#badvote  a { color: #00A8EB;  }

#goodvote img, #badvote img { margin-right: 5px; }

#goodvote a:hover, #badvote a:hover { text-decoration: none; }

/*   __comment
------------------------------------------------------------ */ 

#comment { margin-top: 50px; border-top: 1px solid #eee; padding-top: 20px; }

#comment h2 { font-size: 16px; color: #666; height:25px;}

#commentList { margin-bottom: 30px; margin-top: -10px; }

.commentItem { padding: 10px;  }


/*   __regForm
------------------------------------------------------------ */ 

#regForm { background: #FFFFFF; padding: 30px 30px 50px 30px; }

#regForm h2 { font-size: 24px; color: #ff5aa1; line-height: 1em; margin-bottom: 10px; }

#regForm .notes { margin-left: 10px; font-size: 1em; color:#666666; font-style: italic; }

.tdForm td { height: 30px; vertical-align: bottom; }

.regMsg { width: 420px; float: left; margin-right: 80px; font-weight: bold; color: #333; }

.regMsg h2 { padding-bottom: 15px; }

.errMsg { padding: 2px 5px 2px 5px; border: 1px #ff5aa1 solid; background: #FFFFCC; line-height:2em;  }

#greatPeopleInfo { float: right; width: 350px; height: 380px; overflow: auto; padding-top: 120px;   background: #ee2f72; color: #FFF;  }

#infoContent { padding-left: 20px; background: #ee2f72;  }

#infoContent p { color: #fff; }

.join a { display: block; float: left; width: 100px; height: 25px;text-align:center; margin-right: 20px; margin-top: 50px; line-height: 2em; font-weight: bold; color: #fff; text-decoration: none; background: #00A8EB }

#good { background: #ff5aa1;  }


/*   __livevalidation
------------------------------------------------------------ */ 

.LV_valid { color:#00CC00; }
	
.LV_invalid { color:#ff5aa1; }
	
.LV_validation_message{ font-weight:bold; margin:0 0 0 10px; }
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
    border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
    border: 1px solid #ff5aa1;
}

/*   __showPhoto
------------------------------------------------------------ */ 
.photoContent { background: #FFFFFF;  position: relative; padding: 20px 20px 30px 20px; width: 650px; float: left; }

.photoContent h2 { margin-bottom: 30px; font-size: 16px; }

#badPhotoContent h2 { color: #00A8EB;  }

.photoList li { float: left; width: 130px; height: 130px; position: relative; overflow: hidden; background: #000; }

.peopleList li { float: left; width: 50px; height: 50px; position: relative; overflow: hidden; background: #000; margin: 3px; }

.photoList ul li span { position: absolute; font-weight: bold; background: #000; height: 18px; width: 130px; color:#FFF; left: 0; bottom: 0; padding-left: 10px; padding-top: 3px; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }

.pages { margin: 30px 0px 10px 0px; }

.pages ul li { float: left; display: block;  width: 20px; height: 20px; text-align: center; border: 1px solid #eee; margin-right: 5px; line-height: 1.8em; }

.pages span { color: #ccc; vertical-align:bottom; line-height: 2em; }

.pages ul li a:hover { text-decoration: none; background-color: #ff5aa1; color: #FFFFFF; display: block; }

#badPhotoContent .pages ul li a { color: #00A8EB; }

#badPhotoContent .pages ul li a:hover {  color: #FFFFFF;  background-color: #00A8EB; }

.sort { position: absolute; top:0; right:0; padding: 20px 20px; }

.sort ul li  { float: left;  margin-left: 2px; color: #333;  display: block; padding: 3px;   }

.sort ul li a { color: #666; background: #FFFF; padding: 2px 8px 2px 8px; height: 50px; line-height: 1.5em; width: 120PX; height: 25px; border: 1px solid #eee; }




/*   __sidebar
------------------------------------------------------------ */ 

#sidebar { float: right; width: 246px; overflow: hidden;}

#sidebar h2 { color: #333; font-weight: bold; font-size: 14px; }

.box { background: #FFF; padding: 20px 15px; margin-bottom: 15px; text-align: left; }

#topTags { }
#topTags li  { display: inline; line-height: 2em; }
#topTags h2 { height: 25px;  }

#people li { float: left; margin:0px; padding: 0px; margin-right: 4px; }
#people  h2 { color: #ff5aa1; }
#people { padding-right: 0px; }

#people1 li { float: left; margin:0px; padding: 0px; margin-right: 4px; }
#people1  h2 { color:#00A8EB; }
#people1 { padding-right: 0px; }

#userMsg .face { float: left; margin-right: 10px; }
#userMsg h2 { font-size: 20px; margin-bottom: 10px; }
.noMsg { color: #ccc; font-style: italic; font-size: 14px; }
#userMsg p { margin-bottom: 12px; }

.peopleClick { margin-right: 5px; font-size: 12px; color: #333; font-weight: bold; }

/* TOPNAVI Styles */
.top_navi { padding-top: 30px; width: 80%; }
.top_navi .prev { font-size:12px; width:100px; float:left; }
.top_navi .next { font-size:12px; width:100px; float:right; text-align:right; }
.top_navi .main { font-size:12px; margin:0px 100px; text-align:center; }


/*   __footer
------------------------------------------------------------ */

#footer { margin-top: 45px; }

#footer .links { float: left; color:#00A8EB;  }

#footer a {  color: #00A8EB; }

#footer .copyright { float: right; font-size: 10px; color: #666; font-weight: bold; }