/**************************************************************
   Visit studio7designs.com for more layouts and downloads for this template!
 **************************************************************/

/**************************************************************
   All page content except for footer
 **************************************************************/

#content
{
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin-top: 0px;
}

#content2
{
    position: relative;
    height: 100%;
    min-height: 100%;
    margin-top: 0px;
}

/**************************************************************
   Top menu and logo
 **************************************************************/

#header
{
    clear: both;
    position: relative;
    height: 66px;
    margin: 0 auto;
    background: url(images/bg/banner.jpg) #000 no-repeat 0 0; /*border-bottom: 2px solid #48525B;*/
}


#header img.header
{
    position: absolute;
    top: 0px;
    left: 10px;
    margin-top: 0px;
}

#header a.home
{
    float: right;
    color: #c38f8f;
    font-weight: bold;
    margin-top: 5px;
    width:70px;
    border: solid 1px transparent;
}


#header a.home:hover
{
    color: #ddd;
    border: dotted 1px  #b38383;
}

#header ul
{
    margin-top: 10px;
    padding: 0;
    float: right;
}

#header ul li
{
    display: inline;
    list-style: none;
}

#header ul li a
{
    float: left;
    padding: 0 1em;
    font: 400 1.1em arial, sans-serif; /*letter-spacing: 0.1em;   line-height: 0.8em !important;   line-height: 1em; 	*/
    color: #cccccc;
    border-right: 1px solid #c38f8f;
}

#header ul li a.last
{
    padding-right: 0;
    border-right: 0;
}

#header ul li a:hover
{
    color: #c38f8f;
}



/**************************************************************
   Header Image/Flash Movie
 **************************************************************/

#headerImg
{
    margin: 0; /*height: 143px;*/
    padding: 0;
    background: #000;
}


/**************************************************************
   Top Block Menu
 **************************************************************/

#menu
{
    margin: 0 auto;
}

#menu ul
{
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #000;
    height: 35px;
    background-image: url(images/bg/navbar.jpg); /*  background: #000 url(images/bg/menu.gif) repeat-x top left; */
}

