@import url("device-colours.css");

h2, h3, h4, h5, h6 {
	line-height			:150%;
	font-family			:"Arial",Verdana,sans-serif;
}

#device-header {
	z-index				:5px;
	background			:#000 url("images/devices-nav-banner.jpg") no-repeat 0 100%;
	padding-top			:115px;
	float				:left;
	clear				:both;
	width				:100%;
}

* html #device-header {
	position			:relative;
	height				:43px;
}

* html #device-header ul {
	display				:inline;
	position			:absolute;
}

#nav-device ul {
	margin				:0;
	padding				:0;
	float				:left;
	width				:100%;
}

#nav-device ul li {
	list-style			:none;
	list-style-type		:none;
	float				:left;
	background			:transparent;
	margin				:0;
	padding				:0 15px 0 0;
	margin-right		:15px;
	background			:url("images/nav-seperator.jpg") no-repeat 100% 50%;
}

#nav-device ul li.first {
	margin-left			:16px;
}

#nav-device ul li#nav-comparison {
	background			:none;
}

#nav-device ul li.dropdown {
	padding				:0;
	background			:none;
}

#nav-device ul li a {
	padding				:14px 0;
	display				:block;
	color				:#A2A2A2;
	
}

#nav-device ul li a:hover {
	text-decoration		:none;
	text-decoration:underline;
	color:#8AA530;
}

#nav-device ul li.dropdown {
	margin-right		:0;
}

#nav-device ul li.dropdown a {
	padding				:14px 27px 14px 16px;
	border-left			:1px solid #3C3C3C;
	border-top			:1px solid #3C3C3C;
	border-right		:1px solid #000;
	color				:#fff;
}

#nav-device ul li.dropdown a {
	text-decoration		:none;
	background			:transparent url("images/devices-nav-arrow.png") no-repeat 100% 50%;
}

#nav-device ul li.dropdown a span {
	display				:block;
}

#nav-device ul li.dropdown a:hover, #nav-device ul li.dropdown a.here {
	color				:#000;
	background-color	:#fff;
	background-image	:url("images/devices-nav-arrow-selected.png");
	text-decoration:none;
}

#nav-device ul li#nav-past-models {
	margin-left			:20px;
}

#nav-device ul li#nav-accessories {
	float				:right;
	background			:none;
	margin				:0;
	padding				:0;
}

#nav-device ul li#nav-accessories a {
	background			:url("images/devices-nav-accessories-background.jpg") repeat-x 0 0;
	padding				:14px 50px 14px 16px;
	color				:#fff;
	text-decoration		:none;
}

#nav-device ul li#nav-accessories a:hover {
	text-decoration		:underline;
}

#nav-secondary {
	border				:1px solid red;
	clear				:both;
}

#nav-secondary ul {
	float				:left;
	clear				:both;
	width				:100%;
	margin				:0;
	padding				:0;
}

#nav-secondary ul li {
	float				:left;
}

#devices-container {
	position			:relative;
	float				:left;
	width				:100%;
	clear				:both;
}


/**
 *
 */
#filters {
	float				:right;
	clear				:both;
	width				:290px;
	margin-bottom		:30px;
	margin-top			:15px;
	height				:20px;
	padding				:10px 8px 25px 8px;
	background			:url("images/device-filters-backbround.jpg") no-repeat 100% 100%;
	margin-top			:-60px;
}

#filters, #providers {
	display				:none;
}

.js #filters, .js #providers {
	display				:block;
}

#filters label {
	font-weight			:bold;
}

#filters div {
	float				:left;
	width				:150px;
}

#filters #choose-a-provider {
	margin-left			:20px;
}

#filters #choose-a-provider:hover{
	text-decoration:underline;
}

.js a.close {
	display				:block;
	position			:absolute;
	top					:-0px;
	right				:-0px;
	height				:18px;
	width				:21px;
	background			:url("images/btn-close.png") no-repeat 0 0;
	text-indent			:-999em;
}

* html .js a.close {
	position			:relative;
	float				:right;
}

/**
 *
 */
#providers {
	clear				:both;
}

.js .family .container {
	position			:relative;
}

* html .family .js a.close {
	top					:0;
	right				:0;
}

.js #providers {
	position			:fixed;
	z-index				:600;
	top					:100px;
	right				:0;
	left				:0;
}

.js #providers .container {
	width				:615px;
	margin				:0 auto;
	position			:relative;
}

.js #providers .inside {
	width				:95px;
	margin				:0;
	float				:left;
	min-height			:150px;
}

* html .js #providers .inside {
	height				:150px;
}

.js #providers .container .c-inner {
	padding				:15px;
	float				:left;
	background			:#fff;
	width				:585px;
	-moz-box-shadow		:0px 0px 20px #000;
	-webkit-box-shadow	:0px 0px 20px #000;
	box-shadow			:0px 0px 20px #000;
	/* For IE 8 */
	-ms-filter			:"progid:DXImageTransform.Microsoft.dropShadow(offX=0, offY=0, Color='#000000', positive=true)";
	/* For IE 5.5 - 7 */
	filter				:progid:DXImageTransform.Microsoft.dropShadow(offX=0, offY=0, Color='#000000', positive=true);
	-moz-border-radius	:5px;
}

