Css

body{color: #545454; font-family:Dotum; letter-spacing:1px; padding:0px;margin:0px; background: #ffffff; font-size:12px;} a{color: #545454;font-family: Dotum;text-decoration:none;} a:hover{color: #ffff00;} br{letter-spacing:normal;} input{color: #ffff00;background: #ffff00;border:none;} select{color: #ffff00;background: #ffff00;} /***** Container *****/ #container { margin:0px auto; } /***** Page Header ******/ #pageHeader { width:900px; background:#ffff00 url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179986953.png) top center repeat-y; margin:0px auto;} /********************************************************************** ** ** pageHeader ���e�ѪR ** ** navbar�G ** **

homeLink

�]�^�� Pixnet�������z�� GIF �s���A�i�‫ۥ‬ѹB�Ρ^

** ** ** ** **

navbarLink

�]Pixnet � s���C�A�]�A�n�J�B�n�X�H�κ z�����^

headerBody albumPanel

�]����D�P�y�z�^�G

**

albumName

�]�ϥΪ̦ۭq��ï�W�١^

** **

albumTopic

�]�ϥΪ̦ۭq��ï�D�D�y�z�^

** ** ** ** ** ** ** ** ** **

userPanel userAlbum userBlog userGbook userProfile userProfile

�]�ϥΪ̤��U���s���йw�]�����áA�i�‫�^ۥ���ܡ‬G �]�s���ϥΪ̤���ï�^ �]�s���ϥΪ̤�������^ �]�s���ϥΪ̤��d���O�^ �]�s���ϥΪ̤��ӤH�W��^ �]�s���ϥΪ̤��ӤH�W��^

userFunctions

�]�U���S��\���s���W�[���^�G

rssLink

�]�����ï�B�楻��ï��RSS�q�\�s���^

** userFriends �]�n� W��а���m�~��L�˦��L�k�‫ۥ‬ѭ ‫^�ק‬ ** ***********************************************************************/ #navbar { width:900px; height:250px; margin:0 auto; background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179984081.png) top no-repeat; text-align:right;} .homeLink { display:none; } .navBarLink { padding:10px; } .navBarLink a, .navBarLink a:visited, .navBarLink a:active { color:#545454; } .navBarLink a:hover { color:#ffff00; } #headerBody {

width:900px;}

#albumPanel {position:absolute;top:10px;margin-left:60px; } #albumName {} #albumName a{font-size:16px;} #albumTopic {padding-top:5px; color:#ffff00;} #userPanel { position:absolute; z-index:10; margin-top:0px; top:180px; text-align:left; height:36px;} #userPanel span span {display:none;} .userAlbum a{display:block;position:absolute;height:35px;width:75px;left:0px;background:trans parent;} .userAlbum a:hover {background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179995534.png) top left no-repeat;} .userBlog a {display:block;position:absolute;left:76px;height:35px;width:88px;background:trans parent;} .userBlog a:hover {background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179995535.png) top left no-repeat;} .userGbook a {display:block;position:absolute;top:0;height:35px;width:83px;left:165px;backgroun d:transparent;} .userGbook a:hover

{background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179995536.png) top left no-repeat;} .userProfile a {display:block;position:absolute;top:0;height:35px;width:68px;left:249px;backgroun d:transparent;} .userProfile a:hover {background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179995537.png) top left no-repeat;} .link-separator {display:none} #userFriends { position:absolute; top:190px;z-index:5; margin-left:605px; } #userFriends ul { margin:0; padding:0; list-style-type:none; } #userFriends a span{ color:#545454; text-decoration: none; font-size: 12px;} #userFriends a:hover span{ color:#ffff00;} /* �n� W�浲�� */ /***** Page Body ******/ #pageBody { width:900px; margin:0px auto; padding:0px;background:#ffff00 url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179986953.png) top center repeat-y;} /********************************************************************** ** ** pagebody ���e�ѪR ** ** contentHeader �]��m�B���ơB�����B���B�۩w� �^ ** contentBody �]�����D�n���e�^ ** contentFooter �]���Ƹ�T�P�����s�����^ ** ***********************************************************************/ #contentHeader { margin:0px auto; width:900px;} /********************************************************************** **

** **

contentHeader ���e�ѪR

** ** ** ** ** ** ** ** ** ** **

breadCrumb crumbCat crumbAlb

