/*--------------------------------------------------------------
Wretch Friend template no.01

CSS & Designed by PRINCESSWOW
http://www.wretch.cc/Mypage/princesswow
----------------------------------------------------------------*/



/* ----------- global 基本標籤設定 ------------*/
html{}
body {
  color: #666;
  background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/body.jpg') repeat left top ;
}
a {
  color: #333;
  text-decoration: none
}
a:hover {
  color: #f60; 
}

/*-------------------------------------------/
construct 版面架構的標籤
架構是由#container包住三個主標籤(#header, #content, #footer)
*/
#container {
width:900px ;
_width:900px ;
padding:0px 10px 0px 10px; 
margin:0px auto ;
background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/container.jpg') repeat-y center top ;
position:relative ;
}
#header {
background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/header.jpg') no-repeat left top ;
/*height:299px;*/
height:247px;
padding:52px 0px 0px 40px; 
position:relative ;
}
#content{
padding:10px 0px 0px 19px;  
}

/*-------------------------------------------/
header 標頭
分為 ul#navigator 與 div#boxProfile 兩個部分
*/
#header #navigator{
  color:#fff;
  text-align:left;
  padding:0px 10px;
  text-align:right ;
  position:absolute  ;
  top:0px ;
  right:10px; 
}
#header #navigator a{
  padding:4px;
  color:#F86BAE;
}
#header #navigator a:hover{
  color:#f60;
}

/* 我的資訊區塊 其中分為 #Pcover, #Ptext, #menu 三部分*/
#boxProfile{
  clear:both;
}

/*封面照片*/
#header .Pcover {
margin-right:40px; 
}

/*我的地盤文字 DIV標籤*/
#header .Ptext {
padding-left: 50px;
}


/* 我的地盤標題：XXX的好友列表*/
#header h1{
  font:normal 1.4em/2.5em simhei,arial;
  color:#F7A5CC;
  _margin-bottom:7px; 
}

/* 我的地盤列表:XXX的個人首頁、XXX的網誌、XXX的相簿、XXX的留言版*/
#header .Ptext li{
  list-style-type:none;
}
#header .Ptext br{display:none;}
#header .Ptext li a{
  border-left:4px solid #fff;
  padding-left:5px;
  display:block;
  color:#999;
  width:150px;
  margin-bottom:2px ;
}
#header .Ptext li a:hover{
  border-color:#F7A5CC;
  color:#F756A3;
}


/* 好友分類選單*/
#header #menu{
  color:#aaa ;
position:relative;
bottom:20px;
left: 40px;
}
/* 好友分類選單內：列出所有分類、列出所有性別、搜尋好友、目前列出的好友分類*/
.il{ 
  margin:5px;
}

/* 搜尋的訊息文字 */
#msg{
margin:0px ;
margin-left:35px ;
padding:0px; 
clear:both ;
}



/*-------------------------------------------------/
content 
thumb style 縮圖清單的樣式
*/

#friendListDiv ol li{
   background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/friendlist.jpg') left  top no-repeat  ;
padding-top:2px ;
}
#friendListDiv ol li a {
  color:#D96BA0;
  font:.8em verdana;
}
#friendListDiv ol li a:hover {
  background: url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/friendlist2.jpg') -1px -2px no-repeat;
  color:#000;
  border:0px ;
}
/* 好友列表id*/
#friendListDiv ol li a span.font_id {
  
}


/* -------------------------------------------------/
friend desc div 放大圖片與說明的樣式

*/
/* 好友詳細說明文字div*/
#descDiv{
  /*border-top: 2px solid #FFA9D1 ;
  border-left: 2px solid #FFA9D1 ;
  border-right: 2px solid #F061A4 ;
  border-bottom: 2px solid #F061A4 ;*/
  background: #FFECF6;
  color: #555;
  border:1px solid #FFA0D5 ;
}
/* 單一好友id */
.font_id2{
color:#F756A3;
font-size:22px; 
font-family:"Verdana" ;
letter-spacing:-2px; 
padding-bottom:10px; 
}
/* 單一好友說明*/
.font_desc{
color:#F756A3;
}

