<%@ Page Title="" Language="C#" MasterPageFile="~/landing/landing_base.master" AutoEventWireup="true" CodeFile="store.aspx.cs" Inherits="landing_store_store" %>

<asp:Content ID="Content1" ContentPlaceHolderID="content_head" Runat="Server">

    <script src="<%= ResolveUrl("~/assets/bootstrap/js/bootstrap.js") %>"></script>
    <script src="<%= ResolveUrl("~/assets/libs/js/simple-cart-js/simplecart.js") %>"></script>
    <script src="<%= ResolveUrl("store.js") %>"></script>

    <style>

        .productbox {
            background-color:#ffffff;
	        padding:10px;
	        margin-bottom:10px;
	        -webkit-box-shadow: 0 8px 6px -6px  #999;
	           -moz-box-shadow: 0 8px 6px -6px  #999;
	                box-shadow: 0 8px 6px -6px #999;
        }

        .producttitle {
            font-weight:bold;
	        padding:5px 0 5px 0;
        }

        .productprice {
	        border-top:1px solid #dadada;
	        padding-top:5px;
        }

        .pricetext {
	        font-weight:bold;
	        font-size:1.4em;
        }

        /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 30px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 300px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 300px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 100px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


        @media (max-width: 767px) {

            .navbar-inner {
                margin: -20px;
            }

            .carousel {
                margin-left: -20px;
                margin-right: -20px;
            }

                .carousel .container {
                }

                .carousel .item {
                    height: 300px;
                }

                .carousel img {
                    height: 300px;
                }

            .carousel-caption {
                width: 65%;
                padding: 0 70px;
                margin-top: 100px;
            }

                .carousel-caption h1 {
                    font-size: 30px;
                }

                .carousel-caption .lead,
                .carousel-caption .btn {
                    font-size: 18px;
                }

            .marketing .span4 + .span4 {
                margin-top: 40px;
            }

            .featurette-heading {
                font-size: 30px;
            }

            .featurette .lead {
                font-size: 18px;
                line-height: 1.5;
            }
        }

         /* Main marketing message and sign up button */
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }

    </style>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="content_pre_body" Runat="Server">
    <div style="position:absolute;z-index:1000;" class="jumbotron">
        <h1 style="color:#fff;color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,.4);">Tienda</h1>
        <p style="color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,.4);" class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <!-- Carousel
    ================================================== -->
    <div id="shop_carousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://cdn.morguefile.com/imageData/public/files/s/Schick/09/l/14115307949t5s5.jpg" alt="">
          <div class="container">
            <%--<div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>--%>
          </div>
        </div>
        <div class="item">
          <img src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-02.jpg" alt="">
          <div class="container">
            <%--<div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>--%>
          </div>
        </div>
        <div class="item">
          <img src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-03.jpg" alt="">
          <div class="container">
            <%--<div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>--%>
          </div>
        </div>
      </div>
      <%--<a class="left carousel-control" href="#shop_carousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#shop_carousel" data-slide="next">&rsaquo;</a>--%>
    </div><!-- /.carousel -->
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="right_header_content_left" Runat="Server">
    <%--<li class="current" data-id="101" data-level="1">
        <a href="../signup/signup.aspx" style="padding: 25px 31px;">Cart</a>
    </li>--%>

    <style>

        .dropdown-menu:before {
          position: absolute;
          top: -7px;
          left: 33px;
          display: inline-block;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #ccc;
          border-left: 7px solid transparent;
          border-bottom-color: rgba(0, 0, 0, 0.2);
          content: '';
        }

        .dropdown-menu:after {
          position: absolute;
          top: -6px;
          left: 33px;
          display: inline-block;
          border-right: 6px solid transparent;
          border-bottom: 6px solid #ffffff;
          border-left: 6px solid transparent;
          content: '';
        }

        @-moz-keyframes spin {
            from { -moz-transform: rotate(0deg); }
            to { -moz-transform: rotate(360deg); }
        }
        @-webkit-keyframes spin {
            from { -webkit-transform: rotate(0deg); }
            to { -webkit-transform: rotate(360deg); }
        }
        @keyframes spin {
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }

        .shopping-cart {
            color:red; 
        }

        .shopping-cart-icon{
            color:#fff; 
        }

        .shopping-cart-icon:hover{
            color:#eee; 
        }

        .cart-count-bubble{
            position: absolute;
            background: none repeat scroll 0 0 #ffc120;
            border-radius: 50%;
            color: #444;
            display: none;
            font-size: 12px;
            font-weight: 700;
            height: 20px;
            left: 45px;
            line-height: 20px;
            padding: 0;
            top: 12px;
            width: 20px;
            text-align: center;
            font-family: myriad-pro,"Helvetica Neue",Helvetica,Arial,sans-serif;
        }

            .spin-it{
                -webkit-animation-name: spin;
                -webkit-animation-duration: 100ms;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;
                -moz-animation-name: spin;
                -moz-animation-duration: 100ms;
                -moz-animation-iteration-count: 1;
                -moz-animation-timing-function: linear;
                -ms-animation-name: spin;
                -ms-animation-duration: 100ms;
                -ms-animation-iteration-count: 1;
                -ms-animation-timing-function: linear;
            }

            .cart-count-bubble:hover {
                background: #ffcc46; 
            }
        

    </style>

    <div class="nav" style="margin-top:2px;" id="loginView_holder">
        <div id="dropdown-user" class="">
            <a style="font-size:18px; font-weight:normal;" class="shopping-cart btn dropdown-toggle" data-toggle="dropdown">        
                <i class="fw-icon-shopping-cart fw-icon-2x shopping-cart-icon animated" style="margin-right:5px;"></i>
                <span class="cart-count-bubble" style="display: inline-block;">0</span>
                <%--<span class="caret"></span>--%>
            </a>
            <ul style="color:#000; left:0px;" class="dropdown-menu">
                <div style="width:100%;padding:8px;font-size:16px;">
                    <div style="margin-top:3px;">
                        <div style="float:left; width:50px;text-align:right;margin-right:5px;">
                            <span style="text-align:right;">Items :</span>
                        </div>
                        <span style="font-family:Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif" class="cart-total-items"></span>
                    </div>
                    <div style="margin-top:5px;">
                        <div style="float:left; width:50px;text-align:right;margin-right:5px;">
                            <span style="text-align:right;">Total :</span>
                        </div>
                        <span> U$D </span><span style="font-family:Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif" class="cart-total"></span>
                    </div>
                </div>
                <li class="divider"></li>
                <li id="cart-dropdown-option-checkout"><a href="cart-overview.aspx">Ver Carrito</a></li>
                <li id="cart-dropdown-option-empty" class="empty-cart"><a style="cursor:pointer;" >Vaciar</a></li>
            </ul>
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="content_body" Runat="Server">

    <div class="big-blue-header">
        <div class="container">
            <div class="row-fluid">
                <div data-item="true" data-itemname="DASH GPRS" data-itemprice="450.00" data-itemid="DHGPRS" data-itemtype="hardware" data-itemnumber="1" class="span4 column productbox animated bounceInUp">
                    <img src="http://www.dzsupervision.com/Styles/images/radioHardware.png" class="img-responsive">
                    <div class="producttitle"><span>DASH GPRS</span></div>
                    <div class="productprice">
                        <div class="pull-right">
                        <button class="btn btn-danger btn-sm add-to-cart-btn" role="button">Add to Cart</button>
                        </div>
                        <div class="pricetext">$450.00</div>
                    </div>
                </div>
                <div data-item="true" data-itemname="DASH WIFI" data-itemprice="490.00" data-itemid="DHWIFI" data-itemtype="hardware" data-itemnumber="2" class="span4 column productbox animated bounceInUp">
                    <img src="http://placehold.it/460x250/ffffff/000000&text=DASH WIFI" class="img-responsive">
                    <div class="producttitle"><span>DASH WIFI</span></div>
                    <div class="productprice">
                        <div class="pull-right">
                        <button class="btn btn-danger btn-sm add-to-cart-btn" role="button">Add to Cart</button>
                        </div>
                        <div class="pricetext">$490.00</div>
                    </div>
                </div>
                <div data-item="true" data-itemname="DOT" data-itemprice="150.00" data-itemid="DT" data-itemtype="hardware" data-itemnumber="3" class="span4 column productbox animated bounceInUp">
                    <img src="http://placehold.it/460x250/ffffff/000000&text=DOT" class="img-responsive">
                    <div class="producttitle"><span>DOT</span></div>
                    <div class="productprice">
                        <div class="pull-right">
                        <button class="btn btn-danger btn-sm add-to-cart-btn" role="button">Add to Cart</button>
                        </div>
                        <div class="pricetext">$150.00</div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span2 column productbox">
                    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
                    <div class="producttitle">Product 4</div>
                    <div class="productprice"><div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div><div class="pricetext">£8.95</div></div>
                </div>
            </div>
        </div>
    </div>


</asp:Content>

