/* HTML5 ✰ Boilerplate */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
  display: block;
}

blockquote, q
{
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after
{
  content: "";
  content: none;
}

ins
{
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark
{
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del
{
  text-decoration: line-through;
}

abbr[title], dfn[title]
{
  border-bottom: 1px dotted;
  cursor: help;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
}

hr
{
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select
{
  vertical-align: middle;
}

body
{
  font:13px/1.231 sans-serif;
  font-size:small;
  height: auto;
  overflow: hidden;
}

select, input, textarea, button
{
  font:99% sans-serif;
}

pre, code, kbd, samp
{
  font-family: monospace, sans-serif;
}

html
{
  overflow-y: scroll;
}

a:hover, a:active
{
  outline: none;
}

ul, ol
{
  margin-left: 2em;
}

ol
{
  list-style-type: decimal;
}

nav ul, nav li
{
  margin: 0;
  list-style:none;
  list-style-image: none;
}

small
{
  font-size: 85%;
}

strong, th
{
  font-weight: bold;
}

td
{
  vertical-align: top;
}

sub, sup
{
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup
{
  top: -0.5em;
}

sub
{
  bottom: -0.25em;
}

pre
{
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 15px;
}

textarea
{
  overflow: auto;
}

.ie6 legend, .ie7 legend
{
  margin-left: -7px;
}

input[type="radio"]
{
  vertical-align: text-bottom;
}

input[type="checkbox"]
{
  vertical-align: bottom;
}

.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea { color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }


/**
 * Primary styles
 *
 * Author: 
 */


.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-device-width: 480px) {
  
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}


/****************** Custom ******************/


#container
{
  width: 900px;
  Height: 1000px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  /*border-width: 2px;
  border-style: dashed;
  border-color: #000000;*/
}

header
{
  width: auto;
  /*height: 200px;*/
  /*border-width: 2px;
  border-style: dashed;
  border-color: #000000;*/
}

#TopWrap
{
  width: auto;
  height: 100px;
  background-image: url("images/Header/head1.jpg");
  background-repeat: no-repeat;
  /*border-width: 1px;
  border-style: dashed;
  border-color: #000000;*/
}

#Logo
{
  width: 410px;
  height: auto;
  float: left;
  /*border-width: 1px;
  border-style: dashed;
  border-color: #000000;*/
}

#Logo img
{
  margin-top: 8px;
}

#Contact
{
  width: auto;
  height: auto;
  float: right;
  font-weight: bold;
  font-size: 1em;
  font-variant: small-caps;
  /*border-width: 1px;
  border-style: dashed;
  border-color: #000000;*/
  
}

#ControlBox
{
  float: right;
  width: auto;
  height: 100px;
  /*border-width: 5px;
  border-style: dashed;
  border-color: #000000;*/
}

#ControlBox #Upper
{
  height: 40%;
  text-align: right;
  /*border-width: 1px;
  border-style: dashed;
  border-color: #000000;*/
}

#ControlBox #Upper h1
{
    color: #4166B6;
    margin-top: 10px;
    margin-left: 5px;
    font-size: 120%;
}

#ControlBox #Lower
{
  clear: both;
  height: 40%;
  /*border-width: 1px;
  border-style: dashed;
  border-color: #000000;*/
}

#ContentWrap #Left
{
    float: left;
    width: 600px;
}

#Upper div
{
  float: left;
  margin-left: 150px;
  height: 100%;
  
}

#MiddleBody
{
    clear: both;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

#MiddleBody #Left
{
    float: left;
    width: 600px;
    margin-top: 40px;
}

#MiddleBody #Right
{
    float: right;
    margin-top: 40px;
    /*margin-left: 20px;*/
    width: 200px;
    /*border-width: 2px;
    border-style: solid;
    border-color: #00C0FF;*/
}

#MiddleBody #Right img
{
    width: 200px;
}

#MiddleBody #Right form
{
    /*width: 200px;*/
    margin-left: 10%;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

#BottomStrip
{
    clear: both;
}

#BottomStrip #Left
{
    float: left;
    /*height: 190px;
    width: 240px;*/
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

#BottomStrip #Right div
{
    position: absolute;
    z-index: 0
}

#BottomStrip #Right div.previous
{
    z-index: 1;
}

#BottomStrip #Right div.current
{
    z-index: 2;
}

#BottomStrip #Right
{
    float: right;
    height: 190px;
    width: 200px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

#Tag
{
    height: 65px;
    clear: both;
    padding-top: 20px;
    margin-top: 10px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

#Tag ul li
{
    float: left;
    margin: 0 20px 0 20px;
    list-style-type: none;
    text-align: center;
}

/*......................Slider Styles....................*/


#slider
{
    width: 950px;
    height: 350px;
    margin: 0 auto 0 auto;
}

#buttonPrev
{
    background: transparent url("../images/control_left.png") center center repeat-x;
    float: left;
    position: absolute;
    height: 75px;
    width: 25px;
    /*margin-right: -52px;*/
    margin-top: 130px;
    z-index: 1;
}

#buttonPrev :hover
{
    background: url("../images/control_left.png") center center repeat-x;
}

#buttonNext
{
    background: transparent url("../images/control_right.png") center center repeat-x;
    float: right;
    position: absolute;
    height: 75px;
    width: 25px;
    margin-left: 870px;
    margin-top: 130px;
    z-index: 2;
}

#buttonNext :hover
{
    background: transparent url("../images/control_right.png") center center repeat-x;
}

#slideShow
{
    /*height: 450px;*/
    width: 900px;
    float: left;
    position: relative;
    overflow: hidden;
}

#slides
{
    height: 350px;
    width: 2850px;
    position: relative;
}

.slide
{
    height: 350px;
    width: 900px;
    float: left;
    display: inline;
}


      /***** Overlay Styles ******/

.top
{
  top:0;
  left:0;
  width: 900px;
  height: 60px;
}

.bottom
{
  top:0;
  bottom: 0;
  width: 900px;
  height: 60px;
}

.right
{
  top:0;
  bottom: 0;
  left:0;
  width: 900px;
  height: 290px;
}

.left
{
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 290px;
}


/********************** SocialNetwork *********************/

#LinkedIn
{
    float: right;
    margin: 10px 0 10px 10px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/  
}

#LinkedIn img
{
    width: 20px;
}

#Facebook
{
    float: right;
    margin: 10px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/  
}

#Facebook img
{
    width: 20px;
}

#Twitter
{
    float: right;
    margin: 10px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000; */ 
}

#Twitter img
{
    width: 20px;
}

#WordPress
{
    float: right;
    margin: 10px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/  
}

#WordPress img
{
    width: 20px;
}

#FaceLike
{
    clear: both;
    width: auto;
    float: right;
    height: auto;
}

/***************** Portfolio Style for javascript *************************/

#filter ul
{
    width: 100%;
    font-size: 16px;  
    list-style: none;  
    margin-left: 5px;
    margin-top: 20px;

      
}
    
#filter ul li
{    
    float: left;  
    line-height: 16px;  
    margin-left: 10px;  
    padding-right: 10px;
    margin-bottom: 20px;
}  

#filter ul li:last-child
{
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

#filter ul li a img
{    
    
} 

#filter ul a
{
  color: #999;
  text-decoration: none;
}

#filter ul li.current a, #filter ul a:hover
{
  text-decoration: none;
}

#filter ul li.current a
{
  color: #333;
  font-weight: bold;
}

#portfolio ul 
{  
  float: left;  
  list-style: none;  
  margin-left: 5px;  
  width: 900px;  
}
    
#portfolio ul li
{  
  border: 1px solid #dedede;  
  float: left;  
  margin: 0 10px 10px 0;  
  padding: 5px;  
  width: 202px;
}  

#portfolio ul a
{
  display: block; width: 100%;
}

#portfolio ul a:hover
{
  text-decoration: none;
}

#portfolio ul img
{
  border: 1px solid #dedede;
  display: block;
  padding-bottom: 5px;
  width: 200px;
  height: 115px;
}

/***************** pop *****************/

#backgroundPopup
{  
  display:none;
  
  position:fixed;  
  _position:absolute; /* hack for internet explorer 6*/  
  height:100%;  
  width:100%;  
  top:0;  
  left:0;  
  background:#000000;  
  border:1px solid #cecece;  
  z-index:1;  
}

#popupContact
{  
  display:none;
  position:fixed;  
  _position:absolute; /* hack for internet explorer 6*/
  width:608px;
  height:550px;    
  background:#FFFFFF;  
  border:2px solid #cecece;  
  z-index:2;  
  padding:12px;  
  font-size:13px;  
}

#popupContact h1
{  
  text-align:left;  
  color:#6FA5FD;  
  font-size:22px;  
  font-weight:700;  
  border-bottom:1px dotted #D3D3D3;  
  padding-bottom:2px;  
  margin-bottom:20px;  
}

#popupContactClose
{  
  font-size:14px;  
  line-height:14px;  
  right:6px;  
  top:4px;  
  position:absolute;  
  color:#6fa5fd;  
  font-weight:700;  
  display:block;  
}

#button
{  
  text-align:center;  
  margin:100px;  
}  
/***************************************/

/***************** Footer Styles **********************/

footer
{
    clear: both;
    margin-bottom: 50px;
/*    background: transparent url("../images/control_right.png") center center repeat-x;*/ 

}

footer .Left
{
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-top: -12px;
    background: url("../images/greycon.jpg") center center no-repeat;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

footer a:hover .Left 
{
    background: url("../images/icon.jpg") center center no-repeat;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

footer #Right
{
    float: right;
    width: 400px;
    /*border-width: 1px;
    border-style: dashed;
    border-color: #000000;*/
}

footer #Right img
{
    float: right;
    margin-top: -13px;
    margin-left: 10px;
}

footer #Right #Bottom
{
    margin-top: 40px;
}

footer #RockBottom
{
    clear: both;
    padding: 5px;
    width: auto;
    height: auto;
    text-align: center;
    background-color: #646363;
    border-top: solid;
    border-width: 1px;
    border-color: #000000;
}


/******************** Page Specific styles **********************/

#TopTextWrap
{
    margin-top: 20px;
    margin-bottom: 50px;
}


/******************** Portfolio Page ****************************/

#PBRight
{
    float: right;
    width: 250px;
    margin-top: 40px;
    /*border-top: dotted;
    border-width: 1px;
    border-color: #000000;*/
}

#PBLeft
{
    float: left;
    width: 600px;
    /*border-top: solid;
    border-width: 1px;
    border-color: #000000;*/
}

.SlideH
{
    clear: both;
    padding: 5px;
    /*border-top: solid;
    border-width: 1px;
    border-color: #B0B0B0;*/
}

/*--Main Container--*/
.main_view
{
	float: left;
	position: relative;
    /*border-top: dotted;
    border-width: 1px;
    border-color: #000000;*/
}

/*--Window/Masking Styles--*/
.window
{
	height:286px;
    width: 600px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
    /*border-top: solid;
    border-width: 1px;
    border-color: #B0B0B0;*/
}

.image_reel
{
	position: absolute;
	top: 0; left: 0;
}

.image_reel img
{
    float: left;
}

/*--Paging Styles--*/
.paging
{
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:40px;
	z-index: 0; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	/*background: url(paging_bg2.png) no-repeat;*/
    background-color: red;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}

.paging a
{
	padding: 5px;
	text-decoration: none;
	color: #fff;
}

.paging a.active
{
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.paging a:hover
{
    font-weight: bold;
}

.PTextStrip
{
    /*width: 100px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    /*border-width: 1px;
    border-bottom: solid;
    border-top: dotted;*/
}

.IDbox
{
    width: 600px;
    color: #ffffff;
    margin-top: 25px;
    margin-bottom: 50px;
    background-color: #B0B0B0;
    /*font-size: x-large;*/
    font-size: large;
    padding-left: 10px;
    padding-top: .25px;
    padding-bottom: .25px;
}

/***************************** services page ****************************/

/************** Slider **************/

ul.gallery
{
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0 0 80px 0;
    padding: 0;
}

ul.gallery li
{
	float: left;
	margin: 0; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}

ul.gallery li a.thumb
{
	width: 600px; /*--Width of image--*/
	height: 50px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}

ul.gallery li span
{ /*--Used to crop image--*/
	width: 600px;
	height: 50px;
	overflow: hidden;
	display: block;
}

ul.gallery li a.thumb:hover
{
	background: #333; /*--Hover effect for browser with js turned off--*/
}

ul.gallery li h2
{
	font-size: 1em;
	font-weight: normal;
	margin: 0;
   padding: 10px;
	background: #EDEFF4;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}

ul.gallery li a
{
    text-decoration: none;
    color: blue;
    display: block;
}