#menu ul li
{
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li a
{
    float: left;
    height: 20px;
    font: 400 1.0em arial, sans-serif;
    letter-spacing: 0.1em;
    font-weight: bolder;
    color: #FFF;
    text-align: center;
    background-color: #cccccc;
    background-image: url(images/bg/navbar.jpg);
    vertical-align: middle;
    padding-top: 4px;
    border-left: 1px solid #9a4851;
    border-top: 1px solid #9a4851;
    border-right: 1px solid #760b18;
    height: 20px; /*border-bottom: 15px solid #fff;*/
}
/*
#menu ul li a {
  width: 25%;
}

*/

#menu ul li a span
{
    display: block;
    padding: 1px 7px;
}


#menu ul li a span.desc
{
    font-size: 0.8em;
    color: #a0a0a0;
    font-weight: normal !important;
}


#menu ul li a:hover
{
    border-left: 1px solid #000;
    border-top: 1px solid #2F2F2F;
    border-right: 1px solid #000; /*background: #2F2F2F;*/
}

#menu ul li a.here
{
    border-left: 1px solid #2F2F2F;
    border-top: 1px solid #000;
    border-right: 1px solid #2F2F2F;
    background: #2F2F2F;
}

#menu ul li a:hover span.desc
{
    color: #FFF;
}

#menu ul li a.here span.desc
{
    color: Maroon;
}


/**************************************************************
   Page Content
 **************************************************************/

#page
{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    height: 100%;
    padding-bottom: 6em;
    text-align: left;
    vertical-align: top;
    margin-top: 0px;
    min-height: 100%;
}

#fullPage
{
    width: 746px;
    clear:both;
    margin: 0 auto;
    height: 100%;
    margin-bottom:5px;
}


#columns
{
    margin: 0 auto;
    height: 100%;
}


/* Column widths */
.width
{
    width: 774px;
    margin-top: 0px !important;
}

.widthPad
{
    width: 746px;
}

.width25
{
    width: 24%;
}

.width75
{
    width: 75%;
}

.width100
{
    width: 100%;
}


/**************************************************************
   Footer
 **************************************************************/


#footer
{
    clear: both;
    float: left;
    width: 100%;
    height: 4em;
    margin: -4em auto 0 auto;
}


* html #footer
{
    margin-top: -4em;
}

#footer #bg
{
    position: relative;
    height: 4em;
    margin: 0 auto;
    background: url(images/bg/footer.jpg) #000 no-repeat 0px 0px;
}

#footer #bg ul
{
    float: right;
    margin: 2.5em 1em 0 0 !important;
    margin: 2.5em 0.5em 0 0;
    padding: 0;
}

#footer #bg ul li
{
    display: inline;
    list-style: none;
}

#footer #bg ul li a
{
    float: left;
    padding: 0 1em;
    font: 400 1em verdana, arial, sans-serif;
    letter-spacing: 0.1em;
    color: #ccc;
    border-right: 1px solid #4D5760;
    margin-top: -1px;
}

#footer #bg ul li a.last
{
    padding-right: 0;
    border-right: 0;
}

#footer #bg ul li a:hover
{
    color: #F26A92;
}

#footer #bg img
{
    position: absolute;
    top: 6%;
    left: 10px;
}



/**************************************************************
   Icons specific to the colour theme
 **************************************************************/

a.lightTheme img, a.darkTheme img, a.submitButton img
{
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

a.lightTheme img
{
    background: url(images/icons/light_light_theme.gif) no-repeat center center;
}

a.darkTheme img
{
    background: url(images/icons/light_dark_theme.gif) no-repeat center center;
}

a.submitButton img
{
    background: url(images/icons/light_submit.gif) no-repeat center center;
}


/**************************************************************
   Posts
 **************************************************************/

.post
{
    float: left;
    width: 100% !important;
    width: 99%;
    position: relative;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #CCCCCC;
}

.post .date
{
    position: absolute;
    top: 0;
    left: 5px;
    width: 2.3em;
    text-align: right;
}

.post .date .month
{
    text-transform: uppercase;
    font: 700 1.0em arial, sans-serif;
    color: #888;
}

.post .date .day
{
    display: block;
    margin-top: -5px;
    font: 700 2.1em verdana, arial, sans-serif;
    color: #888;
}

.post .title
{
    display: block;
    padding: 0 0 5px 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #586B7A;
}

.post p
{
    margin: 0 0 0 3.5em;
    padding: 0 0 1em 1.2em;
    border-left: 1px solid #CCCCCC;
}



/**************************************************************
   Thumbnail Lists
 **************************************************************/

ul.thumbs, ul.thumbs li
{
    margin: 0;
    padding: 0;
}

ul.thumbs li
{
    margin: 0 0 15px 0 !important;
    margin: 0;
    padding: 0px;
    list-style: none;
}

a.thumb img
{
    border: 5px solid #ccc;
}

a:hover.thumb img
{
    background: #8EB4C6;
    border: 5px solid #000;
}

a:hover.thumb
{
    background: none;
}

a.thumb span
{
    display: block;
    margin-top: -5px !important;
    margin-top: -2px;
}



/**************************************************************
   Submenu Styles
 **************************************************************/

ul.submenu
{
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
	margin-left: 0;
	padding-left: 20px;
	text-indent: -10px;
}

ul.submenu li
{
    margin: 0;
    padding: 0;
    list-style-image: url(foo.gif);
    width: 90%; 
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;
}

ul.submenu li:before {
	content: "\00BB \0020";
	}

ul.submenu li a
{
    color: Maroon; /* Start hide from IE Mac \*/
    height: 1%; /* End hide from IE Mac */
    padding: 5px 5px 5px 10px;
    font-family: Verdana;
    font-size: 1.2em;
}

ul.submenu li a.here
{
    background: #ececec url(images/disconnect.gif) no-repeat 45px 50%;
    height: 30px;
    border-right: solid 1px #dcdcdc;
    border-bottom: solid 1px #dcdcdc;
}

ul.submenu li:hover, ul.submenu li.here
{
    color: #333333;
    background-color:#efefef;
    border-right: solid 1px #dcdcdc;
    border-bottom: solid 1px #dcdcdc;
}


/**************************************************************
   Generic Display 
 **************************************************************/


.block
{
    display: block;
}

.clear
{
    clear: both;
}

.marginRight
{
    margin-right: 15px;
}

.paddingLeft
{
    padding-left: 5px;
}

.paddingRight
{
    padding-right: 5px;
}

.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}

.alignLeft
{
    text-align: left;
}

.alignRight
{
    text-align: right;
}

.alignTop
{
    vertical-align: top;
}

.alignMiddle
{
    vertical-align: middle;
}

.alignBottom
{
    vertical-align: bottom;
}

.lightBlueBg
{
    background-color: #E9EAEB;
}

.dark
{
    color: #353E47;
}

/********************************
    Phone List 
*********************************/

div.manufacturorList
{
    height: 120px;
}

ul.manufacturorList
{
    font-size: 12px;
    font-weight: bold;
    color: #9eb2c1;
    list-style-type: none;
    display: block;
}

ul.manufacturorList li.item
{
    padding: 3px 3px 3px 3px;
    float: left;
    width: 200px;
}

ul.manufacturorList li.altItem
{
    padding: 3px 3px 3px 3px;
    float: left;
    margin-right: 100px;
}

ul.manufacturorList li img
{
    border: 0px;
}

/**************************************/
/*     Photo Gallery Mosaic           */
/**************************************/ 

.photoList
{
    list-style-type: none;
    padding: 0 0 0 0;
    margin: 0;
}
.photoList li
{
    float: left;
    display: inline;
    margin: 0px 0px 0px 10px;
    padding: 0px;
    width: 160px;
    font-size: 0.8em;
    height: 160px !important;
}

.photoList table
{
	height:150px;
	width:160px;
	vertical-align:bottom;
	border:dotted 1px #e0e0e0;
}

.photoList table tr td
{
	/*vertical-align:bottom;*/
}

.photoList table.selected
{
	background-color:#e0e0e0;
	border: 1px solid #d0d0d0;
}

.photoList table:hover
{
     border: 1px solid #d0d0d0;
}

.photoList li p
{
    margin: 3px 0px 3px 0px;
    color: #999;
    text-align: center;
}

.photoList li img
{
    border: 0px;
    padding: 0px;
}

h1.photoListHeader
{
    text-align: left;
    clear: both; /*padding-top: 20px;*/
}

h1.photoListHeader a
{
    float: right;
    padding: 0px 5px 0px 0px;
    text-align: right;
    font-weight: normal;
    font-size: 8px;
    letter-spacing: 1px;
    vertical-align: text-bottom;
}

/***************************************/

.phoneList
{
    list-style-type: none;
    padding: 0 0 0 0;
    margin: 0;
}
.phoneList li
{
    float: left;
    display: inline;
    margin: 0 5px 5px 0;
    padding: 5px;
    width: 120px;
    font-size: 0.8em;
    height: 175px !important;
}

.phoneList li:hover
{
    /* border: 1px solid #63aade;*/
}

.phoneList li p
{
    margin: 3px 0px 3px 0px;
    color: #999;
    text-align: center;
}

.phoneList li img
{
    border: 0px;
    padding: 0px;
}

h1.phoneListHeader
{
    text-align: left;
    clear: both; /*padding-top: 20px;*/
}

h1.phoneListHeader a
{
    float: right;
    padding: 0px 5px 0px 0px;
    text-align: right;
    font-weight: normal;
    font-size: 8px;
    letter-spacing: 1px;
    vertical-align: text-bottom;
}

/****************************
        NEWS
****************************/

ul.newsSection
{
    margin: 0px;
    padding: 0px;
    margin-bottom:20px;
}

ul.newsSection li
{
    list-style: none;
    list-style-image: none;
    list-style-type: none; /*border: solid 1px red;*/
}

ul.newsSection h2
{
    padding-top: 5px;
    padding-bottom: 2px;
    border-bottom: solid 2px #eee;
    font-weight: normal;
    font-size: 14px;
}

ul.news
{
    margin: 0px;
    padding: 0px;
    margin-bottom:15px;
}

ul.news li,
ul.news li.hyperlink
{
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    padding-left: 10px;
    border-left: solid 4px #fff;
}

ul.news li:hover
{
    border-left: solid 4px maroon;
    background: #f6f6f6 url(images/pdf.gif) no-repeat 99% center;
}

ul.news li.hyperlink:hover
{
    border-left: solid 4px maroon;
    background: #f6f6f6 url(images/hyperlink.gif) no-repeat 99% center;
}

ul.news li a
{
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    border-bottom: dotted 1px #ccc;
    padding-right: 24px;
}

ul.news li a span.title
{
    color: #333;
}

ul.news li a span.source
{
    color: #666;
    font-style: italic;
}

ul.news li a:hover, ul.news li a:hover span.title
{
    color: Maroon;
}


div.displaybox
{
    background-image: url(images/pgbg.jpg);
    background-repeat: repeat-x;
    border: solid 1px #dcdcdc;
    padding: 20px;
}

/* Phone List END */


ul.categoryList
{
    margin: 0 0 20px 0;
    padding: 0;
}

ul.categoryList li
{
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: url(foo.gif); /* because IE is balls */
    display: block;
    height: 20 !important; /* Start hide from IE Mac \*/
    height: 1%; /* End hide from IE Mac */
    padding: 3px 5px 3px 35px;
}

.menuHeadline
{
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    padding-top: 10px;
    vertical-align: top;
    padding-left: 45px;
    line-height: 1.2em;
    font-size: 1.6em;
}

div.tip
{
    background: #ececec url(images/tip.gif) no-repeat 25px 50%;
    padding: 5px 5px 5px 75px;
    font-family: Verdana, helvetica, Sans-Serif;
    font-size: 1em;
    border: solid 1px #ccc;
    min-height: 30px;
    margin-top: 15px;
    margin-bottom: 5px;
}


/********************************
    Address List 
*********************************/

ul.addressList, ul.telephoneList
{
    margin: 0;
    padding: 0;
}

ul.addressList li, ul.telephoneList li
{
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: url(foo.gif); /* because IE is balls */
    display: block; /* Start hide from IE Mac \*/
    height: 1%; /* End hide from IE Mac */
    padding: 3px 5px 3px 0px;
    margin-bottom: 15px;
}

ul.addressList div.address
{
    margin-left: 25px;
    display: block;
    width: 210px;
    border-left: solid 1px #ccc;
    padding-left: 5px;
    padding-bottom: 5px;
}

ul.addressList img
{
    float: left;
    padding-top: 4px;
    padding-left: 3px;
    vertical-align: bottom;
}

ul.telephoneList div.telephone
{
    width: 190px;
    padding-left: 10px;
    padding-bottom: 5px;
    overflow: hidden;
}

ul.telephoneList div.images
{
    float: left;
    padding-top: 3px;
    width: 40px;
    vertical-align: bottom;
    text-align: right;
    overflow: hidden;
}

/********************************
    Device action pages
*********************************/

#DeviceDataContainer
{
    /*border: solid 1px red;*/
    height: 155px;
    margin-top: 20px;
}

#DeviceStatusContainer
{
    border-right: dotted 1px #ccc;
    padding-right: 10px;
    width: 100px;
    text-align: center;
    float: left;
    margin-right: 10px;
}

#DeviceActionContainer
{
    display: block;
    width: 370px;
    float: left;
    padding-left: 5px;
}

#DeviceStatusContainer img.StatusIcon
{
    margin-top: 5px;
    margin-bottom: 10px;
}

#DeviceStatusContainer span.StatusText
{
    display: block;
}

#DeviceStatusContainer span.StatusRed
{
    color: Red;
    font-weight: bold;
}

#DeviceStatusContainer span.StatusAmber
{
    color: #ff6600;
    font-weight: bold;
}

#DeviceStatusContainer span.StatusGreen
{
    color: Green;
    font-weight: bold;
}

#DeviceStatusContainer div.Working
{
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    margin-top: 6px;
    text-align: left;
}

#DeviceStatusContainer div.Working img.Working
{
    float: left;
    padding-top: 2px;
}

#DeviceStatusContainer div.Working span.Working
{
    color: Maroon;
    padding-left: 5px;
}

/*********************************
    Lock page specific CSS
*********************************/

#DeviceActionContainer span.characterCount
{
    font-size: 9px;
    vertical-align: middle;
    margin-right: 10px;
}

#DeviceActionContainer textarea
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
    width: 360px;
    overflow: hidden;
    display: block;
    color: #333;
    font-weight: bolder;
    font-size: 12px;
    text-align: center;
    border: solid 1px #ccc;
    background-color: #f3f3f3;
}

