@import url(http://www.google.com/cse/api/branding.css);
html {background:#f0f0f0 url(../graphic/back.jpg) repeat-x 0 0}
body {}

#wrapper {width:800px; margin:0 auto; text-align:left;}
#topad {width:800px; height:60px; text-align:center; padding:10px 0;}
#topad #googletop {width:468px; height:60px; float:left;}
#topad .googletop {width:468px; height:60px; float:left;}

#topad img {float:left;}
#header {width:1125px; height:160px; position:relative; float:left; margin-bottom:0; background:url(../graphic/backlight.png) no-repeat;}
* html #header {background:none;}

#content {width:800px; float:left;}
#content2 {width:1125px; clear:left;}
#info {width:750px; min-height:1000px; padding:10px 24px; background:#fff; border:1px solid #ddd; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
#info2,
.results
{width:1075px; min-height:200px; padding:10px 24px; background:#fff; border:1px solid #ddd; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

#info p {font-size:12px; line-height:18px;}
#info p.info {margin-left:10px;}
#info h2 {padding:10px 0 5px 10px; margin:0; font-size:15px; color:#151;}
#info h3 {padding:5px 0 10px 10px; margin:0; font-size:12px; color:#048; font-weight:normal;}

#leftCol {width:475px; float:left; min-height:200px; margin-top:10px;}
#midCol {width:300px; float:right; min-height:300px;}
#rightCol {width:300px; float:right; min-height:700px;}

#leftCol a, 
#leftCol a:visited,
#midCol a, 
#midCol a:visited,
#rightCol a, 
#rightCol a:visited
{color:#048; text-decoration:none;}
#leftCol a:hover,
#midCol a:hover,
#rightCol a:hover
{text-decoration:underline;}

#footer {min-height:100px; text-align:center; background:#444;}
#foot {width:1125px; margin:0 auto; text-align:left; background:#444;}
#foot p {padding:0; margin:0; line-height:22px; font-size:11px; color:#aaa;}
.clear {clear:both;}

#header #logo {float:left; width:300px; font-family:'times new roman', serif;}
#header #logo h1 {padding:0; margin:0; font-size:45px; float:left; color:#fff;}
#header #logo h1 a {color:#fff; text-decoration:none;}
#header #logo h2 {padding:0 0 0 10px; margin:0; font-size:45px; float:left; color:#69c; font-weight:normal;}
#header #logo h2 a {color:#69c; text-decoration:none;}

#header #logo h3 {font-family:'Ubuntu',arial, sans-serif; font-weight: 500; padding:0 0 0 5px; margin:0; clear:left; font-size:15px; color:#696;}
#header #logo h2 span {float:left; padding-left:5px;}
#header #logo h2 span.backy {padding-left:0;
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

#main_menu {padding:0; margin:0; list-style:none; position:absolute; right:0; top:1px;}
#main_menu li {float:left; margin-left:5px;}
#main_menu li a {font-family:'Ubuntu Condensed',arial, sans-serif; display:block; float:left; font-size:16px; background:#069; color:#fff; padding:20px 21px 0 21px; height:20px; text-decoration:none; border:1px solid #555; border-width:0 1px 1px 1px; border-radius: 0 0 5px 5px;}
#main_menu li a:hover {box-shadow:0 20px 30px -10px rgba(255,255,255,0.4); border-color:#888; background:#000; color:#6cf;}

.demos #main_menu li#demos a,
.menus #main_menu li#menus a,
.layouts #main_menu li#layouts a,
.boxes #main_menu li#boxes a,
.mozilla #main_menu li#mozilla a,
.explorer #main_menu li#explorer a,
.opacity #main_menu li#opacity a,
.java #main_menu li#java a {box-shadow:0 20px 30px -10px rgba(255,255,255,0.4); border-color:#888; background:#000; color:#6cf;}


#sub_menu {padding:0; margin:0; list-style:none; position:absolute; bottom:38px; right:0;}
#sub_menu li {float:left;}
#sub_menu li a {font-family:'Ubuntu',arial, sans-serif; font-weight: 500; display:block; float:left; font-size:11px; color:#fff; padding:0 0 0 15px; line-height:22px; text-decoration:none;}
#sub_menu li a img {border:0; margin-top:4px;}
#sub_menu li a:hover {color:#fc0;}

.help #sub_menu li#help a,
.faqs #sub_menu li#faqs a,
.contact #sub_menu li#contact a,
.privacy #sub_menu li#privacy a,
.sitemap #sub_menu li#sitemap a,
.keys #sub_menu li#keys a,
.support #sub_menu li#support a {color:#fc0;}

#navigation {padding:0; margin:0; list-style:none; position:absolute; bottom:38px; left:5px;}
#navigation li {font-family:'Ubuntu',arial, sans-serif; font-weight: 500; float:left; font-size:11px; color:#ccc; padding:0 15px 0 0; line-height:22px; }
#navigation li a {font-family:'Ubuntu',arial, sans-serif; font-weight: 500; display:block; float:left; font-size:11px; color:#fff; line-height:22px; text-decoration:none;}
#navigation li a:hover {text-decoration:underline;}

#search {position:absolute; right:0; top:60px; width:300px; float:right; text-align:right; background:url(../graphic/search.jpg)}

#search form {margin:0; padding:0;}
#search input {font-size:12px; border:0; background:#f0f0f0;}
#search input.search {width:126px; padding:3px 0 3px 10px; background:url(../graphic/trans.gif); border:0; margin-right:9px; margin-top:2px;}
.cse-branding-text {color:#fff;}

#search img {margin-top:-3px;}

img.slogan {background:url(../graphic/pc2.jpg) no-repeat; margin:14px 0;}
img.access {background:url(../graphic/access.jpg) no-repeat; margin:14px 0;}
img.faq {background:url(../graphic/faqs.jpg) no-repeat; margin:14px 0;}
img.contact {display:block; background:url(../graphic/contact.jpg);  margin:14px 0;}
img.privacy {display:block; background:url(../graphic/privacy.jpg);  margin:14px 0;}
img.map {display:block; background:url(../graphic/map.jpg);  margin:14px 0;}
img.access {display:block; background:url(../graphic/access.jpg); margin:14px 0;}
img.support {display:block; background:url(../graphic/support.jpg); margin:14px 0;}
img.advertise {display:block; background:url(../graphic/advertise2.jpg); margin:14px 0;}
img.oops {display:block; background:url(../graphic/oops.jpg); margin:14px 0;}

.box300 {width:258px; border:1px solid #ddd; background:#fff; padding:15px 20px; margin:10px 0; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
.box300 h3 {color:#000; font: bold 14px/16px arial, sans-serif; padding:0 0 10px 0; margin:0; border-bottom:1px solid #e8e8e8;}

.box300 dl {list-style:none; padding:0; margin:0; width:258px;}
.box300 dt {clear:left; padding:20px 0 5px 0; margin:0; font-size:14px; font-weight:bold; color:#151;}
.box300 dd {padding:3px 0; margin:0; font-size:11px; line-height:15px; color:#444; border-bottom:1px solid #e8f0f0;}
.box300 dd a {display:block; color:#048; text-decoration:none; width:258px; font-size:12px; font-weight:bold;}
.box300 dd a em {color:#666; float:right; font-style:normal; font-size:11px;}
.box300 dd a:hover {color:#08c; text-decoration:none;}

.box300 ul {list-style:none; padding:0; margin:0; width:258px; height:auto;}
.box300 ul li {text-decoration:none; color:#444; padding:2px 0; font-size:12px; border-bottom:1px solid #e8f0f0; word-spacing:-1px;}
.box300 ul li a {text-decoration:none; color:#048; font-size:12px; font-weight:bold;}
.box300 ul li a:hover {text-decoration:underline;}

.box300.noline ul li {border:none;}

.box300 p {padding:0; margin:0; width:258px; line-height:18px; font-size:12px; color:#444;}
.box300 p.red {color:#c00;}
.box300 a img {border:0;}
.box300 a.bannerad img {margin:5px 19px;}

.box300 table {width:258px; border-collapse:collapse; padding:0; margin:0;}
.box300 table th {padding-top:5px; color:#151; font-size:14px;}
.box300 table td {color:#444; font-size:12px;}
.box300 table tfoot td {text-align:center; color:#666; font-size:11px; padding-top:10px;}

#leftCol p {font-size:13px; padding:0; margin:5px 0 0 3px; color:#333; line-height:20px;}
#leftCol h3 {font-size:16px; font-weight:bold; color:#151; padding:10px 0 5px 0; margin:0 0 0 3px;}
#leftCol a {color:#048; text-decoration:underline;}

#leftCol a img {border:0; display:block; float:left;}
#leftCol ol li {font-size:13px; color:#555;}

#leftCol blockquote {padding:10px;}
#leftCol p.cite {color:#004488; display:list-item; padding:0 5px 0 0; list-style-image: url(../graphic/open_quotes.gif); background: url(../graphic/close_quotes.gif) bottom right no-repeat;}
#leftCol blockquote[cite]:after {content: "Quote taken from: " attr(cite); display: block; font-size:12px; color:#0088cc; text-align:right;}

#rightCol .googlemedium {width:300px; height:250px; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

img.float_left {float:left; padding:0 10px 10px 0; margin-top:10px;}

#infoBottom {clear:both; height:170px; position:relative; margin-top:10px;}
.box800 {width:728px; height:90px; padding:8px 35px; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
.box475 {width:468px; height:60px; padding:8px 3px 8px 2px; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

#infoBottom .prevNext {width:728px; height:32px; padding:8px 35px; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4); text-align:center; position:absolute; bottom:0;}
#infoBottom .prevNext a {display:block; height:32px; font-family:'Ubuntu',arial, sans-serif; font-weight: 700; color:#069; font-size:12px; line-height:32px; text-decoration:none;}
#infoBottom a.prevDemo {padding-left:40px; background:url(../graphic/prev2.png) no-repeat left center; float:left;}
#infoBottom a.nextDemo {padding-right:40px; background:url(../graphic/next2.png) no-repeat right center; float:right;}
#infoBottom a.comments {width:170px; background:url(../graphic/bubble.png) no-repeat right center; margin:0 auto; text-align:center;}
#infoBottom .prevNext a:hover {text-decoration:underline;}

#rightCol .adHere {width:298px; height:248px; border:1px solid #ddd; border-radius:3px; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
#rightCol .adHere h3 {color:#080; font: bold 16px/24px arial, sans-serif; padding:20px 20px 5px 20px; margin:0;}
#rightCol .adHere p {color:#333; font: normal 12px/18px arial, sans-serif; padding:5px 20px; margin:0;}

#indexInfo {width:800px;}
#indexInfo .indexLeft {width:525px; float:left;}
#indexInfo .indexRight {width:275px; float:right;}
#indexInfo .indexGoogle {width:493px; padding:15px; margin-bottom:10px; background:#fff; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
#indexInfo .indexCol1 {width:250px; float:left; padding-bottom:10px;}
#indexInfo .indexCol2 {width:250px; float:right; padding-bottom:10px;}
#indexInfo .indexCol3 {width:250px; float:right; padding-bottom:10px;}


dl.box250 {float:right; width:220px; padding:5px 15px; margin:0; background:#fff; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4); min-height:250px;}
dl.box250 dt {padding:10px 0 10px 0; margin:0; font-size:14px; font-weight:bold; color:#151; border-bottom:1px solid #e8f0f0;}
dl.box250 dd {padding:0 0 5px 0; margin:0; font-size:11px; color:#666;}
dl.box250 dd a {color:#048; text-decoration:none; width:220px; font-size:12px; font-weight:bold;}
dl.box250 dd a:hover {text-decoration:underline;}
#indexInfo .indexRight .indexCol3 dl.box250 {min-height:542px;}

.onTop {margin-top:0;}

#leftCol dl {padding:0; margin:10px;}
#leftCol dt {font-weight:bold; font-size:12px; color:#048;padding:10px 0 0 5px;}
#leftCol dd {font-size:12px; color:#444; line-height:18px; padding:0; margin-left:20px;}

.sitemap2 {width:490px;}
.sitemap2 li {padding-top:3px; padding-bottom:3px; font-size:12px;}

#leftCol p.highlight {color:#c00; font-weight:bold;}
#leftCol p.bold {font-weight:bold;}
#leftCol p.date {color:#c00; font-weight:bold;}

dl.box250R {float:right; width:220px; padding:5px 15px; margin:0 0 10px 0; background:#fff; border:1px solid #ddd; background:#fff; border-radius:3px; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
dl.box250R dt {padding:10px 0 10px 0; margin:0; font-size:14px; font-weight:bold; color:#151; border-bottom:1px solid #e8f0f0;}
dl.box250R dd {padding:0 0 5px 0; margin:0; font-size:11px; color:#666;}
dl.box250R dd a {color:#048; text-decoration:none; width:220px; font-size:12px; font-weight:bold;}
dl.box250R dd a:hover {text-decoration:underline;}

.red {color:#c00; font-weight:bold;}

pre {font-size:11px;}