@charset "UTF-8";
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(../images/new/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 0px;
	padding-left: 0px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
p{
	margin-top: 5px;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
}

a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	outline: none;
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
/*a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
} */

a {
   color:#a7005d;
   text-decoration:none;
}

a:hover {
   color:#d730ad;
}


/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
.container_h {
	background-color: #FFF;
	/*width: 960px;
	background-color: #FFF;
	margin: 0 auto;*/
}
.container_f {
	background-color: #E9F4CB;
	background-image: url(../images/new/bg_footer.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
	
	/*width: 960px;
	background-color: #FFF;
	*/
}

.container {
	width: 950px; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.header {
	width: 960px;
	background-color: #FFF; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	height: 85px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


.topbar_index{
	background-color: #99c934;
	margin: 0px;
	padding: 0px;
	/*height: 5px;*/
	height: 16px;
	/* font-size: 11px; */
	font-size: 13px;
	color: #FFFFFF;
}
.topbar{
	background-color: #99c934;
	margin: 0px;
	padding: 0px;
	height: 5px;
	color: #FFFFFF;
}
.toptxt{
	background-color: #99c934;
	color: #FFFFFF;
	width: 960px !important;
	margin-top: 0!important;
	margin-right: auto!important;
	margin-bottom: 0!important;
	margin-left: auto!important;
	padding: 0px;
}
.sp100{
width:50%;
}
.menubar{
	background-color: #99c934;
	margin: 0px;
	padding: 0px;
	height: 36px;
	background-image: url(../images/new/bg_header.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	color: #FFF;
}

.logo{
	width: 381px;
	height: 70px;
	float: left;
	margin-top: 8px;
	padding: 0px;
	margin-bottom: 0px;

}

.topread{
	height: 33px;
}

div#menu2 {
	/*background-image: url(images/bg_menu2.gif);
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: 0 0;*/
	/*float: left;*/
	width: 950px; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	height: 36px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/* ========MENU CUSTOMIZE======== */
div#menu2 ul {
   margin:0;
   padding:0;
   list-style-type:none;
}

div#menu2 li {
	float: left;
	margin: 0;
	font-weight: normal;
	background: url(../images/bg_menupause2.gif) no-repeat 0 50%;
	height: 36px;
}

div#menu2 li a {
	display: block;
	line-height: 36px;
	color: #fff;
	margin-left: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	height: 36px;
}

div#menu2 li a:hover {
   color:#fff;
   background:#c9ad20;
}

div#menu2 li.home {
   background:none;
}

div#top2 {
	background-color: transparent;
	background-repeat: repeat-y;
	background-attachment: scroll;
	width: 565px;
	float: right;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 2px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}
div#top2 h1{
	color: gray;
	font-size: 9px;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

.sidebar_m {
	float: left;
	width: 340px;
	padding-bottom: 10px;
	padding-top: 5px;
	padding-left: 0px;
}


.sidebar1 {
	float: right;
	width: 340px;
	padding-bottom: 10px;
	padding-top: 5px;
}

.sidebar2 {
	float: left;
	width: 340px;
	padding-bottom: 10px;
	padding-top: 5px;
	padding-left: 0px;
}

.content_m {
	width: 950px;
	float: right;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: auto;
	margin-left: auto;
}

.content {
	width: 600px;
	float: left;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
}

.content_l {
	width: 600px;
	float: left;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: 10px;
	margin-left: 0px;
	margin-bottom: 10px;
}

.chart_m {
	width: 590px;
	float: right;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-left: 0px;
}


/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}

.content_l ul, .content_l ol { 
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}