�]�‫ث‬e�Ҧb��m�^ �]�Ҧb����^ �]�Ҧb��ï�^

albumCount

�]��ï���Ϥ�ƶq�έ��ơ^

navButtons

�]��ï�s��\��Ϋ�s�^

** ** ** ** ** ** ** ** ** ** ** ** **

pageSelector pageParent pagePrev pageNow pageNumber pageBreak PageNext funcLinks funcBrowse funcInfo albumAbout albumTitle albumDesc

�]�����s���^ �]�^�W�@�h�^ �]�V�e�@���^ �]�‫ث‬e�Ҧb���ơ^ �]���ơ^ �]���Ƭq���^ �]�V��@���^ �]�s��\����^ �]��ï���Ϥ��s��\����^ �]��ï���Ϥ��T���^ �]��ï���а �^ �]��ï���D�^ �]��ï�y�z�^

** userDiv �]��ï�۩w� �^ ** ***********************************************************************/ #breadCrumb {color:#545454;font-size:16px;font-weight:normal;padding:25px 0px 0px 80px;margin-left:138px; height:48px; background:url(http://p9.p.pixnet.net/albums/userpics/9/2/220692/1179988814.png) left no-repeat;} #breadCrumb a, #breadCrumb a:active, #breadCrumb a:visited { font-size:17px; color:#545454; text-decoration: none;} #breadCrumb a:hover{ text-decoration: none;} #crumbCat {} #crumbAlb {} .albumCount { text-align:center; padding:10px; } #navButtons {} .pageSelector { text-align:center;padding-bottom:10px; } .pageSelector ul { padding:0px; margin:0px; list-style-type:none;} .pageSelector ul li{ display:inline; padding:2px;} .pageSelector a, .pageSelector a:active, .pageSelector a:visited { padding:3px 2px; text-decoration: none; vertical-align:middle; font-size: 12px; }

.pageSelector a:hover { color:#ffff00; text-decoration:none; padding:3px 2px; } .pageParent {} .pagePrev {} .pageNow { text-decoration:none; padding:3px 5px;} .pageNumber {} .pageBreak {} .pageNext {} #funcLinks { position:absolute; top:190px;width:880px;textalign:right;} #funcLinks ul { padding:0px; margin:0px; list-style-type:none; } #funcLinks ul li { display:inline;padding-left:40px;} #funcLinks a span{ text-decoration: none; vertical-align:middle; font-size: 12px;} #funcLinks a:hover span{ color:#545454;} .funcBrowse {} .funcInfo {} /***** Content Body

******/

#contentBody { margin:0px auto;} /********************************************************************** ** ** ��ï�C� pageBody ���e�ѪR ** ** albList ul �]��ï�C��^ **

li.catBox

�]��ï������‫^�[ج‬

**

li.albBox

�]�楻��ï���‫^�[ج‬

** ** **

albThumb img.thumb img.thumgSpacer

�]��ï�ʭ��ϥ~�‫^ء‬ �]�Y�ϡ^ �]���Y�ϫ����m�����z��GIF�^

** albData �]��ï��T�~�‫^ء‬ ** albTitleDiv �]��ï���D���B�~��T��s�^ ** albInfo �]��ï�B�~��T��s�^ ** albPrivate �]�p�H��ï�Ÿ��^ ** albTitle �]��ï���D�^ ** albDesc �]��ï���D���B�~��T��s�^ ** ***********************************************************************/ .albList ul { list-style-type: none; padding:0px; margin:0;}