/* desc category 敘述的分類文字訊息*/
.font_cate{
color:#999 ;
text-align:right ;
display:block ;
}
.font_cate strong {}

#footer{
  clear:both;
}




/*----------extradiv---------*/

#extraDiv1{
height:65px ;
width:20px; 
background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/extradiv1.jpg') ;
position:absolute ;
top:0px; 
left:-10px; 
}


#extraDiv2{
height:65px ;
width:20px; 
background:url('http://pic.wretch.cc/icon/hyli/friend_design/friend01/extradiv2.jpg') ;
position:absolute ;
top:0px; 
right:-10px; 
}













/**** LINK-tag style sheet select.css ****/

/*
select.css
*/

.selectBox {
  width: 200px;
}
.selectBox h3 {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: inherit;
  font-size: 1em;
  font-weight: normal;
  *background: url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/selectItem.gif') repeat-y right top;
  background-color: white;
}
.selectBox h3 a {
  display: block;
  width: 100%;
  border: 1px solid #CCC;
  border-right: 0 none transparent;
  padding-left: 5px;
  padding-top: 3px;
  height: 17px;
  overflow: hidden;
  text-decoration: none !important;
  color: #888 !important;
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/def.gif') no-repeat right top;
  cursor: default;
}
.selectBox h3 a.t,
.selectBox h3 a:hover {
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/hover.gif') no-repeat right top;
}
.selectBox ul {
  width: 100%;
  margin: 0;
  padding: 3px 2px 3px 3px;
  list-style-type: none;
  position: absolute;
  top: -1px;
  left: 0px;
  border: 1px solid #ccc;
  border-top: 0 none transparent;
  border-right: 0 none transparent;
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/selectItem.gif') repeat-y right top;
}
.selectBox ul li {
  display: block;
  margin: 0;
  padding: 0;
  padding-right: 3px;
}
.selectBox ul li a {
  text-decoration: none;
  color: #555 !important;
  padding: 2px;
  display: block;
  *height: 1%;
}
.selectBox ul li a:hover {
  background: #eee;
}



/**** LINK-tag style sheet select.css ****/

/*
select.css
*/

.selectBox {
  width: 200px;
}
.selectBox h3 {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: inherit;
  font-size: 1em;
  font-weight: normal;
  *background: url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/selectItem.gif') repeat-y right top;
  background-color: white;
}
.selectBox h3 a {
  display: block;
  width: 100%;
  border: 1px solid #CCC;
  border-right: 0 none transparent;
  padding-left: 5px;
  padding-top: 3px;
  height: 17px;
  overflow: hidden;
  text-decoration: none !important;
  color: #888 !important;
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/def.gif') no-repeat right top;
  cursor: default;
}
.selectBox h3 a.t,
.selectBox h3 a:hover {
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/hover.gif') no-repeat right top;
}
.selectBox ul {
  width: 100%;
  margin: 0;
  padding: 3px 2px 3px 3px;
  list-style-type: none;
  position: absolute;
  top: -1px;
  left: 0px;
  border: 1px solid #ccc;
  border-top: 0 none transparent;
  border-right: 0 none transparent;
  background: white url('http://www.wretch.cc/photos/icon/htcmi/other/script/ja<!>vascript/select/selectItem.gif') repeat-y right top;
}
.selectBox ul li {
  display: block;
  margin: 0;
  padding: 0;
  padding-right: 3px;
}
.selectBox ul li a {
  text-decoration: none;
  color: #555 !important;
  padding: 2px;
  display: block;
  *height: 1%;
}
.selectBox ul li a:hover {
  background: #eee;
}


/**** LINK-tag style sheet highlighter.css ****/

/* Non-http; imported above. */