/*--------------------------------------------------------------
Wretch Friend template no.01

CSS & Designed by PRINCESSWOW
http://www.wretch.cc/Mypage/princesswow
----------------------------------------------------------------*/



/* ----------- global 基本標籤設定 ------------*/
html{scrollbar-face-color: #ffffff; 
scrollbar-highlight-color: #f08080; 
scrollbar-shadow-color: #f08080;
scrollbar-3dlight-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff;
scrollbar-arrow-color: #f08080; 
scrollbar-track-color: #ffffff;
}
body {
  color: #333;
 background: url(http://f9.wretch.yimg.com/dryadc58591/97/1990945401.jpg?6zrHa8xDfR_iyOT.8TpOEfegoPmM35wRfCs576mgb4_1j32QwbnPFr4nKUZGFA--) fixed no-repeat  right bottom;

}
a {
  color: #f08080;
  font-size:10px;
  text-decoration: none}
a:hover {
  color: #f08080;

}

/*-------------------------------------------/
construct 版面架構的標籤
架構是由#container包住三個主標籤(#header, #content, #footer)
*/
#container {
margin:00px ;
left:00px;
 background: url
('') left top;
 height:100%;

}
#header {
position:relative;height:372px;
wight:700px
 padding:10px 30px; 
 background: url('') 
 no-repeat left top;
}
#content{
margin:0px auto auto 0px;
 padding:10px 0px 0px 15px;

}

/*-------------------------------------------/
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 {
position:absolute;
 top:100px;
 left:30px;
 border: 0px solid #;
padding:0px 0px 0px 0px;
border: 7px solid double #f08080;
margin:7px 0px;
background:center repeat ;

}

/*我的地盤文字 DIV標籤*/
#header .Ptext {
position:absolute;
 top:120px;
 left:200px;
display: inline;
}


/* 我的地盤標題：XXX的好友列表*/
#header h1{
  font-size: 12px;
}

/* 我的地盤列表: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{
  display:none;

}
/* 好友分類選單內：列出所有分類、列出所有性別、搜尋好友、目前列出的好友分類*/
.il{ 
  margin:5px;
}

/* 搜尋的訊息文字 */
#msg{
background:white;
 width:515px;
}



/*-------------------------------------------------/
content 
thumb style 縮圖清單的樣式
*/
˙#content li (好友縮圖列表) 
border: 3px solid double #f08080;
background:left  top repeat ;
padding-top:2px ;
background-color :#ffffff

#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 {
  width:108px;
˙#friendListDiv ol li a span.font_id (好友列表id) 
  color: #f08080;
}
#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{
  background: url('http://upload.u-state.com/images/1187105242.gif') no-repeat right bottom #f08080;
 padding:15px 5px 60px 5px;
 border:1px solid #FFFFFF;
}
/* 單一好友id */
.font_id2{
color: #FFFFFF;
 
}
/* 單一好友說明*/
.font_desc{
color:#FFFFFF;
}

/* 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<x>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<x>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<x>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<x>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<x>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<x>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<x>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<x>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. */