.albBox { position:relative; float:left; display:inline; width:430px; height:130px;} .albBoxOdd { margin-left:12px;margin-right:15px;} .albThumb{ width:110px; height:110px; float:right; background:#F2F2F2; border: #f2f2f2 1px solid; text-align:center; } .albBoxOdd .albThumb {float:left;} .albThumb span{position:relative; display:block; height:90px; width:90px; padding:10px;} .catBox .albThumb span{} .albThumb a img.thumb{ border:0px; vertical-align:middle; } .albThumb a:hover .thumb{ filter:gray; width:100px; height:100px; position:absolute; top:4px;left:4px; border:#ffff00 1px solid;} .albThumb img.thumbSpacer{ border:0px; width:0px; height:90px; vertical-align:middle; } .albData { background:#ffffff; padding:10px; border: #bcbcbc 1px solid; float:left; height:90px; width:270px; overflow:auto; overflow-y:auto; overflow-x:hidden; } .albBoxOdd .albData{ float:right; } .albTitleDiv { color: #545454; line-height:15px; margin-bottom: 10px; } .albNum {}

.albInfo {} .albInfo a img{ filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; } .albInfo a:hover img{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; } .albPrivate {} .albTitle {color: #bbbbbb} .albDesc { line-height: 15px; word-wrap: break-word; color: #545454; } #contentBody .spacerDiv{ clear:both; height:0px;} /********************************************************************** ** ** ��ï�Y�ϭ����� pageBody ���e�ѪR ** ** thumbList ul �]�Y�ϲM��^ **

li.thumbbox

�]�Y�Ϥμ��D���‫^�[ج‬

** thumbImg �]�Y�Ϯ ‫^ء‬ ** img.thumb �]�Y�ϡ^ ** img.thumgSpacer �]���Y�ϫ����m�����z��GIF�^ ** thumbTitle �]�Ϥ���D�^ ** ***********************************************************************/ .thumbList ul {width:620px; display:block; list-style-type: none; margin:0px; margin-left:140px; padding:0px; } .thumbBox { float:left;display:inline;width:122px;height:185px;margin:0 16px;} .thumbImg {position:relative; width:120px; height:120px; background:#ffffff; border:#ffffff 1px solid; text-align:center;} .thumbImg span{ padding:14px; display:block; text-align:center; width:92px; height:90px;position:relative;} .thumbImg a img.thumb{ border:#ffffff 1px solid;

vertical-align:middle; } .thumbImg a:hover .thumb{ filter:gray; width:110px; height:110px; position:absolute; top:4px; left:4px;} .thumbImg img.thumbSpacer{ border:0px; width:0px; height:0px; vertical-align:middle; } .thumbTitle { width:110px; line-height:1.25em; height:3.75em; margin:10px 5px; text-align: center; color:#545454; overflow:hidden; } /********************************************************************** ** ** **

�Ϥ��� ����� pageBody ���e�ѪR

** **

imageBox imageTitle

�]�D�n���e�‫^�[ج‬ �]�Ϥ���D�^

** imageFrame �]�Ϥ�~�‫^ء‬ ** imageCaption �]�Ϥ���D�^ ** captionContent �]�Ϥ���D�^ ** thumbStrip �]�Ϥ���D�^ ** thumbFrame �]�Ϥ���D�^ ** thumbAd �]�Ϥ���D�^ ** ***********************************************************************/ #imageBox { margin:0 auto; text-align:center;} #imageTitle { margin:10px;color:#BBBBBB; font-weight:bold; } #imageFrame img{ padding:5px; background:#FFFFFF; border: #FFFFFF 1px solid;} #imageCaption{ margin:0 140px; color:#ff9933; padding:20px; text-align:center;} #thumbStrip { height:120px; margin:0px 140px; }

#thumbStrip ul { display:inline; list-style-type: none; margin:0px; padding:0px; } #thumbStrip ul li{ float:left;display:inline;width:112px;height:120px; margin:0 6px;} .thumbFrame { width:110px; height:110px; background:#FFFFFF; border: #FFFFFF 1px solid; text-align:center;position:relative;} .thumbFrame span { display:block; padding:10px; text-align:center; width:90px; height:90px;} .thumbFrame img { vertical-align: middle;text-align:center; border:0px; } .thumbFrame a:hover img.thumbImage { filter:gray; width:100px; height:100px; position:absolute; top:5px; left:5px;} .thumbAd { width:110px; height:110px; background:#FFFFFF; border: #FFFFFF 1px solid; text-align:center;} .thumbAd span{ height:110px; width:110px; } .thumbAd span.adFlag{ display:none;} .thumbAd img{ vertical-align: middle; margin-top:10px; margin-left:10px; border:0px; } #thumbStrip .thumbSpacer { width:0px; height:90px; } .commPost {display:block; width:600px; background:#FFFFFF; border: solid 1px #FFFFFF; margin:10px 148px; text-align:center;} .commPost a span{display:block;padding:10px;} .commBox {position:relative;display:block; width:600px; background:#FFFFFF;

