/*      BEGIN CODE         */

body {background-color: #BFEBFF; font-family:Arial, Helvetica, sans-serif; }

a{color:#316AC5;}
h5{color:#7c878c; font-family:verdana; font-size:1em; font-weight:normal; line-height:14px; margin:0 0 14px;}
pre, code{font-size:1.2em;}

.height-1{height:28px;}

h2.subTitle{background-color:#222; color:white; font:1.0em/13px georgia; height:14px; letter-spacing:0.2em; line-height:13px; margin:14px 14px 28px; text-align:center;}

.caption{}
.caption h3{font-family:arial; font-size:1.4em; line-height:14px; margin:0 0 10px;}
.caption p{font-family:arial; font-size:1.1em; line-height:1.699em; margin-bottom:0px;}

#wrapper{ background:#e1f6ff url(../images/sg_grid_sub.png) center top repeat; *background:#e1f6ff; position:relative; padding-top:28px; *padding-top:0px; margin:0 auto; z-index:50;}
#container{}

#logo{position:relative; text-align:right; background-color:#222222; color:#e1f6ff; height:308px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#logo h1{font-family:georgia; font-size:3.6em; letter-spacing:-0.06em; line-height:38px; padding:27px 27px 0 0; text-transform:uppercase;}
#logo em{position:absolute; right:27px; bottom:21px;}

#intro{padding-left:1px; }
#intro p{background-color:#E1F6FF; display:inline; font-family:georgia; font-size:2.0em; letter-spacing:-0.01em; line-height:28px;}
#intro .share{margin:32px 0 0 0; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;}
#intro .share:hover{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1;}

#influads_block{float:right;}
#influads_block a.influads_link_img{display:block;}
#influads_block a.influads_link_img img{width:140px; -ms-interpolation-mode: bicubic;}
#influads_block .influads_text{padding-top:4px;}
#influads_block .influads_text a{line-height:1.38em; text-decoration:none;}
#influads_block .influads_text a{text-decoration:underline;}
#influads_block .influads_powered_div{position:absolute; top:5px;}
#influads_block .influads_powered_div a{color:#7C878C;}

#controler{float:right;}
#controler h5{float:left; line-height:28px; margin-bottom: 0;}
#controler ul{border-color:#222; border-style:solid; border-width:1px 0px; float:right;}
#controler ul li{float:left; margin:1px;}
#controler ul li.title{line-height:23px; width:28px;}
#controler ul li a{ display:block; font-family:verdana; font-size:1.4em; height:25px; line-height:24px; text-align:center; text-decoration:none; width:26px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
#controler ul li a:hover{font-weight:bold !important;}
#controler ul li.selected a{background-color:#222; color:#e1f6ff; font-weight:bold;}

#diagram{position:absolute; right:-7px; top:57px; z-index:-2;}

#download{margin-left:336px;}
#download .packbutton{}
#download .packbutton a.downloadButton{background-color:#316AC5; border:1px solid #1B51A8; color:#e1f6ff; display:block; height:138px; position:relative; text-decoration:none;  -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#download .packbutton a.downloadButton b{background-color:#316AC5; cursor:pointer; bottom:3px; display:block; font-family:impact,Charcoal,Techno,sans-serif; font-size:2.3em; letter-spacing:-0.05em; line-height:1.2em; position:absolute; right:8px; text-transform:uppercase; }
#download .packbutton a.downloadButton em{border-bottom:1px solid #e1f6ff; cursor:pointer; bottom:8px; display:block; font-size:1.8em; left:8px; line-height:1.2em; padding:0 3px; position:absolute; } 
#download .packbutton a.downloadButton:hover{color:#FFF;}
#download .packbutton a.downloadButton:hover em{border-color:#FFF;}
#download .packInfo{height:112px; padding-top:28px;}
#download .packInfo h5{}
#download .packInfo ol{width:91%; font-family:Arial, Helvetica, sans-serif; }
#download .packInfo ol li{ font-size:1.2em; line-height:14px; list-style:square inside none; margin-bottom:14px; list-style:square inside none;}

#diagramInfo{height:140px;}

#contact{height:168px;}
#contact form{margin-top:8px;}
#contact form input.name, #contact form input.email, #contact form textarea.comment, #contact form input.send{ background-color:#A3C7D7; border:medium none; color:#e1f6ff; font-size:10px; height:11px; float:left; margin:0 0 2px; padding:0 0 2px 2px; width:138px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#contact form input.name:hover, #contact form input.email:hover, #contact form textarea.comment:hover, #contact form input.name:focus, #contact form input.email:focus, #contact form textarea.comment:focus{ background-color:#7a939e;}
#contact form input.name:focus, #contact form input.email:focus, #contact form textarea.comment:focus{ font-size:1.8em; height:26px; width:278px;}
#contact form input.send{font-size:8px; background-color:#78aae2; height:13px; width:56px; letter-spacing:3px;}
#contact form input.send:hover{background-color:#316ac5; height:20px; font-size:10px; letter-spacing:1px;}
#contact form input.name{}
#contact form input.email{}
#contact form textarea.comment{font-family: Arial, Helvetica, sans-serif;}
#contact form textarea.comment:focus{font-size:13px; font-family: Arial, Helvetica, sans-serif; height:69px;}

#possibilities{margin-left:182px;}

#arrow{background:url("../images/sg_arrow.png") no-repeat scroll center top; height:140px; left:484px; position:absolute; top:589px; width:56px;}

#semantics{margin-left:168px;}
#semantics .code{background-color:#a3c7d7; height:140px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#semantics .code pre{ font-size:11px; letter-spacing:-1px; line-height:1.699em; padding:4px 0 0 5px;}
#semantics .code pre span{ color:#495958;}
#semantics .codeInfo{ margin-bottom:18px;}

#semantics .suported{}
#semantics .suported h5{ margin-bottom:-11px;}
#semantics .suported ul{}
#semantics .suported ul li{float:left;}
#semantics .suported ul li a{display:block; padding:1px 0; text-decoration:none; cursor:pointer;}
#semantics .suported ul li a b{background: url(../images/sg_sprite.png) no-repeat left top; display:block; height:28px; overflow:hidden; text-indent:-9999px; width:28px;}
#semantics .suported ul li a span{visibility:hidden; color:#222; display:block; line-height:12px; text-align:center;}
#semantics .suported ul li a:hover span{visibility:visible;}
#semantics .suported ul li a.ie b{background-position:0px 0px;}
#semantics .suported ul li a.ff b{background-position:-28px 0px;}
#semantics .suported ul li a.chrome b{background-position:-56px 0px;}
#semantics .suported ul li a.safari b{background-position:-112px 0px;}
#semantics .suported ul li a.opera b{background-position:-84px 0px;}
#semantics .suported ul li a.ie:hover b{background-position:0px -28px;}
#semantics .suported ul li a.ff:hover b{background-position:-28px -28px;}
#semantics .suported ul li a.chrome:hover b{background-position:-56px -28px;}
#semantics .suported ul li a.safari:hover b{background-position:-112px -28px;}
#semantics .suported ul li a.opera:hover b{background-position:-84px -28px;}

#structure{overflow:auto;}

#structure div b
{display:block; border:1px solid #222; height:26px; font-size:1.1em; text-align:center; background:#e1f6ff; line-height:26px; font-weight:normal;}

#structure .sg-1 b:after{content: '28px';}
#structure .sg-2 b:after{content: '2 = 56 px';}
#structure .sg-3 b:after{content: '3 sqr = 84 px';}
#structure .sg-4 b:after{content: '4 sqr = 112 px';}
#structure .sg-5 b:after{content: '5 squares = 140 px';}
#structure .sg-6 b:after{content: '6 squares = 168 px';}
#structure .sg-7 b:after{content: '7 squares = 196 px';}
#structure .sg-8 b:after{content: '8 squares = 224 px';}
#structure .sg-9 b:after{content: '9 squares = 252 px';}
#structure .sg-10 b:after{content: '10 squares = 280 px';}
#structure .sg-11 b:after{content: '11 squares = 308 px';}
#structure .sg-12 b:after{content: '12 squares = 336 px';}
#structure .sg-13 b:after{content: '13 squares = 364 px';}
#structure .sg-14 b:after{content: '14 squares = 392 px';}
#structure .sg-15 b:after{content: '15 squares = 420 px';}
#structure .sg-16 b:after{content: '16 squares = 448 px';}
#structure .sg-17 b:after{content: '17 squares = 476 px';}
#structure .sg-18 b:after{content: '18 squares = 504 px';}
#structure .sg-19 b:after{content: '19 squares = 532 px';}
#structure .sg-20 b:after{content: '20 squares = 560 px';}
#structure .sg-21 b:after{content: '21 squares = 588 px';}
#structure .sg-22 b:after{content: '22 squares = 616 px';}
#structure .sg-23 b:after{content: '23 squares = 644 px';}
#structure .sg-24 b:after{content: '24 squares = 672 px';}
#structure .sg-25 b:after{content: '25 squares = 700 px';}
#structure .sg-26 b:after{content: '26 squares = 728 px';}
#structure .sg-27 b:after{content: '27 squares = 756 px';}
#structure .sg-28 b:after{content: '28 squares = 784 px';}
#structure .sg-29 b:after{content: '29 squares = 812 px';}
#structure .sg-30 b:after{content: '30 squares = 840 px';}
#structure .sg-31 b:after{content: '31 squares = 868 px';}
#structure .sg-32 b:after{content: '32 squares = 896 px';}
#structure .sg-33 b:after{content: '33 squares = 924 px';}
#structure .sg-34 b:after{content: '34 squares = 952 px';}
#structure .sg-35 b:after{content: '35 squares = 980 px';}

#footer{background-color:#BFEBFF; height:84px; margin:7px 0 0 0;}
#footer p{font-size:1.2em; padding-top:14px; margin-left:7px;}
#footer p a{border-bottom:1px solid #E1F6FF; text-decoration:none;}
#footer p a:hover{border-bottom:1px dotted #316AC5;}