@import 'AR-Techni/stylesheet.css';

.test{font-family:ARTechniRegular}

html, body	{

    margin:0; 
    padding:0; 
    font-family:'ARTechniRegular', Helvetica, Arial, sans-serif;
    font-size:100%;
    color:#666666;
    -webkit-text-size-adjust: none;
    line-height:1.4em;
}
#circles{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;	
}
#IEelement{
    display:none; 
    position:relative; float:right; width:100%; text-align:center;
}
#floater	{
    height:50%; 
    margin-bottom:-260px; 
    position:relative;
}
#content	{
    clear:both; 
    height:520px; 
    position:relative; 
    margin:0 auto; 
    width:560px; 
    text-align:center; 
    z-index:100;
    font-size:.85em;
    /* border:1px solid red; */
}


*{
    margin:0;
    padding:0;
}

#logo{
    background-image:url("../images/logo.png");
    width:227px;
    height:71px;
    margin:0 auto;
}
#logo_sm{

}
a{
    color:#Ff3366;	
}
a img{
    border:0;
    outline:none;
}
p, h1, h2, h3, h4, h5, h6{
    font-weight:normal;
    margin-bottom:10px;
    line-height:1.4em;
}
h1{margin-bottom:40px;}
h3{border-bottom:3px solid #ee2d5b;
   margin-bottom:20px;
   background-image: url(../images/arrDown.png);
   background-position:right center;
   background-repeat: no-repeat;
}
p{
    font-family:'ARTechniRegular', Helvetica, Arial, sans-serif;
    color:#999999;

}
.large{font-size:1.2em;}
.pink{color:#ee2d5b !important;}
.topSpace{
    margin-top:8px;
}

#wrapper{
    position:relative;
    font-family:'ARTechniRegular', Helvetica, Arial, sans-serif;
    color:#666666;

}
#portfolioContent{
    margin:0 auto;
    width:1000px;

}
.expPanels h3{cursor:pointer;}

.panelContent {position:relative; height:0; overflow:hidden; }
.panelContent > div {height:auto; overflow-y:auto; }

.listTitle{
    border-top:1px dotted #cccccc;
    border-bottom:1px dotted #cccccc;
    padding:5px 0;

}

#innerContent{
    margin:50px auto;
    width:650px;
}

#innerContent ul{
    margin:0 0 15px 0;
    padding:0 0 0 30px;
    list-style-image: url(../images/pinkDot.png);
    line-height:1.4em;



}
#innerContent ul li{
    padding:0 0 5px 0;

}
#innerContent > div{margin:0 0 40px 0; }
#innerContent div, #innerContent div p{
    color:#666666;
    font-family:Georgia, serif;
}
.play, .pause{cursor:pointer;}
.offset{margin-top:50px !important;}
#littlePeople{
    width:564px; 
    position:relative; 
    overflow:hidden;
} 
.littlePeopleImg{
    background-image: url("../images/littlePeople.png");
    width:434px;
    height:325px; 
    float:left;
}


#sidebar{
    position:fixed;
    z-index:500;
    top:100px;
    left:0;
    cursor:move;
}
#sidebar:active{
}
.nav{
    width:130px;
    height:185px; 

    margin-left:-10px;


    -webkit-radius: 10px;
    -webkit-radius: 10px;
    -moz-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow:0 0 6px #999;
    -moz-box-shadow:0 0 6px #999;
    box-shadow:0 0 6px #999;

    background-color:#aeb2bf;
    border:1px solid white;
    position:relative;
}
.nav div{
    text-transform:uppercase;
    display:block;
    height:25px;
    position:absolute;
    z-index:2;
}
.nav div{
    top:20px;
}
.nav div+div{
    top:45px;
}
.nav div+div+div{
    top:70px;
}
.nav div+div+div+div{
    top:95px;
}
.nav div+div+div+div+div{
    top:120px;
}
.nav div+div+div+div+div+div{
    top:145px;
}
.nav div a{
    display:block;
    width:95px;
    padding-left:35px;
    color:white;
    text-decoration:none;
    font-size:.9em;
    line-height:1.9em;
}

#hoverBox{
    position: absolute;
    background-color:#ee3162;
    width:130px;
    height: 25px;
    left:0;
    top:0;
    display:none;
    z-index: 1;
}

#dragHandle{cursor:move;}

#portfolioMenu{
    font-size:1.1em;
    margin:20px 0 20px 10px;
}
.portMenuItem{
    text-transform:uppercase;
    padding-right:1.1em;

}
.portMenuItem a{text-decoration:none; color:#444444;}
.currPortMenuItem{
    text-transform:lowercase !important;
    font-size:1.4em;
    color:#ee3162;
}

#portfolioBg{
    width:960px;
/*    height:645px;*/
overflow:hidden;
    background-color:#ee3162;
    margin:10px;
    padding:5px;

}

.box-shadow{
    -webkit-box-shadow:0 0 10px #666;
    -moz-box-shadow:0 0 10px #666;
    box-shadow:0 0 10px #666;

}

