/* Reset Styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h3, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; background: transparent; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
del { text-decoration: line-through; }
ins { text-decoration: none; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:active { outline: none; }
a { outline: none; }

/* End Reset */

/* make the fonts 125% larger, why? look below */
/* Now, make the fonts 50% smaller. This makes it easier to set font sizes: 1em = 10pts. So 12pt = 1.2em. */

html { font-size: 125%; }
body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 50%; background: url(../images/bg.gif) repeat-x; text-align: center; }
#wrapper { width: 680px; margin: 0 auto; text-align: left; }
#header {  height: 260px; background: url(../images/header.jpg) no-repeat; padding: 90px 0 10px; }
h1 { display: block; position: relative; left: 0; top: 0; width: 600px; height: 253px; padding: 0 40px 0; background: #326ba0 url(/splash/images/head.jpg) no-repeat; font: bold 4em Arial, Helvetica, sans-serif; letter-spacing: -0.05em; color: #fff; }
h1 span { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 680px; height: 253px; background: url(/splash/images/head.jpg) no-repeat; }

#col-one, #col-two { float: left; width: 345px; }
#col-two { width: 335px; }
li { height: 85px; width:335px; margin: 0 0 10px; }
li a { display: block; position: relative; height: 85px; padding: 24px 10px 0 96px; font-size: 1.25em; line-height: 1.0em; color: #fff; text-decoration: none; }
.cc { background: url(/splash/images/one.jpg) no-repeat; }
.mycc { background: url(/splash/images/two.jpg) no-repeat; color: #49a3c5; }
.cctv { background: url(/splash/images/three.jpg) no-repeat; }
.ccinfo { background: url(/splash/images/four.jpg) no-repeat; }
.sfoorg { background: url(/splash/images/five.jpg) no-repeat; }
.sfocom { background: url(/splash/images/six.jpg) no-repeat; color: #49a3c5; }
.cce { background: url(/splash/images/seven2011.jpg) no-repeat; }
.ccshop { background: url(/splash/images/eight.jpg) no-repeat; }

li a span { font-size: 1.5em; line-height: 1.1em; color: #1f2e50; }
.mycc span, .cctv span, .sfocom span {  }

li a:hover, .sfoorg:hover, .sfocom:hover { color: #333; }

.sfocom, .cctv, .sfoorg, .ccinfo { height: 97px; padding-top: 12px; }
li a.ccinfo span, li a.ccshop span { }

#social { clear: both; width: 680px; height: 85px; background: url(/splash/images/nine.jpg) no-repeat; }
#social h2 { float: left; width: 110px; margin: 18px 20px 0 20px; padding: 0; font-size: 2.0em; font-weight: normal }
#social ul { padding-top: 3px; }
#social li { float: left; margin: 2px 20px 0 0; height: auto; width: 230px; }
#social li a { height: auto; padding: 0; font-size: 1.25em;  color: #1f2e50; }
#social li img { vertical-align: middle; padding-right: 4px; }



#footer { clear: both; background: url(../images/footer.gif) repeat-x center top; clear:both; height: 60px; margin: 0 auto; margin: 40px 0 0 0; }