/*
Align page top centre
Page width 744 pixels
All copy for site on server (except 2 pages to follow)
Sitemap attached

NAVIGATION
11pt Verdana Regular 333333
On State - 11pt Verdana Bold 99CC33
Sub Nav - 11pt Verdana Regular 666666
Sub Nav On - 11pt Verdana Bold  666666
Green Arrow points down when menu open

HOMPEPAGE
Blue Heading: 16pt Verdana Bold 0099CC

Grey Text: 11pt Verdana Reg 333333

FOOTER
10pt Verdana Regular 666666

TEXT
Page Header - 14 pt Verdana Bold 0099CC
Body Text: 11pt Verdana Reg 333333
Text Links: Green 669900

BANNERS
The small banners on the left column of the internal pages have a rollover.

TABLES
Top bar - dark green 99CC33
Other bars - light green E0F0C1
*/


/* Defaults
================================================================*/
*, body { margin:0px; padding:0px; }
p { margin:0 0 15px;  }
img { border:0px; }
a { text-decoration:none; color: #690; }
a:hover { text-decoration:underline }

/* General Fonts & Styles
================================================================*/
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333; }
h1 { font-size:15px; color:#09c; margin:0 0 15px; font-weight: bold; }
h2 { font-size: 13px; color: #690; margin: 1px 0 6px; }
h3 { font-size: 11px; color: #333; margin-bottom: 3px; }
/*lists of questions and answers have tighter heading spacing*/
.questions h2 { font-size: 11px; color:#09c; margin: 0; }
p { line-height:15px; margin:0 0 15px; }
ul {list-style-type: none; margin: 0 0 15px; }
/*any lists that are meant to look like bulleted lists in main content area (green arrows) have the class bulleted*/
ul.bulleted { margin-left: 4px; line-height: 19px; } 
#main ul.bulleted li { padding-left: 16px; background:url(../images/internal_pages/arrow_bullet.gif) top left no-repeat; }
ol { margin: 0 0 15px 23px; line-height: 16px; }
/*standard table formatting e.g. call costs page*/
table { border-collapse:collapse; width: 100%; margin-bottom: 15px; }
th { background-color: #9c3; color: #fff; padding: 6px 9px; }
td { background-color: #e0f0c1; vertical-align:top; padding: 5px 9px; color: #333; }
th, td { border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
/*forms*/
label { float: left; color: #09c; font-weight: bold; margin-right: 10px; }
textarea, input, option, select { font: 11px Verdana, Arial, Helvetica, sans-serif; padding:1px 0; color: #333; }
/*bordered divs - very common for divs to have either top or bottom dotted border*/
.topborder, .bottomborder { background:url(../images/internal_pages/divider.gif) top left repeat-x; }
.bottomborder { background-position: bottom left; }
tr.clear td, td.clear { background:none; background-color:none; }


/* Main Layout
================================================================*/
body { text-align:center; background:#fff url(../images/homepage/page_bg.jpg) top center repeat-y; }
#wrapper { margin:0 auto; text-align:left; width:744px; position:relative;
	background:url(../images/homepage/banner_bg.jpg) top center no-repeat; }
/*===sidebar: logo and nav===*/
/*the current main nav item has a class of open if it has a submenu*/
/*links that should look active have a class of on*/
#sidebar #logo { position:relative; left:15px; width:111px; margin-bottom:26px; }
#sidebar { width:232px; float:left; display: inline; margin-left: 19px; padding-bottom: 30px; }
#sidebar ul, #sidebar li { margin:0px; padding:0px; list-style-type:none; }
#sidebar ul.nav { width: 180px; margin:0 0 42px 0; background:url(../images/homepage/nav_dotted_line.gif) top left no-repeat; }
#sidebar ul.nav li { background:url(../images/homepage/nav_dotted_line.gif) bottom left no-repeat; padding: 1px 0; }
#sidebar ul.nav a, #sidebar ul.nav a:visited, #sidebar ul.nav a:hover, #sidebar ul.nav a:active { line-height:22px; display:block;
	padding-left:13px; background:url(../images/homepage/nav_green_arrow.gif) left center no-repeat; margin: 2px 0; text-decoration: none; }
ul.nav a, ul.nav a:visited { color: #333; }
ul.nav a:hover { color: #9c3; font-weight: bold; }
#sidebar ul.nav li.open a, #sidebar ul.nav li.open a:visited, #sidebar ul.nav li.open a:hover, #sidebar ul.nav li.open a:active{ color: #9c3; background-image:url(../images/internal_pages/nav_arrow_open.gif); }
#sidebar ul.nav a.on { color: #9c3; font-weight: bold; }
#sidebar ul.nav li li { background: none; }
ul.nav li li a { font-weight: normal; }
#sidebar ul.nav li.open li a, #sidebar ul.nav li.open li a:visited, #sidebar ul.nav li.open li a:hover, #sidebar ul.nav li.open li a:active { background: none; color: #666; padding-left: 0; margin-left: 20px; }
#sidebar ul.nav li.open li a.on { color: #666;  font-weight: bold; }
/*===main: main content area===*/
#main { width:428px; margin: 0 65px 42px 0; float:left; display: inline; }
/*on wide pages, main occupies full remaining width width*/
.wide #main { width: 493px; margin-right: 0; }
/*on widemargin pages, main occupies nearly full width (more presentable!)*/
.widemargin #main { width: 483px; margin-right: 10px; }
/*home page is a special case*/
.homepage #main { width: 483px; margin: 0 10px 0 0; }
/*===edit : animated phone graphic now included at top of main on each page===*/
#animation { display: block; height: 75px; margin: 0 0 26px 328px; }
.homepage #animation { margin-bottom: 0; }
/*===footer: copyright, credit, links and payment info==*/
/*===nb float, width and inline necessary to get ie6 to show border on shorter pages*/
#footer {  position: absolute; width: 724px; display: inline; clear: both; float: left; border-top:5px solid #E0E0E0; margin: 0 10px; padding: 3px 0 6px 0; font-size:9px; color: #666; }
#footer p { margin:2px 0 0; }
#footer a { color:#666; }
/*pixel design link*/
#footer a.credit { color: #999; }
/*worldpay info*/
#ecommerce { position: absolute; top: 10px; left: 500px; }

/* Specific Pages
================================================================*/

/*===homepage===*/
.welcome { margin: 0 35px 40px 20px; }
/*quote on home page*/
#sidebar blockquote { margin: 110px 0 5px; clear:both; width: 120px; line-height: 18px; position:relative; font-size: 14px; color: #09c; }
#sidebar blockquote strong { font-weight: normal; font-size: 20px; }
#sidebar cite { color: #666; font-style: normal; font-weight: normal; }

/*===simpacks landing page===*/
.pagesimpacks h1 { position: relative; height: 87px; padding: 23px 0 0 100px; margin-bottom: 8px; background:url(../images/simpacks/large_arrow.gif) top left no-repeat; }
.picsim { position: absolute; top: 3px; right: 53px; } 
.headline { color: #09c; line-height: 23px; }
.headline .big { font-size: 14px; }
a.terms { color: #333; text-decoration: underline; }
.pagesimpacks .orderbutton { display: block; margin: 14px 0 23px 18px; }
/*===fonepacks landing page===*/
div.fonepack { margin: 0 30px 16px 0; }
div.fonepack h2 { height: 38px; padding-left: 60px; background:url(../images/fonepacks/arrow_fonepack.gif) top left no-repeat; }
div.fonepack h2 img { margin-top: 11px; }
div.fonepack .info { margin-left: 67px; width: 270px; padding-bottom: 5px; }
div.fonepack h3 { color: #09c; }
#main ul.dashed { margin: 0 0 10px 28px; color: #09c; }
#main ul.dashed li { line-height: 15px; padding-left: 18px; background:url(../images/internal_pages/dash_bullet.gif) left center no-repeat; }
/*===fonepacks detail page===*/
.pagefonepack h1 { margin-bottom: 0; }
div.banner { position: relative; height: 76px; margin: 4px 0 16px; background:url(../images/fonepacks/large_arrow.gif) top left no-repeat; }
div.banner img { position: absolute; left: 98px; bottom: 10px; }
#main ul.summary { color: #09c; margin: 0 0 15px; }
#main ul.summary li { line-height: 18px; }
div.product { float: right; }
div.product .picture { margin: 2px 0 39px; }
div.product .orderbutton { margin-left: 16px; }
ul.specs { font-size: 10px; }
#main ul.specs li { line-height: 20px; }

/*===mobile media landing page===*/
/*downloads chart*/
div.chart { float: right; width: 171px; display: inline; margin-right: 10px; background: #99d6eb url(../images/mobile_fun/top5_background.gif) top left repeat-x; }
ol.chart { list-style-type: none; color: #036; font-weight: bold; margin: 16px 0 0 0; background:url(../images/mobile_fun/top5_dotted_line.gif) top left repeat-x; }
ol.chart li { padding-left: 7px; background:url(../images/mobile_fun/top5_dotted_line.gif) bottom left repeat-x; }
ol.chart li a { display: block; padding: 6px 0 6px 21px; background-position: left center; background-repeat: no-repeat; color: #036; }
ol.chart li.no1 a { background-image: url(../images/mobile_fun/1.gif); }
ol.chart li.no2 a { background-image: url(../images/mobile_fun/2.gif); }
ol.chart li.no3 a { background-image: url(../images/mobile_fun/3.gif); }
ol.chart li.no4 a { background-image: url(../images/mobile_fun/4.gif); }
ol.chart li.no5 a { background-image: url(../images/mobile_fun/5.gif); }
div.chart .inner { background:url(../images/mobile_fun/top5bottom.gif) bottom center no-repeat; padding-bottom: 28px; }
/*mobile media sections list*/
.funlanding .section { float: left; clear: left; display: inline; width: 277px; margin: 0 0 12px 0; padding: 12px 0; }
div.intro { float: left; width: 170px; display: inline; }
.funlanding .intro h2 { margin: 8px 0 15px; background:url(../images/mobile_fun/m_arrow.gif) top left no-repeat; padding-left: 27px; height: 22px; }
div.funlanding .section img.picsection { float: left; width: 95px; margin-right: 11px; display: block; display: inline; }
div.funlanding { float: left; width: 277px; display: inline; padding-top: 10px; }

/*===mobile media section detail page e.g. games===*/
.pagefun h1 { font-weight: normal; }
/*mobile media navigation form*/
.funform { color: #333; margin: 0 0 10px 0; }
.funform select { width: 160px; }
.funform label { display: block; font-weight: normal; margin-bottom: 2px; float: none; }
.funform div { width: 170px; float: left; }
.funform #submit { padding-top: 15px; }
/*list page is funlist div, made up of funrow divs for each row in list*/
/*individual items e.g. a game are wrapped in a fun div*/
div.funlist { clear: both; padding-top: 10px; }
.funrow { float: left; margin-bottom: 8px; }
.funlist .fun { width: 100px; display: inline; margin: 0 18px; float: left; font-weight: bold; font-size: 10px; }
.fun ul { margin-bottom: 8px; }
.fun .picfun { margin-bottom: 3px; }
.funlist .funrow .middle { margin: 0 28px; }
.funlist a { color: #9c0; }
/*editors pick link*/
.funlist a.editor { display: block; height: 18px; background:url(../images/mobile_fun/blue_star.gif) center left no-repeat; padding-left: 21px; color: #09c; }
/*more info link*/
.funlist a.more { padding-left: 2px; }
/*pagination*/
.funlist .paging { margin: 0 3px 8px 0; text-align: right; color: #9c0; }
.funlist .paging a { font-weight: bold; text-decoration: underline; }

/*===fun item detail page e.g. game detailed info screen===*/
.fundetail { clear: both; margin-right: 20px; padding-top: 5px; }
.fundetail a.return { text-decoration: none; margin: 5px 0; padding: 0; } 
.fundetail img.cover { float: left; width: 200px; margin-right: 20px; }
.fundetail .details { width: 247px; margin-left: 220px; }
.fundetail h2 { color: #333; font-size: 14px; }
#main .fundetail li { line-height: 20px; }
#main .fundetail li img { margin: 5px 0; }
.fundetail a.rate { display: block; height: 18px; background:url(../images/mobile_fun/green_star.gif) center left no-repeat; padding-left: 24px; color: #690; font-weight: bold; }
.fundetail ul.links li { margin-bottom: 10px; }

/*===order forms===*/
.pageorder h1 { font-size: 20px; color: #9c0; }
.orderform { margin-right: 5px; padding: 0; color: #09c; }
.orderform label { width: 221px; display: inline; margin-right: 5px; margin: 8px 0; }
.orderform label span { font-weight: normal; display: block; }

.orderform select, .orderform input { float: left; font-size: 10px; width: 205px; display: inline; margin: 8px 0; }
.orderform select { width: 210px; }
.orderform input.max,.orderform select.max { width: auto; }
.orderform p { clear: both; }
.orderform label.option { width: auto; margin-right: 3px; }
.orderform input.option, .orderform select.date, .orderform select.year { width: auto; float: left; margin-right: 10px; }
.orderform select.date { width: 50px; }
.orderform select.year { width: 80px; }
#main .orderform ul.smallprint { clear: both; font-size: 10px; width: 350px; list-style-type:disc; margin: 0 0 10px 30px; }
.orderform a { color: #09c; }
.orderform a.moreinfo { text-decoration: underline; font-weight: normal; }
.orderform input.button { width: 104px; }
.orderform p.actions { float: none; text-align: right; margin-right: 58px; }
.orderform p.actions input { float: right; }
.orderform label.accessLabel { width: 0; text-indent: -1000em; }
.orderform .explanation { display: block; clear: both; margin-left: 226px; }

/*===special offers pages===*/
/*refer a friend*/
#referform label { width: 140px; }
#referform p.actions { margin-left: 200px; }
#referform .textbox, #nanoform .textbox { width: 220px; }
/*ipod nano offer*/
.picnano { margin-left: 115px; } 
.pagenano .highlight { width: 355px; }
.pagenano h1 { padding: 30px 0 30px 100px; margin-bottom: 8px; background:url(../images/special_offers/large_arrow.gif) top left no-repeat; }
.pagenano h2 { color: #09c; }
.pagenano .smallprint { font-size: 10px; }
#nanoform { width: 365px; }
#nanoform label { width: 100px; }
#nanoform p.actions { margin-left: 160px; }

/*===faqs===*/
.pagefaq ul.bulleted { margin-bottom: 20px; }

/*===sitemap===*/
#sitemap h2 { margin-top: 10px; }
#sitemap h2 a { color: #09c; }
#sitemap li a { color: #333; }
#sitemap .column { width: 200px; float: left; display: inline; } 

/* Custom Elements
================================================================*/
/*banners - large ones on home page and small ones on left of each page*/
#main ul.banners, ul.banners, ul.banners li { margin:0px; padding:0px; list-style-type:none }
ul.banners { clear:both }
ul.banners li, #main ul.banners li { display:inline; }

/*small banner pixy rollovers*/ 
#sidebar ul.banners a { text-indent:-5000px; display: block; float: left; }
#sidebar ul.banners a:hover { text-decoration: none; }
#sidebar li#featurefonepacks { width: 90px; height: 63px; background:url(../images/internal_pages/banner1.gif) no-repeat top right; }
#sidebar a#bannerfonepacks { width: 90px; height: 63px; background:url(../images/internal_pages/banner1.gif) no-repeat top left; }
#sidebar a#bannerfonepacks:hover { background-position: top right; }
#sidebar li#featuresimpacks { width: 89px; height: 63px; background:url(../images/internal_pages/banner2.gif) no-repeat top right; }
#sidebar a#bannersimpacks { width: 89px; height: 63px; background:url(../images/internal_pages/banner2.gif) no-repeat top left; }
#sidebar a#bannersimpacks:hover { background-position: top right; }
#sidebar li#featurefun { width: 90px; height: 62px; background:url(../images/internal_pages/banner3.gif) no-repeat top right; }
#sidebar a#bannerfun { width: 90px; height: 62px; background:url(../images/internal_pages/banner3.gif) no-repeat top left; }
#sidebar a#bannerfun:hover { background-position: top right; }
#sidebar li#featureoffers { width: 89px; height: 62px; background:url(../images/internal_pages/banner4.gif) no-repeat top right; }
#sidebar a#banneroffers { width: 89px; height: 62px; background:url(../images/internal_pages/banner4.gif) no-repeat top left; }
#sidebar a#banneroffers:hover { background-position: top right; }

/*back to another page links*/
a.return { display: block; margin-top: 25px; text-decoration: underline; }
/*smaller text*/
#main .small { font-size: 10px; }
/*blue paragraphs for emphasis*/
.highlight, .highlight a { color: #09c; }

/* Hacks
================================================================*/
#content:after { content: "."; display: block; height: 0; clear: both; visibility:hidden }
#column1, #column2, #column3 { display:inline } /* IE margin problem */
#navigation ul, #footer ul, .formActions ul{ margin:0px; padding:0px; list-style-type:none } /* Dreamweaver visual display help */
.clear { clear:both; height: 0; }

#links ul, #links li { margin:0px; padding:0px; }  /* Dreamweaver visual display help */