/* flipper */

.panel {
    float: left;
    width: 310px;
    height: 205px;
    margin: 5px;
    position: relative;
    color:#94a3b6;
    -webkit-perspective: 600;
    cursor:pointer;
}
.panel img{
    width: 310px;
    height: 205px;
}

.panel table{
    margin:10px;

}    
.panel table td{
    vertical-align:top; 
    padding:3px 0;
    width:100px;
} 

.panel table td+td{
    width:auto;
}     
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 350;
    width: inherit;
    height: inherit;

    box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);

    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}
.panel.flip .front {
    z-index: 350;

    -webkit-transform: rotateY(-180deg);

    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}

.panel .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    width: inherit;
    height: inherit;		
    background-color:#2a323d;

    -webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}

.panel.flip .back {
    z-index: 400;

    -webkit-transform: rotateY(0deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}

.reverse{
    display:block;
    width:20px;
    height:20px;
    float:right;
}		
/* -- cosmetics -- */
.panel.flip .action {display: none; }


input, textarea{
    background-color: #eeeeee;
    border:1px solid #cccccc;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding:6px;
/*    color:#ee3162;*/
    color:black;
    font-size: 1em;
    font-weight:normal;
    font-family:Georgia, serif;
    width:20em;
} 

::-webkit-input-placeholder {
    color:    #999999;
}

:-moz-placeholder {
    color:    #999999;
}
:focus{
    outline:none;
}
::-moz-focus-inner{
    border:0;
}
input[type="text"], textarea{
    /* -webkit-background-composite: destination-over;  removes mystery text-box shadow - but also puts bgimg below bgcolor*/
    background-image: url(../images/greypx.gif);
}
label.error{display:block; padding-left: 7px; color:#ee3162;}

/*.submitButton{
    -webkit-box-sizing: border-box;
    background-color: #ee3162;

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.597656)), color-stop(0.49, rgba(255, 255, 255, 0.109375)), color-stop(0.51, rgba(0, 0, 0, 0.0390625)), to(rgba(255, 255, 255, 0.199219)));
    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.597656), rgba(255, 255, 255, 0.109375) 49%, rgba(0, 0, 0, 0.0390625) 51%, rgba(255, 255, 255, 0.199219));

    border:0;
    border-style:none;

    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;

    -webkit-box-shadow: 2px 2px 5px #cccccc; 
    box-shadow: 2px 2px 5px #cccccc;

    color: #fbd0d8;
    cursor: pointer;
    display: block;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    height: 38px;
    line-height: 38px;
    padding: 0 15px 3px 15px;
    margin-top:10px;
    text-align: center;
    text-decoration: none;
    text-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 1px, rgba(238, 45, 91, 0.496094) 1px 0px 1px, rgba(238, 45, 91, 0.496094) -1px 0px 1px, rgba(238, 45, 91, 0.796875) 0px -1px 1px;
    width:auto;
}*/
button, .glossy-button{
        font-family: helvetica, arial, sans-serif;
        font-size:14px;
        line-height:28px;
        height:31px;
        display:inline-block;
        padding:0 10px;
        color:white;
        cursor:pointer;
        width:auto;
        
        background-color: #Ff3366;

        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.49, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
        background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
        background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */
        background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */

/*        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7c9c', endColorstr='#f43764',GradientType=0 );  IE6-9 */
    
/*      -webkit-box-shadow: transparent 0px -2px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px, rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 1px 0px 0px 0px, rgba(0, 0, 0, 0.1) -1px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 0px 0px, rgba(255, 255, 255, 0.8) 0px 1px 0px 0px;
        -moz-box-shadow: transparent 0px -2px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px, rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 1px 0px 0px 0px, rgba(0, 0, 0, 0.1) -1px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 0px 0px, rgba(255, 255, 255, 0.8) 0px 1px 0px 0px;
        box-shadow: transparent 0px -2px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px, rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 1px 0px 0px 0px, rgba(0, 0, 0, 0.1) -1px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 0px 0px, rgba(255, 255, 255, 0.8) 0px 1px 0px 0px;
*/      
        
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        -o-border-radius: 7px;
        border-radius: 7px;
        
        border: 3px solid #Ff3366;
        
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box; 
        box-sizing: border-box; 
        
        text-decoration:none;
        }
button:hover, .glossy-button:hover{
        background-color: #000000;
        border-color: #333333;
    /*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );  IE6-9 */

    }
button:active, .glossy-button:active{
        background-color: #333333;
        border-color: #333333;
        color:#eeeeee;
    /*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222',GradientType=0 );  IE6-9 */

    } 
    
/* for IE */    
.butleft, .butright{
        background-image:url(../images/butt-bg.png);
        background-repeat: no-repeat;
        height:31px;
        float:left;
        padding:0 0 0 10px;
        display:block;
    }
.butright{
        background-position: right top;
        width:10px;
        padding:0 !important;
    }

.smallButton{
    -webkit-box-sizing: border-box;
    background-color: #cccccc;

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.597656)), color-stop(0.49, rgba(255, 255, 255, 0.109375)), color-stop(0.51, rgba(0, 0, 0, 0.0390625)), to(rgba(255, 255, 255, 0.199219)));
    background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.597656), rgba(255, 255, 255, 0.109375) 49%, rgba(0, 0, 0, 0.0390625) 51%, rgba(255, 255, 255, 0.199219));

    border:1px solid #aaaaaa;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    -webkit-box-shadow: 2px 2px 5px #cccccc; 
    box-shadow: 2px 2px 5px #cccccc;

    color: #666666;
    cursor: pointer;
    display: inline;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 30px;
    line-height: 24px;
    padding: 0 15px;
    margin:0 0 10px 0;
    text-align: center;
    text-decoration: none;
    /*text-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 1px, rgba(238, 45, 91, 0.496094) 1px 0px 1px, rgba(238, 45, 91, 0.496094) -1px 0px 1px, rgba(238, 45, 91, 0.796875) 0px -1px 1px;*/
    width:auto;
    vertical-align: 30%;
}
.notesArea{
   min-height:100px;
}
.note{
    margin-top:15px;
    padding:15px;
    border:1px solid #666666;
}