/* ~~ ナビゲーションリストのスタイル付け (Spry などの事前作成済みのフライアウトメニューを使用する場合は削除できます) ~~ */
ul.nav {
	list-style: none; /* リストのマーカーを削除します。 */
	border-top: 1px solid #666; /* リンク用の上部のボーダーを作成します。他のすべてのものは LI 上で下部のボーダーを使用して配置されます。 */
	margin-bottom: 15px; /* 下のコンテンツのナビゲーション間の間隔を作成します。 */
}
ul.nav li {
	border-bottom: 1px solid #666; /* ボタンの区切り線を作成します。 */
}
ul.nav a, ul.nav a:visited { /* これらのセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます。 */
	padding: 5px 5px 5px 15px;
	display: block; /* リンクにブロックプロパティを指定し、リンクが含まれる LI 全体がリンクになるようにします。これにより、領域全体がマウスのクリックに反応するようになります。 */
	width: 310px;  /*この幅により、IE6 でボタン全体をクリックできるようになります。IE6 をサポートする必要がない場合は削除できます。適切な幅を計算するには、サイドバーコンテナの幅からそのリンクの余白を減算します。 */
	text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* マウスを使用する場合もキーボードを使用する場合も、背景色とテキストカラーを変更します。 */
	color: #FFF;
}

/* ~~ フッター ~~ */
.footer {
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	height: 100px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.footer_r{
	float: right;
	height: 90px;
	width: 440px;
	font-size: 11px;
	text-align: right;
	margin-top: 10px;
}

.footer_l{
	width: 510px;
	float: left;
	margin-top: 10px;
}

/* ========FOOTMENU CUSTOMIZE======== */
div#footMenu2 ul {
	margin: 0;
	padding: 0;
	text-align: left;
   
}

div#footMenu2 li {
   display:inline;
   margin:0 0 0 10px;
   line-height:3.0;
   font-size:0.75em;
   list-style:none;
}

div#footMenu2 li a {
	color: #333;
	padding-left: 10px;
	background-image: url(../images/new/bg_footmenu.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
}

div#footMenu2 li a :hover{
   color:#666;
}

/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 9px;
	line-height: 0px;
}
.new{
	color:#F00;
}
/* ========SUBCONTENTS CUSTOMIZE======== */
.section {
   margin-bottom:10px;
}

.sidebar1  ul, .sidebar2 ul {
	padding: 0;
	margin-top: 5;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 5px;
}
.sidebar1  li, .sidebar2 li { padding:5px 0; font-size:0.75em; line-height:1.4; list-style:none; }

