/*-----------------------------*/
/* GENERAL                     */
/*-----------------------------*/
a { color: #08c; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }

img {border:none;}

h1 { font-size: 1.4em; line-height: 36px; margin-top:50px; margin-bottom:0px; text-align:center;  clear:both; }
h2 { font-size: 1.3em; line-height: 34px; margin-top:50px; margin-bottom:0px; text-align:left;  clear:both; }
h3 { font-size: 1.0em; line-height: 34px; margin-top:50px; margin-bottom:0px; text-align:left;  clear:both; }

p {margin-left:60px; margin-right:60px;  margin-top:5px;}


/*-----------------------------*/
/* BACKGROUND                  */
/*-----------------------------*/
html {background-color:transparent;}

body
{
    margin:0px;
    padding:0px;
    
	font-size: 16px;
    font-family: "Helvetica Neue","Myriad Pro", Arial,sans-serif;
	text-align: center;

    background: #e7e7e7; /* for non-css3 browsers */
    background-attachment: fixed !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#e7e7e7'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e7e7e7)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #f3f3f3,  #e7e7e7); /* for firefox 3.6+ */
    background-origin: content-box;
    background-size: 100%
}

.wrapper
{
	width: 960px;
	margin: 10px auto;
    background-color: #ffffff;
	text-align: justify;
	color: #000000;
}

.raised_page
{
    box-shadow: 0px 4px 3px 2px #888888;
}

.top_banner
{
	width: 960px;
	height: 77px;
    background-image: url(Images/TopBarBackground.png);
}

.top_banner_logo
{
    float:left;
    padding-left: 20px;
    padding-top: 16px;
}

.social_media_icon
{
    float:right;
    padding-top: 12px;
    padding-right: 10px;
    padding-left: 0px;
}

.magazine_clipping
{
    box-shadow: 0px 4px 3px 2px #888888;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eeeeee
}

/*-----------------------------*/
/* MENU                        */
/*-----------------------------*/
.main_menu
{
	height: 40px;
	padding-left: 25px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #333333;
    box-shadow: 0px 10px 10px 2px #888888;

    background: grey; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='grey', endColorstr='white'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(grey), to(white)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  grey,  white); /* for firefox 3.6+ */
}

ul.menu
{
	list-style-type: none;
	margin: 0px;
    padding-left:40px;
}

li.menu
{
    display: inline;
}

a.main_menu_items
{
	float: left;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 1.5em;
	padding: 5px;
	outline: 0;
	margin-right: 40px;
}

a.left_menu_item
{
	padding-left: 0px;
	border-left: 0px solid #000000;
}

a.other_menu_item
{
	padding-left: 60px;
	border-left: 1px solid #000000;

}

a.main_menu_items:hover {color: #27577f;}

main_menu:after
{
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                 box-shadow: 0px 0px 10px rgba(0,0,0,.8);

    z-index: 100;
}

/*-----------------------------*/
/* PAGE                        */
/*-----------------------------*/
.page_content
{
	background-color: transparent;
	width: 900px;
	padding-right: 30px;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 30px;
    font-size: 1.2em;
}

img.center {   display: block;   margin-left: auto;   margin-right: auto; }
img.floatRight {float: right;  margin-left:20px;  margin-right:0px;}
img.floatLeft {float: left; margin-left:0px;  margin-right:20px;}

.heading_image_montage {margin-bottom:10px;}

.screenshot
{
    border:1px solid #000000;
    margin-bottom:5px;
    box-shadow: 4px 4px 4px 2px #888888;
}

.banner
{
    padding:0px;
    margin-bottom:20px;
    margin-left: auto;   margin-right: auto;
    box-shadow: 4px 4px 4px 2px #888888;
    border:1px solid #000000;
}

.gradient
{
    background: linear-gradient(to bottom, blue, white);
}

.downloadInAppStoreBadge {margin:10px;}


/*-----------------------------*/
/* VIDEO                       */
/*-----------------------------*/
.video
{
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 4px 4px 4px 2px #888888;
}

.width640
{
    width:640px;
	margin-left: 125px;
}

.width480
{
    width:480px;
	margin-left: 200px;
}

.width500
{
    width:500px;
	margin-left: 200px;
}

.width560
{
    width:560px;
	margin-left: 180px;
}



/*-----------------------------*/
/* TWO COLUMNS                 */
/*-----------------------------*/
.two_columns{ width:100%; margin-bottom:50px;}
.left {float:left; margin-left:40px; margin-right:0px;}
.right {float:right; margin-left:0px; margin-right:20px;}
.text_column{ width:54%;  }
.screenshot_column{ width:35%; text-align:center; padding-top:10px;}

.half_column_left { width:50%; padding-top:10px; float:left; margin-left:0px; margin-right:0px;}
.half_column_right { width:50%; padding-top:10px;float:right; margin-left:0px; margin-right:0px;}



/*-----------------------------*/
/* PHPBB FORUM                 */
/*-----------------------------*/
#phpbb {padding-top:0px; padding-bottom:0px;}
#phpbb p {margin 0px; }

#phpbb .page_content
{
	background-color: transparent;
	width: 960px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
    font-size: 1.0em;
}

#phpbb #site-description {font-size:24px; margin:10px;}
#phpbb #search-box {margin-top:0px;}
#phpbb .wrap {padding-right: 5px; padding-left: 5px;}
#phpbb .postbody .content {font-size: 1.0em;}
#phpbb .postprofile {display:none;}
#phpbb .postbody {width:100%;}
#phpbb .copyright {font-size:0.7em;}
#phpbb .error {margin-left:0px;}
/* ----------------------------------------------------------------------------------*/
/* OTHER... */


.box_to_right
{
	width:40%;
	height:250px;
	margin:auto 40px;
    margin-top:100px;
    float: right;
    padding:10px;
}


/*------------- BOX */
.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:80%;
	height:250px;
	margin:40px auto;
}

.padding {padding:40px;}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}