/* portfolio */

        #corpidPortfolioContent{
                width:320px;
                margin:0 auto; /* for iPad set left-margin to 163px */
        }
            
        .corpidItem{
                border:1px solid #aeb2bf;
                margin-bottom:50px;
                width:310px;
                height:205px;
                padding: 5px;
                position:relative;
                background-color:#eeeeee;
        }
        .corpidItem div{
                width:310px;
                height:205px;
                background-repeat: no-repeat;
        }

        #webPortfolioContent{
            width:820px;
            margin:0 0 0 163px; /* for iPad set left-margin to 163px */
        }
        .webItem{
            border:1px solid #aeb2bf;
            margin-bottom:50px;
            height:342px;
            padding: 5px;
            position:relative;
            background-color:#eeeeee;
        }
        .dev{
            background-color:#ffffff;
        }
        h2.deve{
            color:#ee3162;
            border-top:1px dotted #cccccc;
            border-bottom:1px dotted #cccccc;
            margin:40px 0;
        }
        .info{
            float:left;
            width:280px;
            padding:20px 0 20px 20px;
            line-height:18px;
            
        }
        
        .info .link, .info .title{
            font-family:Georgia, serif;
            color: #ee3162;
            
        }
        .info .link a{
            text-decoration:underline;
            font-size:18px;
        }
        .info .descrip{
            font-family:Helvetica, sans-serif;
            font-size:13px;
            color:#2b2e3a;
        }
/* end  portfolio */



.nojs body{}

.nojs .nav .button:hover{background-color:#ee3162;}

.nojs .panelContent{height:auto; overflow:visible; }

#thanks{
    display:none;
}

.testimonials a{
    color:grey;
    text-decoration:none;
}
.testimonials a:hover{
    text-decoration:underline;
}
.testimonials p{
    margin-bottom: 20px;
}
.testimonials p:before{
    content: url(../images/quote-left.png);
}
.testimonials p:after{
    content: url(../images/quote-right.png);
    
}

.testimonials p:nth-child(even){
    margin-left:50px;
}

/* EE-badge */
#pageMain a, .certifiedExpertFloatLeft, .certifiedExpertFloatRight, .certifiedExpertFloatedContent, .certifiedExpertZoneRank{
font-family: helvetica, sans-serif !important;
color: white !important;
}
.EE-badge, .EE-screenshot{
    float:left;
    padding-right:10px;
}

/* mobile */

/* For smaller devices */
@media screen and (max-device-width: 480px) {
	html, body { 
		
	}
}
/* Portrait */
@media screen and (max-width: 320px) {
.panel {
   float: none;
   margin-bottom:10px;
   width: 308px;
   height:200px;
   
}
		
#portfolioBg{
    width:100%;
    height:100%;
    margin:0;
}

.panel img{
   width:100%;
   height:auto;

	
}
#innerContent{
    padding:10px;
    margin:0;
    -webkit-box-sizing: border-box;
    width:100%;
}
#portfolioMenu{
    font-size:.9em;
}
#sidebar{display:none;}

input[type="text"], textarea{
    width:300px;
    -webkit-box-sizing: border-box;
 
}
}
/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
	
.panel {
   float: none;
   margin-bottom:10px;
   width: 456px;
   height:304px;
   
}
		
#portfolioBg{
    width:100%;
    height:100%;
    margin:0;
    
}

.panel img{
   width:100%;
   height:auto;

	
}
#innerContent{
    padding:10px;
    margin:0;
    -webkit-box-sizing: border-box;
    width:100%;
}
#sidebar{display:none;}

input[type="text"], textarea{
    width:100%;
    -webkit-box-sizing: border-box;
 
}

}