@charset "UTF-8";
::selection {background:#0059b3; color:#fff;}
::-moz-selection {background:#0059b3; color:#fff;}
::-webkit-input-placeholder {color:#fff;}
:-moz-placeholder {color:#fff;}

* {margin:0; padding:0; list-style:none}
a > * {line-height:0;}
img {border:none;}
body {color:#fff; font-size:12px; font-family:Arial, Helvetica, sans-serif; background:#0059b3;}
a {color:#fff; text-decoration:none;}
a:hover {color:#419dfc;-webkit-transition:color 0.2s ease-in-out; -moz-transition:color 0.2s ease-in-out; -ms-transition:color 0.2s ease-in-out; -o-transition:color 0.2s ease-in-out; transition:color 0.2s ease-in-out;}
a.selected {color:#419dfc;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

/*Basic*/
.clearfix {clear:both; display:block; height:0;}
.fr {float:right;}
.fl {float:left;}
.art-ttl {font-family:Arial, Helvetica, sans-serif;}
.art-img img {width:100%;}
a:hover .art-img {box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.6);}
.bk-end {padding:0 !important; margin:0 !important;}
.pr { position:relative;}
.b { font-weight:bold}
.header, .contents, .nav, .footer {text-align:center; width:100%;}
.innerwrap {width:1100px; margin:0 auto; text-align:left;}
.con_left {float:left; width:230px; background:#00356b; border-radius:3px}
.con_sections {float:left; width:730px; background:#fff; border-radius:3px}
.con_article {float:left; width:730px;}
.con_center {float:left; width:480px; background:#061f39; padding-bottom:15px;}
.con_right {float:left; width:350px; background:#02468b; border-radius:3px}
.mt5 { margin-top:5px} .mt10 { margin-top:10px} .mt20 { margin-top:20px}
.mr10 { margin-right:10px} .mr20 { margin-right:20px}
.ml20 { margin-left:20px}
.mb10{ margin-bottom:10px;} .mb20{ margin-bottom:20px;}
.fbl { color:#0066ff}
.taleft { text-align:left}
.i { font-style:italic}

/*Button - Go to Top*/
.bt_top { width:47px; height:47px; bottom:20px; right:20px; position:fixed; opacity:0.3;}

/*head links*/
.top-links {border-bottom:#00356b 1px solid; }
.top-links a {display:inline-block; padding:3px 20px 3px 0; color:#fff; font-size:11px;}

/*Header*/
.psy_dancing2 {width:120px; height:99px; background:url(../images/psysworld/img_psy2.png) 0 0 no-repeat; position:absolute; left:250px; top:0px;}
.logo img {padding-top:24px} 
.box { width:300px; position:relative; float:right; margin-top:10px;}
.motto { position:absolute; top:15px; left:0px;}
.sns {float:right; width:35px; height:35px; display:block; margin-right:7px; border-radius:35px;}
.sns span { display:none}
.sns.fb { background:url(../images/psysworld/ic.gif) -74px 0 no-repeat;}
.sns.fb:hover {background:url(../images/psysworld/ic.gif) -74px -35px no-repeat;}
.sns.tw { background:url(../images/psysworld/ic.gif) -116px 0 no-repeat;}
.sns.tw:hover {background:url(../images/psysworld/ic.gif) -116px -35px no-repeat;}
.sns.rss { background:url(../images/psysworld/ic.gif) -160px 0 no-repeat;}
.sns.rss:hover {background:url(../images/psysworld/ic.gif) -160px -35px no-repeat;}
.sns.mail { background:url(../images/psysworld/ic.gif) -201px 0 no-repeat;}
.sns.mail:hover {background:url(../images/psysworld/ic.gif) -201px -35px no-repeat;}
.search { height:27px; background:#00356b; margin-top:7px; border-radius:3px;}
.search input {background:#00356b; border:none; color:#ffda0a; line-height:25px; text-indent:10px}
.search .button { width:60px; height:25px; color:#ffda0a; text-align:left; font-size:11px; line-height:20px; font-weight:bold;}

/*Navigation*/
nav { background:#1c1c1f; height:35px; padding-left:10px;border-radius:3px}
nav ul li { float:left; font-weight:bold; line-height:35px; padding:0 12px; color:#fff; font-size:14px;}
nav ul li a { color:#fff;}
nav ul li a :hover{ color:#419dfc;}
nav ul li.selected { background:url(../images/psysworld/bt_headline_on.gif) bottom left repeat-x;}

/*Section Title*/
h2 { border-bottom:#0059b3 1px solid; padding:10px 20px; font-size:22px; color:#007eff;}
h3 {text-transform:uppercase; font-size:20px; padding:10px 0; text-align:center}
h3.ttl_yell {color:#ffda0a;}
h3.ttl_blue {color:#007eff;}
h3.ttl_red {color:#F00}
h5 {font-size:12px; padding:10px 0 5px 0;}
h5.ttl_blue {color:#007eff;}

/*Items*/
.item200 { color:#fff; padding:0px 0px 0 15px; position:relative}
.item200:hover {color:#6ed8ff;}
.item200 h4 {line-height:16px; padding:7px 0; font-size:14px;}
.item200 .ic {width:35px; height:35px; position:absolute; top:85px; right:15px; opacity:0.7;}
.item200 .ic.photo {background:url(../images/psysworld/ic.gif) 0 0 no-repeat;}
.item200 .ic.video {background:url(../images/psysworld/ic.gif) -36px 0 no-repeat;}

.item450 { color:#007dff; padding:15px 15px 0 15px; overflow:hidden; position:relative}
.item450:hover {color:#fff;}
.item450 img {float:left; margin-right:15px;}
.item450 h4 {line-height:18px; font-size:16px;}
.item450 p {line-height:15px; padding-top:10px; color:#38608b}

.item_sec {color:#000; margin:0 auto; padding:20px 20px 0 20px; overflow:hidden; position:relative}
.item_sec:hover {color:#007dff;}
.item_sec img {float:left; margin-right:15px;}
.item_sec h4 {line-height:24px; font-size:22px;}
.item_sec p {line-height:15px; padding-top:10px; color:#38608b}

/*Banners*/
.bn300 { width:300px; margin:0 auto; padding-top:10px;}
.bn728 { width:728px; margin:0 auto;}

/*Lists*/
.listv {border-bottom:#295583 1px solid; display:block; padding:10px; text-align:center; line-height:16px}
.listv_dot {line-height:15px; padding:3px 0; display:block; background:url(../images/psysworld/ic_dot.gif) left center no-repeat; padding-left:10px;}
.listv_dot.blc {font-size:14px; color:#222; line-height:18px;}
.listv_dot.blc:hover {color:#06F}
.listv_dot.red_dot {background:url(../images/psysworld/ic_dot_red.gif) left center no-repeat; }
.listv_dot.red_dot:hover {color:#ff0000}

/*Headline*/
.headline {clear:both; position:relative; background:#020c17; padding-bottom:20px;}
.headline h1 { font-size:25px; line-height:30px; padding:30px 10px 0px 20px;}
.headline .item {float:left; overflow: hidden; width: 480px;}
.headline .bt_slides { position:absolute; top:260px; left: 0; height:4px; width: 100%; text-align: center; clear: both; }
.headline .bt_slides .ic_tab { width: 23px; height: 4px; display: inline-block; background: #ffffff; margin-right: 5px; }
.headline .bt_slides .ic_tab.selected {background: #007DFF;}
.headline .bt_slides img { margin-right:5px; float:left;}

/*Most Viewed*/
.most { background:#fff;}
.most .rank1 {width:315px; margin:0 0 10px 17px; background:#020c17; position:relative}
.most .rank1 .ttl { color:#FFF; font-size:16px; font-weight:bold; line-height:20px; padding:10px;}
.most .rank1 .label {background:#000; color:#fff; font-weight:bold; position:absolute; top:0; left:0; width:45px; height:45px; text-align:center; font-size:30px; line-height:45px;}
.most .ranks {overflow:hidden; margin:0 auto; width:315px; font-size:15px; padding-bottom:10px; color:#000; line-height:18px; font-weight:bold; position:relative}
.most .ranks img { float:left; margin-right:15px; }
.most .ranks .labels {background:#000; color:#fff; font-weight:bold; position:absolute; top:0; left:0; width:25px; height:25px; text-align:center; font-size:15px; line-height:25px;}

/*Social Wizet*/
.wizet { background:#fff;}
.wizet .tab {background:#02468b; overflow:hidden; font-size:15px; font-weight:bold; padding-left:15px}
.wizet .tab .on {padding:7px 12px; background:#fff; color:#07294c;}
.wizet .tab .off {padding:7px 12px;color:#fff;}
.wizet .tab .off:hover { background:#0d56a0;}
.wizet .con { width:300px; margin:0 auto; padding:12px 0}

/*Page Number*/
.pg_num {padding:20px 0}
.pg_num a {display:inline-block; font-size:12px; color:#000; padding:5px 9px;}
.pg_num a:hover {color:#007fff;}
.pg_num a.selected {background:#0059b3; color:#fff; border-radius:17px}

/*Article*/
.art { padding:20px; background:#fff; border-radius:3px}
.snav {background:#000000 url(../images/psysworld/bg_snav.gif) no-repeat top right; height:23px; padding:0 20px 0 8px; display:inline-block; font-weight:bold; line-height:23px;}
.snav.c2 {background:#0169d3 url(../images/psysworld/bg_snav2.gif) no-repeat top right; padding:0 20px 0 0;}
.art .date {color:#777; line-height:23px;}
.art .sumr {color:#555; font-size:13px; line-height:16px; font-style:italic}
.art h1 { font-size:25px; line-height:28px; color:#000; padding:15px 0 10px 0}
.art .tags span { color:#de0083; padding-right:5px}
.art .tags a { text-transform:uppercase; font-size:11px; display:inline-block; color:#2159ad; padding:10px 5px; }
.art .fuction { font-size:11px; font-weight:bold; color:#000; background:#f1f3f5; border:#e4e5e5 1px solid; padding:3px 10px; border-radius:3px}
.art .fuction a {color:#000;}
.art .fuction .fuc_email { background:url(../images/psysworld/ic_art_email.gif) left center no-repeat; text-indent:22px}
.art .fuction .fuc_print { background:url(../images/psysworld/ic_art_print.gif) left center no-repeat; text-indent:22px}
.art .fuction .fuc_comment { background:url(../images/psysworld/ic_art_comment.gif) left center no-repeat; text-indent:22px}
.art .con_body { padding:15px 0}
.art .con_body.photoslide { overflow:hidden;}
.art .con_body img {float:left; margin-right:15px;/*It should be apply as long as photo is within 450px. If the photo is over 450px then this float:left; margin-right:10px has to be disable.*/}
.art .con_body p { padding-bottom:25px; font-size:15px; line-height:24px; color:#222}
.art .con_body a { color:#007fff;}

/*Comment*/
.comment { background:#014c99; margin-top:10px; overflow:hidden}
.comment .hd {background:#181818; color:#61666b; text-align:left; font-size:20px; padding:5px 10px; border-radius:3px;}
.comment .c_bd { padding:20px}
.comment .c_bd .pic { border:#e4edf7 3px solid;}
.comment .c_bd .usertxt { background:#0069d4; border:0px; padding:5px;}
.comment .c_bd .userpost { background:#2a2929; border:0px; font-size:14px; text-align:center; font-weight:bold; padding:5px 10px}
.comment .c_bd .userpost:hover { background:#181818}
.comment .c_bd .username { background:#0069d4; border:0px; padding:5px;}
.comment .c_bd .form { margin:0 10px 10px 0; color:#fff; font-family:Arial, Helvetica, sans-serif}
.comment .c_bd .leftsp { padding-left:68px; line-height:26px}
.comment .c_bd .talk { border-bottom:#003a75 1px solid; padding:15px 0}
.comment .c_bd .talk .id { color:#FC0; font-size:13px; font-weight:bold;}
.comment .c_bd .talk .when { color:#78abe0; font-size:11px;}
.comment .c_bd .talk .what { color:#fff; font-size:12px; padding-top:8px;}

/*Photo List*/
.ph_list {width:333px; display:inline-block; cursor:pointer; position:relative; margin:0 0px 0 20px; overflow:hidden; min-height: 325px; float:left;}
.ph_list img { width:100%}
.ph_list .ttl a {display:block; padding:5px 10px 5px 0px; font-size:18px; color:#000; line-height:22px;}
.ph_list .ttl a:hover { color:#06F}
.ph_list .date {color:#06F; font-size:12px; padding-top:8px}

.at_slide {clear:both; color:#000; height:35px; position:relative; margin-bottom:10px; font-size:14px; font-weight:bold; text-transform:uppercase; line-height:35px; text-align:center; width:255px}
.at_slide .prev {color:#fff; position:absolute; top:0; left:0; background:#082441; padding:0 14px; height:35px; display:inline-block;}
.at_slide .next {color:#fff; position:absolute; top:0; left:175px; background:#082441; padding:0 14px; height:35px; display:inline-block;}


/*Footer*/
.footer {background:#013f7e; border-top:#00366c 1px solid; overflow:hidden;}
.footer .innerwrap { padding:20px 0; overflow:hidden;}
.footer .innerwrap .fnav { padding-bottom:10px}
.footer .innerwrap .fnav a { padding:0 10px 0 0;color:#dae1e7}
.footer .innerwrap .fnav a:hover {color:#1183f9}
.footer .innerwrap .copyright { font-size:11px; color:#dae1e7;}
.footer .innerwrap .copyright .out { color:#1183f9}