.sidebar1  li a, .sidebar2 li a { color: #a7005d; display:block; padding-left:12px; background:url(../images/bg_list.gif) no-repeat 0 5px; }

.bg_golfer li a{ color: #a7005d; display:block; padding-left:20px; background:url(../images/new/bg_list_qg.gif) no-repeat 0 2px; }

.sidebar1  li a:hover, .sidebar2 li a:hover {	color: #d730ad; }

.souba{
	font-size: 16px;
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border: 2px solid #999;     /* 枠線の装飾 */
	background-color: #E6F1C6;   /* 背景色 */
	-moz-box-shadow: 2px 2px 2px #aaaaaa; /* Firefox */
	-webkit-box-shadow: 2px 2px 2px #aaaaaa; /* Safari,Chrome */
	box-shadow: 2px 2px 2px #aaaaaa; /* CSS3 */
	behavior: url(../ie-css3.htc); /* IE */
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 130%;
	clear: both;
	font-weight: bold;
	width: 515px;
	float: right;
	margin-right: 10px;
	padding-top: 10px;
	padding-right: 4px;
	padding-bottom: 10px;
	padding-left: 4px;
}
.souba2{
	font-size: 16px;
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border: 2px solid #999;     /* 枠線の装飾 */
	background-color: #E6F1C6;   /* 背景色 */
	-moz-box-shadow: 2px 2px 2px #aaaaaa; /* Firefox */
	-webkit-box-shadow: 2px 2px 2px #aaaaaa; /* Safari,Chrome */
	box-shadow: 2px 2px 2px #aaaaaa; /* CSS3 */
	behavior: url(../ie-css3.htc); /* IE */
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 130%;
	clear: both;
	font-weight: bold;
	width: 515px;
	float: right;
	margin-right: 40px;
	padding-top: 10px;
	padding-right: 4px;
	padding-bottom: 10px;
	padding-left: 4px;
}

.txt_red{
	color:red;}
.txt_blue{color:blue;}

.txt_m{
	font-size: medium;
}
.txt_s{
	font-size:small;
}
.txt_s2{
	font-size:small;
}
.txt_s td:nth-child(1), .txt_s td:nth-child(3), .txt_s td:nth-child(5), .txt_s td:nth-child(6), .txt_s td:nth-child(7){
	font-weight: bold;
}
.txt_s1 td:nth-child(1), .txt_s1 td:nth-child(3), .txt_s1 td:nth-child(5), .txt_s1 td:nth-child(6), .txt_s1 td:nth-child(7){
	font-weight: bold;
}
.txt_s2 td:nth-child(2), .txt_s2 td:nth-child(4), .txt_s2 td:nth-child(5){
	font-weight: bold;
}
.txt_s2 td {font-weight: bold;}

.txt_ss{
	font-size: x-small;
	}
.txt_red_m{
	color:red;
	font-size: medium;
	font-weight: bold;
}
.txt_blue_m{
	color: #0000CC;
	font-size: medium;
	font-weight: bold;
}
.txt_black_m{
	color:#000;
	font-size: medium;
	font-weight: bold;
}
.txt_green_m{
	color: #006600;
	font-size: medium;
	font-weight: bold;
}

.txt_souba{
	color: #C00;
	font-size: large;
	font-weight: bold;
}

.txt_souba_m{
	color: #C00;
	font-size: medium;
	font-weight: bold;
}

.information dt {
	float: left;
	width: 10em;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 1em;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
.information dd {
   margin:0 0 0.5em 11em;
   padding:0;
}

.searchbox{
	width: 190px;
border:solid 1px #999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.searchbtn{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


div[id^="box"] { /* セレクタ名の前方一致 */
	display: none;
	background-color: #ffffff;
	padding: 20px;
	width: 500px;
}

/*#box,
#box1,
#box2,
#box3 {
	display: none;
	background-color: #ffffff;
	padding: 20px;
}
#box p:first-child ~ p,
#box1 p:first-child ~ p,
#box2 p:first-child ~ p,
#box3 p:first-child ~ p {
	margin-top: 1em;
}
#box {
	width: 500px;
}
#box1 {
	width: 500px;
}
#box2 {
	width: 500px;
}
#box2 img {
	margin: 0 10px 10px 0;
	float: left;
}
#box3 {
	width: 800px;
}
*/

.link {
	text-align: center;
}
.modal-close {
	margin-top: 1em;
	text-align: center;
}
#modal-win {
	width: 100%;
	position: absolute;
}
#modal-win-inner {
	box-shadow: 0 0 5px rgba(0, 0, 0, .25);
	margin: 0 auto;
	position: relative;
	z-index: 101;
	border-radius: 10px;
}
#modal-win-inner > * {
	border-radius: 10px;
}
#modal-bg {
	width: 100%;
	height: 100%;
	background-color: #333333;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
}
table.line{
	width:450px;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-collapse:collapse;
	}
.line th{
	border-right:1px solid #999;
    border-bottom:1px solid #999;
}
.line td{
	border-right:1px solid #999;
    border-bottom:1px solid #999;
}

table.linew{
	width: 840px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-collapse: collapse;
	}
.linew th{
	border-right:1px solid #999;
    border-bottom:1px solid #999;
}
.linew td{
	border-right:1px solid #999;
    border-bottom:1px solid #999;
}

.topicpath{
	padding-top:10px;
	padding-botto:10px;
}

.topicpath ol li {
        /* liを横並び＆ブレットを消す */
        display: inline;
        list-style-type: none;
}

.topicpath ol li:before {
        /* liの前に記号追加 */
        content: " > ";
}

.topicpath ol li:first-child:before {
        /* 最初のliだけcontentを消す */
        content: none;
}

div.btn a:hover img
{
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}
.banner{
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border: 1px solid #CCC;     /* 枠線の装飾 */
	background-color: #FFFFFF;   /* 背景色 */
	/*background-color: #E6F1C6;*/ 

	-moz-box-shadow: 2px 2px 2px #aaaaaa; /* Firefox */
	-webkit-box-shadow: 2px 2px 2px #aaaaaa; /* Safari,Chrome */
	box-shadow: 2px 2px 2px #aaaaaa; /* CSS3 */
	behavior: url(../ie-css3.htc); /* IE */
	padding-top: 15px;
	padding-bottom: 15px;
	float: left;
	width: 590px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size: 0.9em;
	/*height: 250px;*/
}
.banner h4{
	font-size:16px;
}

.banner a{
	line-height: 135%;
	/*font-size:1.5em;*/
}

.kadomaru{
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border: 1px solid #CCC;     /* 枠線の装飾 */
	background-color: #FFFFFF;   /* 背景色 */
}

.bg_golfer{
	background-image: url(../images/new/bg_golfer.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-left-color: #CCC;
	width: 338px;
	font-size: 20px;
	font-weight: bold;
}

.accordion-box {
	margin:0;
	padding:1px 0;
}
.accordion-box h4 {
	color:#a7005d;
	cursor:pointer;
/*	font-weight:normal; */
}
/* active */
.accordion-box h4.active {

}
/* hovered */
.accordion-box h4.hovered {
	color:#d730ad;
}

.accordion-box .accordion-block {
	display:block;
	margin:1px 0 0 1px;
	padding:0;
}
.accordion-box ul li {
	font-size: 0.9em;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0.5em;
	padding-left: 0;
	margin-left:-10px;
}

.accordion-box2 {
	margin:0;
	padding:1px 0;
}
.accordion-box2 h4 {
	color:#a7005d;
	cursor:pointer;
	font-weight:bold;
	font-size: large;
}
/* active */
.accordion-box2 h4.active {

}
/* hovered */
.accordion-box2 h4.hovered {
	color:#d730ad;
}

.accordion-box2 .accordion-block {
	display:block;
	margin:1px 0 0 1px;
	padding:0;
}
.accordion-box2 ul li {
	font-size: 0.9em;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-left:-20px;
}

.osusumecc{
	width: 112px;
	float: left;
	font-size: 10px;
	font-weight: normal;
	line-height: 120%;
}
.osusumecc a{
	color: #329906;
}
.osusumecc a:hover{
	color: #d730ad;
}
.heikin{
	color: #0066CC;
	}
.shitei{
	color: #CC0099;
}
.uline{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.new{
	vertical-align: baseline;
}

.new2 {
    vertical-align: baseline;
    padding-bottom: 3px;
}

.nonborder {
  border:none;
  outline:none;
  /*overflow:hidden;*/
}

img {
  border:none;
  outline:none;
  /*overflow:hidden;*/
}

.ticker {
	padding: 2px;
	width: 950px;
	text-align: center;
	/* border: #ccc 1px solid; */
	position: relative;
	overflow: hidden;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.ticker ul {
	width: 100%;
	position: relative;
	padding: 0px;
	margin: 0px;
}

.ticker ul li {
	width: 100%;
	display: none;
}

.shikyu{
	color: #F00;
	font-size: medium;
	font-weight: bold;
	background-image: url(../images/new/fast.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 50px;
	line-height: 200%;
	
}
.chumoku{
	color: #F00;
	font-size: medium;
	font-weight: bold;
	background-image: url(../images/new/chumoku.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 50px;
	line-height: 200%;
	
}

.ichioshi{
	color: #F00;
	font-size: medium;
	font-weight: bold;
	background-image: url(../images/new/ichioshi_s.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 50px;
	line-height: 200%;
	
}

#search_button{
	border: 0px;
	width: 100px;
	height: 27px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	background-color: #363;
} 
#search_box{
	width:140px;
	background-color: #E6F1C6;
	margin-right:2px;
}

.txt_linkred{
	color:#a7005d;
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


.past-chart td{
	border-width: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: #999;
}

.asahi img {
	width:100%;
	height:auto;
}

.soubatable th{
	text-align:left;
	font-weight: normal;
}
.osusume{
	float: left;
	width: 32%;
    margin-left: 1%;
}

ul.pref {
    text-align: right;
    border: 1px solid #ccc;
    width: auto;
    float: right;
    margin: 10px 0px;
}

ul.pref li {
    display: inline-block;
    text-align: center;
    padding: 0 5px;
}

.txt-center{
    text-align: center;
  }
 .txt-right{
    text-align: right;
  }