border: solid 1px #FFFFFF; margin:10px 148px;} .commWrap1 {} .commWrap2 {} .commAvatar p{ margin:5px; padding:0px; } .commAvatar img{ padding:3px; background:#FFFFFF; border:1px solid #FFFFFF;} .commBody {} .commBodywrap { } .commLinks { margin:0 10px;} .commUsername { position:absolute;top:7px; margin-left:40px;} .commDate { position:absolute;top:5px;right:5px;} .commContent { padding-bottom:5px; padding-left:50px; margin-top:-25px; line-height:1.75em; margin-right:10px;} .commDelete{ position:absolute; top:7px; right:145px;} .commBox .spacerDiv{ clear:both; height:0px;} /***** Content Footer ******/ #contentFooter { padding-bottom:20px;} #contentFooter .albumCount{} #contentFooter .pageSelector{ } /***** Page Footer

******/

#pageFooter { border-top: #FFFFFF 1px dotted; background: #bbbbbb; padding: 10px 0px; color: #ffff00; font-size: 12px; text-align:right;} /********************************************************************** ** ** pageFooter ���e�ѪR ** ** footernav �]�s���C�^ ** copyright �]���v�C�^ ** ***********************************************************************/

#footernav { background:#bbbbbb;float:left; margin-left:10px;} #footernav a, #footernav a:active, #footernav a:visited { color:#ffff00;} #footernav a:hover{ color:#545454;} #copyright { fbackground:#bbbbbb;ont-size: 10px; margin-right:10px;} .privAlbMsg,.passAlbMsg,.Msgbox { width: 300px; border:1px solid #333; background:#bbbbbb; margin: 40px auto; text-align:center;} .privAlbMsg span,.passAlbMsg span,.Msgbox span { font-size: 20px; display: block; padding-top: 50px; padding-bottom: 55px; line-height: 30px; } .passAlbMsg span input { border: 1px solid #808080; } .albTooltip { width: 250px; background: #bbbbbb; color: #FFFF00; padding: 10px; } div.menu { position: absolute; visibility: hidden; width: 130px; left:0; top:0; z-index:500; font-size:12px; border: 1px solid #9DA8C7; border-bottom: 0px solid #9DA8C7; background-color: #bbbbbb; } div.menu ul { margin:0; padding:0 } div.menu ul li { list-style-type:none; display: block; border-bottom: 1px solid #9DA8C7;} div.menu a { text-decoration:none; white-space:nowrap; display: block; padding: 4px; line-height:20px;} div.menu a:link { color:#33b } div.menu a:visited { color:#339 }

div.menu a:hover { color:#33c; background-color: #bbbbbb; } div#tipDiv { position:absolute; visibility:hidden; left:-30px; top:0; z-index:10000; background-color:#eee; border:1px solid #333; width:225px; padding:6px; font-size:11px; line-height:1.3; } div.ttHead { margin-bottom:5px; font-weight:bold; color:#333;} div.ttBody { color:#bbbbbb;} div.fmenu { position:absolute; visibility:visibility; left:-100px; top: -100px; z-index: 500; background:#bbbbbb; border-top:1px solid #CBCBCB; border-left:1px solid #CBCBCB; border-right:1px solid #9D9D9D; border-bottom:1px solid #9D9D9D; overflow:auto; overflow-y:auto; overflow-x:hidden; width:175px; max-height:320px; height:ex<x>pression( this.scrollHeight > 320? "320px" : "auto" ); font-size:12px; } div.fmenu ul { margin:0; padding:0; } div.fmenu ul li { position:relative; list-style-type:none; display:block; }

div.fmenu ul li.friendCat { display:block; font-size:12px; color:white; background:#B8B8B8; font-family:Dotum; font-weight:bold; text-decoration:none; padding:2px; } div.fmenu ul li.friendLink a{ display:block; width:90%; padding:2px 4px; padding-right:10%; } div.fmenu ul li.friendLink a:hover{ background: #DDE9EE; } div.fmenu ul li.friendLink img { padding:2px; vertical-align:top; border:0px; } div.fmenu ul li.friendLink span.friendAvatar { display:block; width:34px; height:34px; background:white; text-align:center; border:1px solid #CBCBCB; } div.fmenu ul li.friendLink span.friendID { margin-top:-33px; margin-left:43px; display:block; text-decoration:none; } div.fmenu ul li.friendLink span.friendDesc { margin-left:43px; margin-bottom:5px; display:block; font-size:10px; color:#545454; font-family:Dotum; text-decoration:none; } #box { color:white;}