/*
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; }
ul, ol {list-style-type:none}
body {background: url('../images/bg-repeat.jpg') repeat-x;padding: 100px 0 0; font: normal 12px Arial,sans-serif; color: #303537;}
p {line-height: 1.9em;padding: 0 0 25px 0;}
*/
/* LINKS ---------------------------------------------------------------------------------------------------------- */
a {color: #0064a4;text-decoration: underline;}
a:link {color: #0064a4;}
a:focus {color: #0064a4; outline: 0}
a:visited {color: #0064a4}
a:hover {color: #000;text-decoration: none;}
/*a.more {padding-right: 12px; background: url('../images/arrow.gif') no-repeat 100% 55%;}
a.button {background: url('../images/button-start.gif') no-repeat;display: inline-block;text-decoration: none;color: #fff;font-weight: bold;}
a.button span {display: inline-block;height: 33px;line-height: 33px;padding: 0 20px;color: #fff;font-weight: bold;background: url('../images/button-end.gif') no-repeat 100% 0}
*/

/* H1 - H5 -------------------------------------------------------------------------------------------------------- 
h1, h2, h3, h4, h5, h6 { margin:15px 0 15px 0; }
h1 { font-size: 2.4em;font-weight: normal;margin: 5px 0 10px 0; color: #303537;}
h3 { font-size:1.2em;text-transform: uppercase;margin: 10px 0 15px;color: #303436;padding: 0 0 5px;}
h4 { font-size:1.0em; color: #005e7c }
h5 { font-size:1*//* LAYOUT --------------------------------------------------------------------------------------------------------- */


/* LAYOUT --------------------------------------------------------------------------------------------------------- */
.wrap {width: 875px;margin: 0 auto;position: relative;}
    /* HEADER ----------------------------------------------------------------------------------------------------- */
    #header {background: url('../images/bg-header.jpg') no-repeat 0 50%;height: 99px;width: 100%;position: absolute;top: 0;left: 0}
        /* logo */
        a#logo {font-size: 2.5em;color: #fff;font-style: italic;padding: 0 10px;position: relative;top: 30px;text-decoration: none}

        /* navigation */
        ul#nav {position: relative;top: 30px;float: right;}
            ul#nav li {float:left;}
                ul#nav li a { padding: 0 15px;height: 32px; line-height: 32px;display: block;text-decoration: none;float: left;font-weight: bold;color: #fff; }

    #intro {background: url('../images/bg-intro.jpg') repeat-x bottom; padding: 30px 0;width: 100%}
    #intro .floatRight {width: 545px}
    #intro .photo {background: url('../images/macbook.jpg') no-repeat;width: 294px;height: 165px;float: left}
    #intro .photo img {position: absolute;top: 11px;left:46px}
    #intro p {padding-bottom: 20px;}
    
    /* COLS ----------------------------------------------------------------------------------------------------------- */
    ul.cols {margin: 5px 0 35px;background: url('../images/colsbg.png') repeat-y 50% 0;}
        ul.cols li {float: left; width: 240px;padding: 5px 0; list-style: none;}
            ul.cols li.center {margin: 0 70px;text-align: left;}
                ul.cols li p {padding: 0 0 10px 0;color:black}
                /*ul.cols li h2 {margin-bottom: 10px;text-transform: uppercase;font-size: 1.2em;font-weight: bold;color: #0064a4;background: url('../images/arrow-down.png') no-repeat 0 50%;padding: 0 0 0 25px}*/
				ul.cols li h2.mobile{font-weight: bold;color: #0064a4;background: url('../images/mobile.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}
				ul.cols li h2.mouse{font-weight: bold;color: #0064a4;background: url('../images/mouse.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}
				ul.cols li h2.data{font-weight: bold;color: #0064a4;background: url('../images/data.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}
				ul.cols li h2.global{font-weight: bold;color: #0064a4;background: url('../images/global.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}

    .title {color: #ffffff; display: block;background: url('../images/dot.gif') repeat-x 0 50%;padding: 5px 0px 5px 10px;margin:0px 0 0px}
    .title span {padding: 0 10px;background: #0064a4}
    

        ul.card li {float: left; width: 220px;padding: 5px 0; list-style: none; }
            ul.card li.center {margin: 0 70px;text-align: left;}

		h2.contact{font-weight: normal; background: url('../images/contact.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}
		h2.email{font-weight: normal; background: url('../images/email.png') no-repeat 0 50%; padding: 2px 0 0 20px; margin-bottom: 10px;}

#centerdiv {clear: both; padding: 10px 0 15px 0;margin:auto; margin-top: 15px; text-align:center;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
.clearfix {display: inline-block;}
/* hidden for ie mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

@media only screen and (min-width: 767px) and (max-width: 880px) 
{
    ul.cols {margin: 0; background: white;}
	ul.cols li {list-style: none; padding: 5px 0px; width: 100%; float: left; margin:10px;}
	ul.cols li.center {	list-style: none; padding: 5px 0px; width: 100%; float: left; margin:10px;}
	.wrap {	margin: 0px auto; width: 90%; position: relative;}

}
@media screen and (max-width:767px)
{
    ul.cols {margin: 0; background: white;}
	ul.cols li {list-style: none; padding: 5px 0px; width: 100%; float: left; margin:10px;}
	ul.cols li.center {	list-style: none; padding: 5px 0px; width: 100%; float: left; margin:10px;}
	.wrap {	margin: 0px auto; width: 90%; position: relative;}
}