.js #providers a.close {
	top					:5px;
	right				:8px;
}

* html .js #providers a.close {
	top					:30px;
	right				:20px;
	position			:relative;
	float				:right;
}

.js #providers h2 {
	margin-top			:0;
}

#overlay {
	position			:fixed;
	top					:0;
	right				:0;
	bottom				:0;
	left				:0;
	background			:#333;
	z-index				:500;
}

* html #overlay {
	position			:absolute;
	width				:100%;
	height				:100%;
}

* html .js #providers {
	position			:absolute;
	top					:150px;
}

/**
 * rows and items
 */
.row {
	float				:left;
	clear				:both;
	width				:825px;
	margin				:20px 0;
	padding-bottom		:30px;
}

.row .item {
	float				:left;
	width				:250px;
	position			:relative;
	margin-right		:15px;
	padding-right		:10px;
	background			:url("images/device-divider.jpg") repeat-y 100% 50%;
}

.row .last, .family .row .item {
	border				:none;
	background			:transparent;
	padding-right		:0;
}

.item .desc {
	float				:right;
	min-height			:236px;
	width				:125px;
}

* html .item .desc {
	height				:236px;
}

.item .desc img {
	float				:left;
}

.item .desc {
	width				:100%;
}

.item .desc h3, .item .desc dl, .item .desc ul {
	float				:right;
	width				:130px;
	clear				:none;
}

.item .foot {
	float				:left;
	clear				:both;
	width				:100%;
	margin-top			:15px;
}

.item .foot {
	*float				:none;
}

.item h3 {
	margin				:0 0 10px 0;
	font-size			:1em;
	font-weight			:normal;
}

.item h3 a {
	text-decoration		:none;
	color				:#4c4c4c;
}

.item h3 span {
	display				:block;
	float				:left;
	clear				:both;
	width				:100%;
}

.item h3 .bb, .item h3 .smartphone {
	font-size			:13px;
}

.item h3 .model {
	font-size			:18px;
	line-height			:25px;
}

.item ul {
	margin-top			:0;
	clear				:both;
}

.item ul {
	margin-left			:0;
}

.row .item ul li.messenger {
	background			:url("images/messenger.png") no-repeat 0 0;
	padding-left		:32px;
}

.row .item ul li.icon1 {
	background			:url("images/features-icon-mail.jpg") no-repeat 0 0;
	padding-left		:32px;
	min-height			:32px;
}

* html .row .item ul li.icon1 {
	height				:32px;
}

.row .item ul li.icon2 {
	background			:url("images/features-icon-browser.jpg") no-repeat 0 0;
	padding-left		:32px;
	min-height			:32px;
}

* html .row .item ul li.icon2 {
	height				:32px;
}

.row .item ul li.icon3 {
	background			:url("images/features-icon-media.jpg") no-repeat 0 0;
	padding-left		:32px;
	min-height			:32px;
}

* html .row .item ul li.icon3 {
	height				:32px;
}

.main .foot ul {
	float				:left;
	width				:48%;
	margin				:0;
	padding				:0;
	padding-bottom		:10px;
	clear				:none;
}

.main .foot ul.column-1 {
	width				:40%;
}

.main .foot ul.column-2 {
	float				:right;
	width				:55%;
}

.main .foot ul li  {
	clear				:both;
	background			:none;
	padding				:0;
	margin				:2px 0;
}

.main .foot ul.column-1 li {
	padding-left		:8px;
	margin-bottom		:5px;
	background			:transparent url("http	://uk.blackberry.com/assets/images/arrow_blue.gif") no-repeat 0 5px;
}

.main .foot ul li.last  {
	float				:right;
}

.item .foot ul {
	float				:left;
	margin-top			:0;
	margin-bottom		:0;
}

.item .foot .find-out-more {
	display				:block;
	background			:url("images/cta-find-out-more.jpg") no-repeat 0 0;
	height				:31px;
	width				:125px;
	float				:left;
	margin				:0 0 3px 0;
	text-indent			:-999em;
}

.item .foot .video a {
	background			:url("images/icon-play.png") no-repeat 0 0;
	padding				:4px 0 4px 35px;
	display				:block;
}

/**
 *
 */
#device-popout {
	width				:270px;
	position			:absolute;
	left				:195px;
	z-index				:9000;
	background			:transparent url("images/device-popout-background.png") no-repeat 0 0;
	padding				:10px;
	height				:270px;
	top					:10px;
}

* html #device-popout {
	background			:transparent url("images/device-popout-background-ie6.png") no-repeat 0 0;
}