#DeviceActionContainer textarea.editable
{
    border: inset 1px #ccc;
    background-color: #fff;
}

#DeviceActionContainer ul.lock
{
    /* border: solid 1px green;*/
    margin: 0px;
    padding: 0px;
    width: 100%;
    margin-top: 15px;
}

#DeviceActionContainer ul.lock li
{
    display: inline;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#DeviceActionContainer ul.lock li input
{
    width: 31%;
}

#DeviceActionContainer ul.lock li.last
{
    padding-right: 0px !important;
}


/*********************************
    Track page specific CSS
*********************************/

#DeviceActionContainer.track
{
    text-align: center;
}

#DeviceActionContainer span.track
{
    display: block;
    margin: 5px 40px 5px 40px;
    padding: 3px 6px 3px 6px;
    border: dotted 1px #ccc;
    background-color: #efefef;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

#TrackHelpContainer
{
    margin-top: 20px;
    display: block;
    width: 370px;
    float: left;
    margin-left: 10px; /* border:solid 1px red; */
    min-height: 30px;
}

#TrackHelpContainer a
{
    font-weight: bold;
}

#TrackHelpContainer input
{
    margin: 5px;
}

#TrackHelpContainer div.AlarmGreen, div.AlarmAmber, div.AlarmRed
{
    font-family: Verdana, helvetica, Sans-Serif;
    font-size: 1em !important;
    font-size: 12px;
    padding: 7px 5px 7px 50px;
    vertical-align: middle;
    background: url(images/icon_alarm.gif) #fff no-repeat 10px 50%;
    text-align: center;
}

#TrackHelpContainer div.AlarmGreen
{
    border: solid 2px Green;
    color: Green;
}

#TrackHelpContainer div.AlarmAmber
{
    border: solid 2px Orange;
    color: sienna;
}

#TrackHelpContainer div.AlarmRed
{
    border: solid 2px Red;
    color: Red;
}


/*********************************
    SMS Conversation
*********************************/

div.ConversationContainer
{
    background: url(images/pgbg.jpg) #fff repeat-x 0% top;
    border: solid 1px #ccc;
    padding: 10px;
}

div.CoversationName
{
    margin: 0px;
    padding: 0px;
    display: block;
    border-bottom: solid 2px #ddd;
    padding-bottom: 5px;
    margin-bottom: 15px;
    height: 20px;
}

div.CoversationName span
{
    font-size: 15px;
    color: #555;
    float: left;
    margin-right: 5px;
}

div.CoversationName a.name
{
    color: maroon;
    font-size: 15px;
    width: 300px;
    float: left;
    display: block;
    overflow: hidden; /*font-weight:bold;*/
}

div.CoversationName a.close
{
    color: maroon;
    font-size: 18px;
    font-weight: bold;
    padding-left: 2px;
    padding-right: 2px;
    float: right;
}

/*********************************
    Contact Display
*********************************/

div.ContactContainer
{
    /*border: solid 1px red;*/
    width: 100%;
    overflow: hidden;
    display: block;
    padding: 3px;
    font-family: Verdana, Arial, Sans-Serif !important;
}

div.ContactContainer div.LeftContainer
{
    float: left; /*border: solid 1px aqua;*/
    width: 180px;
    text-align: left;
}

div.ContactContainer div.LeftContainer a.Name
{
    /*border: solid 1px green;*/
    display: block;
    overflow: hidden;
    color: #3B5D77 !important;
    font-family: Verdana, Arial, Sans-Serif !important;
}

div.ContactContainer div.LeftContainer a.Name:hover
{
    /*border: solid 1px green;*/
    color: #333 !important;
}

div.ContactContainer div.LeftContainer span.Email
{
    /*border: solid 1px orange;*/
    display: block;
    overflow: hidden;
    color: #666;
    padding-top: 4px;
}

div.ContactContainer div.MiddleContainer
{
    float: left; /*border: solid 1px brown;*/
    width: 120px;
    text-align: center;
    overflow: hidden;
}

div.ContactContainer div.MiddleContainer a.Conversation
{
    /*border: solid 1px red;*/
    overflow: hidden;
    margin-left: 2px;
    color: maroon !important;
    font-family: Verdana, Arial, Sans-Serif !important;
}

div.ContactContainer div.RightContainer
{
    float: right; /*border: solid 1px yellow;*/
    width: 150px;
    text-align: right;
    overflow: hidden;
    padding-right: 5px;
}

div.ContactContainer div.RightContainer span.Number
{
    /*border: solid 1px red;*/
    display: block;
    overflow: hidden;
}

/*********************************
    Videos Display
*********************************/

div.VideoContainer
{
    /*border: solid 1px red;*/
    width: 100%;
    overflow: hidden;
    display: block;
    padding: 3px;
    font-family: Verdana, Arial, Sans-Serif !important;
}

div.VideoContainer div.LeftContainer
{
    float: left; /*border: solid 1px aqua;*/
    width:120px;
    height:90px;
    text-align: center;
}

div.VideoContainer div.LeftContainer img
{
    border: solid 2px #ccc;
    padding: 2px;
    display:block;
}

div.VideoContainer div.RightContainer
{
    overflow: hidden;
    text-align:left;
    margin-left:160px;
}

div.VideoContainer div.RightContainer a.Download
{
    display: block;
    overflow: hidden;
    color: #3B5D77 !important;
    font-family: Verdana, Arial, Sans-Serif !important;
    font-size: 13px;
    margin-top: 3px;
    margin-bottom:3px;
}
div.VideoContainer div.RightContainer a.Download:hover
{
    color: #333 !important;
}

div.VideoContainer div.RightContainer span.Caption
{
    width: 100px;
    color: #999;
}

div.VideoContainer div.RightContainer span.Info
{
    padding-left: 5px;
    margin-bottom: 2px;
}