#device-popout #pointer {
	display				:block;
	width				:23px;
	height				:34px;
	position			:absolute;
	left				:-17px;
	top					:20px;
	background			:transparent url("images/device-popout-arrow.png") no-repeat 0 0;
}

* html #device-popout #pointer {
	background			:transparent url("images/device-popout-arrow-ie6.png") no-repeat 0 0;
}

#device-popout .item {
	background			:transparent;
	min-height			:200px;
	padding				:10px;
}

* html #device-popout .item {
	height				:200px;
}

#device-popout .item .column-1, #device-popout .item .column-2 {
	clear				:both;
	float				:none;
	width				:100%;
}

#device-popout .item .video {
	display				:none;
}

#device-popout .item .desc, #device-popout .item .foot {
	float				:right;
}

#device-popout .handset-colours {
	display				:none;
}

#device-popout .watch, #device-popout .item h3 span.smartphone, #device-popout .item h3 .bb {
	display				:none;
}

#device-popout .item h3 span {
	display				:inline;
	clear				:none;
}

#device-popout .item {
	padding-top			:35px;
}

#device-popout .item ul li {
	margin-bottom		:5px;
}

#device-popout .item h3 {
	position			:absolute;
	top					:20px;
	left				:20px;
}

#device-popout .item .desc {
	min-height			:0;
	width				:250px;
}

* html #device-popout h3 .sIFR-flash {
	display				:none;
}

* html #device-popout h3 .sIFR-alternate {
	display				:block;
	height:auto;
}

* html #device-popout .desc {
	height				:140px;
}

#device-popout .item .desc ul {
	margin-top			:15px;
}

#device-popout .item h3 {
	width				:250px;
}

#device-popout .item .desc dl, #device-popout .item .desc ul, #device-popout .item .foot {
	width				:170px;
}

#device-popout .item .foot {
	width				:100%;
}

#device-popout .item .foot .column-2 {
	width				:170px;
	float				:right;
}

#device-popout .item .foot {
	margin-top			:-25px;
}

#device-popout .item h3 span {
	font-size			:13px;
}

#device-popout .item .desc img {
	top					:40px;
	left				:10px;
}

.span-2 .row {
	width				:659px;
}

.span-2 .row .item {
	width				:300px;
}

.span-2 .row .item .desc h3, .span-2 .row .item .desc dl, .span-2 .row .item .desc ul {
	width				:165px;
}

.info {
	border				:1px solid #666;
	background			:#ccc;
	padding				:10px;
	clear				:both;
}

.family {
	float				:left;
	clear				:both;
}

.family h2 {
	font-size			:22px;
	margin				:10px 0;
	clear				:both;
	font-weight			:normal;
}

.family .item h3 .bb, .family .item h3 .smartphone {
	font-size			:10px;
}

.family .item h3 .model {
	font-size			:15px;
	line-height			:20px;
}

.family .main .foot ul {
	padding-bottom		:0px;
}

.family .row .item .desc {
	float				:right;
	min-height			:175px;
	width				:auto;
	float				:left;
	padding-bottom		:10px;
}

* html .family .row .item .desc {
	height				:140px;
}

.family .item .desc h3, .family .item .desc dl, .family .item .desc ul {
	width				:160px;
}

.family .row .item .foot {
	width				:auto;
	margin-top			:5px;
	float				:none;
}

.family .row {
	padding-bottom		:0;
}

.family .row .item {
	margin-right		:10px;
}

.family .row .item ul li {
	margin-bottom		:10px;
	background			:url("images/arrow-gray.gif") no-repeat scroll 0 0.5em transparent;
	list-style-type		:none;
	margin				:2px 0 10px 0;
	padding				:0 0 0 10px;
}

.family .row h3 {
	font-weight			:normal;
}

.family .row {
	background-position	:50% 100%;
	background-repeat	:no-repeat;
}

.js .family {
	border				:none;
	margin				:0;
	padding				:0;
	border				:1px solid #CBCBCB;
	border-top			:none;
	padding				:10px;
	position			:absolute;
	top					:158px;
	background			:#fff;
	left				:34px;
	-moz-box-shadow		:3px 3px 4px #333;
	-webkit-box-shadow	:3px 3px 4px #333;
	box-shadow			:3px 3px 4px #333;
	/* For IE 8 */
	-ms-filter			:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
	/* For IE 5.5 - 7 */
	filter				:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
}

.js .family .row {
	width				:auto;
	margin				:0;
	padding-top			:15px;
	position			:relative;
}

* html .js .family .row-1 {
	width				:280px;
}

* html .js .family .row-2 {
	width				:540px;
}

* html .js .family .row-3 {
	width				:790px;
}

.js .family h2 {
	display				:none;
}










.ajaxResults {
	background:url("images/ajax-loader.gif") no-repeat 50% 50%;
	min-height: 60px;
	display:none;
	overflow:hidden;
}
.loading { display:block; }
.done {  display:block; background:none; }